Layout
Stack
Vertical flex container. space is required and accepts any gap token or responsive object.
Basic usage
Space tokens
Responsive space
space accepts a responsive object. Resize the window to see the gap change.
Alignment
Responsive alignment
align accepts a responsive object. This example is left-aligned on mobile, centered on tablet+.
Semantic element
Use as="ul" to produce a proper list in the DOM while keeping Stack's spacing.
- List item one
- List item two
- List item three
Inline
Horizontal flex container that wraps. space is required. Children get minWidth: 0 to prevent overflow.
Basic usage
Space tokens
Alignment
Vertical alignment
Wrapping
Items wrap naturally when they exceed the container width.
Collapse below breakpoint
Stacks vertically below the given breakpoint, inline above it. Resize the window to see the change.
Semantic element
Use as="ul" for tag lists or navigation.
- Tag one
- Tag two
- Tag three
Spread
Distributes children with justify-content: space-between. Use for headers (logo | nav), card footers (label | action), or any two-ended layout.