---
category: Layout
---

# Stack

Vertical rhythm between blocks. Nothing in this system carries its own margins, so two
headings placed next to each other sit flush; Stack is what separates them.

`gap` is a step on the space scale, 1 to 9. It is never a raw pixel value: hard-coded
spacing is a defect in this system, and this component is how you avoid one.

`align="start"` keeps children at their natural width, which is what a button or a link
wants. The default stretches them to the column.

```jsx
<Stack gap={6}>
  <Heading>Four stages. One method.</Heading>
  <Text measure>Threat analysis, engineering, verification and monitoring.</Text>
  <Stack gap={4} align="start">
    <Button href="/contact">Talk to us</Button>
  </Stack>
</Stack>
```

Astro equivalent: `<div style="display: grid; gap: var(--space-6);">`.