layout contract
Stack
Flexbox primitive. Lays children in a row or column with consistent gap.
Variants
- row
- Horizontal — flex-row
- column
- Vertical — flex-col
- responsive
- Stack on mobile, row on desktop
Sizes
- 0
- gap-0
- 2
- gap-2 (8pt)
- 3
- gap-3 (12pt)
- 4
- gap-4 (16pt)
- 6
- gap-6 (24pt)
- 8
- gap-8 (32pt)
Example
<Stack variant="column" size="4"><Card>...</Card><Card>...</Card></Stack>Usage rule
Use the gap token, never margins between children.
The full Stack contract has 3 more rules, plus the do-not patterns. Get the full recipe.