StackReady 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: Pagination 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 Example: Vertical stack with nested forms Theme: Light default Theme: Light high contrast Theme: Dark default Theme: Dark high contrast View RTL < nord-stack> < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" gap = " l" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stack> < nord-stackdirection = " horizontal" align-items = " center" >
< pclass = " n-color-text-weaker" style = " flex : 1 0 auto" > </ p>
< nord-visually-hiddenid = " short-pagination-label" > </ nord-visually-hidden>
< nord-stack direction = " horizontal"
role = " navigation"
aria-labelledby = " short-pagination-label"
style = " --n-stack-gap : var ( --n-space-xs) "
> < nord-button>
< nord-iconname = " arrow-left-small" label = " Previous" > </ nord-icon>
</ nord-button>
< nord-buttonvariant = " plain" > </ nord-button>
< nord-buttonvariant = " primary" aria-current = " page" > </ nord-button>
< nord-buttonvariant = " plain" > </ nord-button>
< nord-buttonvariant = " plain" > </ nord-button>
< nord-buttonvariant = " plain" > </ nord-button>
< nord-button>
< nord-iconname = " arrow-right-small" label = " Next" > </ nord-icon>
</ nord-button>
</ nord-stack>
</ nord-stack>
< nord-stackdirection = " horizontal" align-items = " center" wrap >
< pclass = " n-color-text-weaker" > </ p>
< nord-visually-hiddenid = " long-pagination-label" > </ nord-visually-hidden>
< navaria-labelledby = " long-pagination-label" >
< nord-stackdirection = " horizontal" align-items = " center" role = " list" style = " --n-stack-gap : var ( --n-space-xs) " >
< nord-buttonrole = " listitem" >
< nord-iconname = " arrow-left-small" label = " Previous" > </ nord-icon>
</ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< pclass = " n-padding-i-m n-color-text-weaker" aria-hidden = " true" > </ p>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" variant = " primary" aria-current = " page" > </ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< pclass = " n-padding-i-m n-color-text-weaker" aria-hidden = " true" > </ p>
< nord-buttonrole = " listitem" variant = " plain" > </ nord-button>
< nord-buttonrole = " listitem" >
< nord-iconname = " arrow-right-small" label = " Next" > </ nord-icon>
</ nord-button>
</ nord-stack>
</ nav>
</ nord-stack>
</ nord-stack> < nord-stackdirection = " horizontal" justify-content = " center" align-items = " center" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " center" align-items = " end" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " center" align-items = " start" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" align-items = " stretch" justify-content = " center" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " center" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " end" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " space-around" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " space-between" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" justify-content = " start" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " horizontal" class = " stack" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ 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-stackalign-items = " end" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackgap = " l" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackdirection = " vertical" > < div> < br/> < br/> </ div>
< div> </ div>
< div> </ div>
< div> </ div>
</ nord-stack> < style>
nord-stack div {
background : var ( --n-color-status-info-weak) ;
padding : var ( --n-space-l) ;
}
</ style> < nord-stackgap = " xl" > < nord-button> </ nord-button>
< nord-fieldsetlabel = " Fieldset label" >
< nord-stack>
< nord-checkboxname = " option" value = " 1" label = " Option 1" > </ nord-checkbox>
< nord-checkboxname = " option" value = " 2" label = " Option 2" > </ nord-checkbox>
</ nord-stack>
</ nord-fieldset>
</ nord-stack> Properties Property Attribute Description Type Default gapgapThe space injected between components.
"none" | "xs" | "s" | "m" | "l" | "xl" | "xxl""m"directiondirectionThe direction of the stack.
"vertical" | "horizontal""vertical"alignItemsalign-itemsHow to align the child items inside the stack.
"center" | "start" | "end" | "stretch" | undefined"stretch"wrapwrapDefines whether the Stack items are forced in a single line or can be flowed into multiple lines.
booleanfalsejustifyContentjustify-contentHow to justify the child items inside the stack.
| "center" | "start" | "end" | "baseline" | "space-between" | "space-around" | "space-evenly" | undefinedundefined
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-gapControls 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 . This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Integration 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.