Waffle Design System

Stack

Stack is a layout utility component that makes it easy to stack elements together and apply a space between them. It composes the Flex component.

Import

By default, each item is stacked vertically. Stack clones it's children and passes the spacing to them using margin-bottom or margin-right.

Usage

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings on your own terms with our completely automated process
Editable Example

Stack items horizontally

Pass the isInline prop or direction and set it to horizontal.

Optionally, you can use align and justify to adjust the alignment and distribution of the items.

Plan Money

The future can be even brighter but a goal without a plan is just a wish

Save Money

You deserve good things. With a whooping 10-15% interest rate per annum, grow your savings.
Editable Example

Props

NameTypeDefaultDescription
isInlinebooleanIf true the items will be stacked horizontally.
directionFlexProps["flexDirection"]The direction to stack the items.
childrenReact.ReactNodeThe content of the stack.
spacingStyledSystem.MarginPropsThe space between each stack item
alignFlexProps["alignItems"]The alignment of the stack item. Similar to align-items
justifyFlexProps["justifyContent"]The distribution of the stack item. Similar to justify-content
shouldWrapChildrenbooleanIf true, the children will be wrapped in a Box with display: inline-block, and the Box will take the spacing props
Waffle Design SystemBlockstack PBC