homepage_relaunch/.design-sync/ds-src/Stack.md

category

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.

<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);">.