Library · Foundations

Stack

Vertical flow with consistent rhythm — column flex with a --space-* token gap.

Live preview — edit theme bottom-right

---
import Stack from "../components/primitives/layout/Stack.astro";
---
<Stack gap="s">
  <div class="box">gap="s"</div>
  <div class="box">stacked</div>
  <div class="box">children</div>
</Stack>
<Stack gap="l" align="start">
  <div class="box">gap="l"</div>
  <div class="box">align="start" — children shrink to content</div>
</Stack>

Props

Name	Type	Required	Description
`gap`	`'5xs' \| '4xs' \| '3xs' \| '2xs' \| 'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| '2xl' \| '3xl' \| '4xl' \| '5xl'`	—	Gap between children as a --space-* token name (default: 'm')
`align`	`'stretch' \| 'start' \| 'center' \| 'end'`	—	Cross-axis alignment (default: 'stretch')
`class`	`string`	—	Additional classes
`[key: string]`	`unknown`	—	HTML attributes
`(slot)`	`children`	—	Stacked children.

Example with all props

<Stack gap="l" align="start" class="content-col">
  <h2 class="type-h2">Heading</h2>
  <p>Body copy…</p>
</Stack>