Stack
Stack is a layout component that creates responsive horizontal and vertical flows.
React
readyNot reviewed for a11y
Rails
readyNot reviewed for a11y
React examples
Default
A simple container with gaps between items.
Direction
Display items inline by setting direction to 'horizontal'.
Gap size
Reduce the gap size with 'condensed', or remove them completely with 'none'.
Align items
To vertically center items, set align to 'center'.
Justify items
This example uses the 'space-between' justify variant.
Wrap items
By default, Stack items are set to no-wrap. To allow items to wrap to the next line, set wrap to 'wrap'.
Add padding to the Stack container
Add padding around items by setting the padding variant.
Shrink and grow items
More examples
See the Stack component's "Playground" stories to demo the responsive behavior of the Stack component.
Props
Stack
| Name | Required | Description |
|---|---|---|
gap | 'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>Specify the gap between children elements in the stack. | |
direction | 'horizontal' | 'vertical' | ResponsiveValue<'horizontal' | 'vertical'>Specify the orientation for the stack container. | |
align | 'stretch' | 'start' | 'center' | 'end' | 'baseline' | ResponsiveValue<'stretch' | 'start' | 'center' | 'end' | 'baseline'>Specify the alignment between items in the cross-axis of the orientation. | |
wrap | 'wrap' | 'nowrap' | ResponsiveValue<'wrap' | 'nowrap'>Specify whether items are forced onto one line or can wrap onto multiple lines. | |
justify | 'start' | 'center' | 'end' | 'space-between' | 'space-evenly' | ResponsiveValue<'start' | 'center' | 'end' | 'space-between' | 'space-evenly'>Specify how items will be distributed in the stacking direction. | |
padding | 'none' | 'condensed' | 'normal' | 'spacious' | ResponsiveValue<'none' | 'condensed' | 'normal' | 'spacious'>Specify the padding of the stack container. | |
className | string |
Stack.Item
| Name | Required | Description |
|---|---|---|
grow | boolean | ResponsiveValue<boolean>Allow item to keep size or expand to fill the available space. | |
className | string |