Stack Ready Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.
Example: Basic Example: Horizontal custom gap Example: Horizontal stack Example: Using horizontal align center Example: Using horizontal align end Example: Using horizontal align start Example: Using horizontal align stretch Example: Using horizontal center justification Example: Using horizontal end justification Example: Using horizontal space around justification Example: Using horizontal space between justification Example: Using horizontal start justification Example: Using responsive media query Example: Using vertical align end Example: Using vertical custom gap Example: Vertical stack with nested forms Example: Vertical stack Theme: Light default Theme: Light high contrast Theme: Dark default Theme: Dark high contrast View RTL < nord-stack> < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" gap = " l" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " center" align-items = " center" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " center" align-items = " end" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " center" align-items = " start" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" align-items = " stretch" justify-content = " center" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " center" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " end" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " space-around" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " space-between" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" justify-content = " start" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack direction = " horizontal" class = " stack" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; box-sizing : border-box; width : 100%; } @media ( max-width : 768px) { .stack { flex-direction : column; } } </ style>
< nord-stack align-items = " end" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack gap = " l" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
< nord-stack gap = " xl" > < nord-button> Button</ nord-button> < nord-fieldset label = " Fieldset label" > < nord-stack> < nord-checkbox name = " option" value = " 1" label = " Option 1" > </ nord-checkbox> < nord-checkbox name = " option" value = " 2" label = " Option 2" > </ nord-checkbox> </ nord-stack> </ nord-fieldset> </ nord-stack>
< nord-stack direction = " vertical" > < div> Stack item < br /> with multiple < br /> rows of text</ div> < div> Stack item</ div> < div> Stack item</ div> < div> Stack item</ div> </ nord-stack> < style> nord-stack div { background : var ( --n-color-status-info-weak) ; padding : var ( --n-space-l) ; } </ style>
Properties Property Attribute Description Type Default gap
gap
The space injected between components.
"none" | "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" | "stretch" | undefined
"stretch"
responsive
responsive
This property is deprecated and will be removed in a future version. We recommend using standard CSS media queries over this property. Please see the updated usage example .
boolean
false
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" | "baseline" | "space-between" | "space-around" | "space-evenly" | undefined
undefined
Slots Slot name Description Default slot The stack content.
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 . This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Integration Guidelines
Localization Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation .
Localization Guidelines
Troubleshooting If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.