NordSecurity.Design

Stack

Overview

A wrapper component for adding consistent spacing between immediate components, no matter if vertical or horizontal spacing is needed.

When to use

  • To evenly space immediate components

When not to use

  • If you need to build a more complex layout use Grid
  • If you need widely varying margins between components

Anatomy

  1. Stack
  2. Stack Item

Variants & States

Variant

The Stack component has two distinct variants:

  • direction = horizontal; will stack your elements inside in a horizontal row
  • direction = vertical; will stack elements in a vertical column

Internationalization

For RTL (right-to-left) languages, there are no special adjustments made.

Properties

Name Type Values Description
gap String none
xs
sm
md
lg
xl
2xl		 Controls the gap between items
align String left
center
right		 Controls how the items are aligned
justify String start
end
center
between
around
evenly		 Controls how to justify the items inside the stack
direction String vertical
horizontal		 Controls the direction of the Stack

Usage Guidelines

DoUse when you need to stack multiple components vertically or horizontally with even spacing
DoUse when you need to adjust white space between multiple components
Don’tDon't use for layouts that are complex and are easier to build with our Grid component
Don’tTo evenly space immediate components
Don’tIf you need to build a more complex layout use Grid
Don’tIf you need widely varying margins between components
Don’tdirection = horizontal; will stack your elements inside in a horizontal row
Don’tdirection = vertical; will stack elements in a vertical column

Content Guidelines

This component has no user-facing copy.