Stack
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
nodeRequiredSpecifies the content of the
Stack. - direction
enum'horizontal' | 'vertical'Default'vertical'Specifies direction of the children blocks (column/row).
- gap
numberDefault0Specifies inner space between children blocks.
Valid values are based on
the spacing classes:0, 0.5, ... 6. - className
stringSpecifies an additional
classNameto add to the base element.