Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

StackReady

Stack component manages layout of immediate children along the vertical or horizontal axis with optional spacing between each child.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
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>

Properties

PropertyAttributeDescriptionTypeDefault
gapgap

The space injected between components.

"none" | "s" | "m" | "l" | "xl" | "xxl""m"
directiondirection

The direction of the stack.

"vertical" | "horizontal""vertical"
alignItemsalign-items

How to align the child items inside the stack.

"center" | "start" | "end" | "stretch" | undefined"stretch"
responsiveresponsive

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.

booleanfalse
wrapwrap

Defines whether the Stack items are forced in a single line or can be flowed into multiple lines.

booleanfalse
justifyContentjustify-content

How to justify the child items inside the stack.

| "center" | "start" | "end" | "baseline" | "space-between" | "space-around" | "space-evenly" | undefinedundefined

Slots

Slot nameDescription
Default slotThe 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.

PropertyDescriptionDefault
--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. 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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.