Usage

This component is used in code only. See the Spacing documentation for more information.

Stack is a 1-dimensional layout system with options to control the direction, spacing, distribution, and relative sizing of its children elements. StackItem is the child element of the component.

Use Stack to layout inline components. If the component you are viewing has all of its child items displayed inline, then most probably Stack is the best solution here.

Examples

Live Preview

Props

Stack

Name	Description	Type	Default	Values
gap	The values in the gap are mapped to our semantic spacing tokens, which are small (for S), medium (for M), large (for L), and xlarge (for XL).	string	`none`	`none, small, medium, large, xlarge`
wrap	It defines whether the flex items are forced in a single line or can be flowed into multiple lines. If set to multiple lines, it also defines the cross-axis which determines the direction new lines are stacked in. Values are false (default) and true for multiline items.	boolean	`false`	`false, true`
direction	Direction of the stack items.	string	`row`	`row, column, row-reverse, column-reverse`
align-items	Sets the vertical alignment and distribution of the stack items.	string	`flex-start`	`flex-start, flex-end, center, baseline, stretch`
justify-content	Sets the horizontal alignment and distribution of the stack items.	string	`flex-start`	`flex-start, flex-end, center, space-between`
full-width	Expands the stack to occupy all available widths.	boolean	`false`	`false, true`
full-height	Expands the stack to occupy all available height.	boolean	`false`	`false, true`

StackItem

Name	Description	Type	Default	Values
flex	The flex property sets how a flex item will grow or shrink to fit the space available in its flex container.	string	`'0 1 auto'`	`any valid CSS flex value`

Slots

Stack

Name	Description
default	Default content slot

StackItem

Name	Description
default	Default content slot