Usage
Stack lays out its immediate children along a single axis with consistent spacing. Control the axis with direction, the spacing with gap, and cross-axis and main-axis distribution with align-items and justify-content.
import "@nordhealth/components/lib/Stack"
Examples
Horizontal
Set direction="horizontal" to lay children out in a row.
Gap
The gap attribute accepts none, xs, s, m (default), l, xl and xxl from the spacing scale.
Alignment
Use align-items for cross-axis alignment and justify-content for main-axis distribution.
RTL
Stacks follow the document or container direction. Toggle the direction to see the layout mirror.
Accessibility
- Stack is a layout primitive and applies no implicit ARIA role, so it does not alter the semantics of the content placed inside it.
- It only spaces and aligns its immediate children; the reading and tab order follow source order, so arrange children in the order you want them announced.
- When a stack represents a meaningful grouping (such as a list or navigation), add the appropriate
roleand labelling to the stack or its children rather than relying on the visual layout alone.
API reference
Stack
Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.
<nord-stack></nord-stack>Props
| 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) |
Design guidelinesFor designers
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.