Stack draft

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

<nord-stack>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
</nord-stack>

<nord-stack direction="horizontal">
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
</nord-stack>

<nord-stack gap="s" direction="horizontal">
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
  <nord-button>Button</nord-button>
</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" \| undefined`	`undefined`

Slots

Slot name	Description
Default slot	The stack content.

Usage

This section will in the future include guidelines for designers and developers about the usage of this component in different contexts.

Integration

For integration guidelines, please see Using Components. 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.