LAYOUT / COMPONENTS
Stack
Arrange content with a consistent rhythm.
About stack
Use vertical stacks for reading flow and horizontal stacks for related actions. Allow wrapping at narrow widths.
01
Anatomy
Shared parts, named consistently.
- 1Items
Content or structure that supports the component’s purpose and reading order.
- 2Gap
Creates structure and rhythm without adding unnecessary focus stops.
- 3Direction
Content or structure that supports the component’s purpose and reading order.
- 4Alignment
Content or structure that supports the component’s purpose and reading order.
Try the default
A working example with the shared V1 visual language.
When to use
Use vertical stacks for reading flow and horizontal stacks for related actions. Allow wrapping at narrow widths.
DOM order remains reading and keyboard order; layout never reorders content.