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
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" | "xs" | "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"
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 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.

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

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.