Stack
Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
gap | gap | The space injected between components. | 'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'm' |
direction | direction | The direction of the stack. | 'vertical' | 'horizontal' | 'vertical' |
alignItems | align-items | How to align the child items inside the stack. | | 'center'
| 'start'
| 'end'
| 'baseline'
| 'stretch' | undefined | 'stretch' |
wrap | wrap | Defines whether the Stack items are forced in a single line or can be flowed into multiple lines. | boolean | false |
justifyContent | justify-content | How to justify the child items inside the stack. | | 'center'
| 'start'
| 'end'
| 'space-between'
| 'space-around'
| 'space-evenly' | undefined | — |
Slots
| Slot name | Description |
|---|---|
Default slot | The stack content. |
CSS Properties
CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.
| Property | Description | Default |
|---|---|---|
--n-stack-gap | Controls the spacing between items, using our spacing tokens. | var(--n-space-m) |
Usage
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do
- Use when you need to stack multiple components vertically or horizontally.
- Use when you want to adjust the white space between two or more components.
Don’t
- Don’t use for building grid based layouts.
Integration
For integration guidelines, please see Web Components documentation .