Shorthand helpers that build on top of our flexbox utilities to make component layout faster and easier than ever. Similar to the Boostrap Stack component.

Basic Usage

Vertical direction

Stacks are vertical by default and stacked items are full-width by default. Watch this pull request to see more details about the auto stretching behavior.

Horizontal direction

Theme Variables (SCSS)#

$stack-gap: 0 !default;
Stack Props API
  • children node Required

    Specifies the content of the Stack.

  • direction enum'horizontal' | 'vertical'

    Specifies direction of the children blocks (column/row).

  • gap number

    Specifies inner space between children blocks.

    Valid values are based on the spacing classes: 0, 0.5, ... 6.

  • className string

    Specifies an additional className to add to the base element.