Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Stack draft

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


gapgapThe space injected between components."none" | "s" | "m" | "l" | "xl" | "xxl""m"
directiondirectionThe direction of the stack."vertical" | "horizontal""vertical"
alignItemsalign-itemsHow to align the child items inside the stack."center" | "start" | "end" | undefinedundefined


Slot nameDescription
Default slotThe stack content.


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


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


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.