Balance Logo
Balance
Reckon Design System

Stack

The stack primitive is used to distribute items along the horizontal or vertical axis, with even spacing between the items.
Install
pnpm add @reckon-web/stack
Import usage
import {
Stack
} from '@reckon-web/stack';
  • Code
  • API

Flow elements require space (sometimes referred to as "white space") to physically and conceptually separate them from the elements that come before and after them.

Usage

Gap

The gap property defines how much space there should be between each element in the stack. Available gap sizes are:

  • none (default)
  • xsmall
  • small
  • medium
  • large
  • xlarge
  • xxlarge
Open in Playroom

Align

Align items along the cross-axis of the flex container, stretch is the default option.

Options
Note that stretch will not apply to elements that have a fixed width

Orientation

Stacks can also be distributed along the horizontal axis.

Note: items within a horizontally oriented Stack will not wrap. If you need items to wrap, consider using the Cluster layout primitive.

Dividers

Use the dividers property to separate each element in the stack with a divider, none is the default option.

Options
First item
Second item
Third item

Nesting

You can nest stacks however you like to achieve the desired layout.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.