Stack
Stack is used to space items evenly in a vertical fashion.
Overview
Stack is a primitive layout component that is highly reusable. It allows the construction of layouts with equal spacing that are based on the theme space tokens.
Stack is not available in Figma, but can be achieved with the AutoLayout feature.
Usage
Variations
Responsive Stack
Stacks can be responsive by passing an array value to the spaceBetween prop. The first value will be the default, the second from the smallAndUp breakpoint, the third from the mediumAndUp breakpoint, and so on.
Properties
| Name | Values | Default |
|---|---|---|
spaceBetween (required)Array values are responsive and will change based on breakpoint | SpaceKeyArray<SpaceKey> | |
... | JSX.IntrinsicElements["div"] |