We’re hiring for design systems team! View open positions.

Stack draft

Stack component injects space between other components in the system. Use stack to create vertical or horizontal stack layouts.

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

Slots

Slot name	Description
Default slot	The stack content.