StackReady

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

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>

<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>
  <nord-stack direction="horizontal" align-items="center">
    <p class="n-color-text-weaker" style="flex: 1 0 auto">Showing 13 - 25 of 51</p>
    <nord-visually-hidden id="short-pagination-label">Short pagination</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-icon name="arrow-left-small" label="Previous"></nord-icon>
      </nord-button>
      <nord-button variant="plain">1</nord-button>
      <nord-button variant="primary" aria-current="page">2</nord-button>
      <nord-button variant="plain">3</nord-button>
      <nord-button variant="plain">4</nord-button>
      <nord-button variant="plain">5</nord-button>
      <nord-button>
        <nord-icon name="arrow-right-small" label="Next"></nord-icon>
      </nord-button>
    </nord-stack>
  </nord-stack>

  <nord-stack direction="horizontal" align-items="center" wrap>
    <p class="n-color-text-weaker">Showing 13 - 25 of 461</p>
    <nord-visually-hidden id="long-pagination-label">Long pagination</nord-visually-hidden>
    <nav aria-labelledby="long-pagination-label">
      <nord-stack direction="horizontal" align-items="center" role="list" style="--n-stack-gap: var(--n-space-xs)">
        <nord-button role="listitem">
          <nord-icon name="arrow-left-small" label="Previous"></nord-icon>
        </nord-button>
        <nord-button role="listitem" variant="plain">1</nord-button>
        <p class="n-padding-i-m n-color-text-weaker" aria-hidden="true">…</p>
        <nord-button role="listitem" variant="plain">41</nord-button>
        <nord-button role="listitem" variant="plain">42</nord-button>
        <nord-button role="listitem" variant="plain">43</nord-button>
        <nord-button role="listitem" variant="primary" aria-current="page">44</nord-button>
        <nord-button role="listitem" variant="plain">45</nord-button>
        <nord-button role="listitem" variant="plain">46</nord-button>
        <nord-button role="listitem" variant="plain">47</nord-button>
        <p class="n-padding-i-m n-color-text-weaker" aria-hidden="true">…</p>
        <nord-button role="listitem" variant="plain">99</nord-button>
        <nord-button role="listitem">
          <nord-icon name="arrow-right-small" label="Next"></nord-icon>
        </nord-button>
      </nord-stack>
    </nav>
  </nord-stack>
</nord-stack>

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

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

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

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)`

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.