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
<nord-stack>
<nord-button>Button</nord-button>
<nord-button>Button</nord-button>
<nord-button>Button</nord-button>
<nord-button>Button</nord-button>
</nord-stack>

Properties

PropertyAttributeDescriptionTypeDefault
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

Slots

Slot nameDescription
Default slotThe 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.