Skip to content

Stack

Stack is used to space items evenly in a vertical fashion.

Overview

Stack is a primitive layout component that is highly reusable. It allows the construction of layouts with equal spacing that are based on the theme space tokens.

Stack is not available in Figma, but can be achieved with the AutoLayout feature.

Usage

Variations

Responsive Stack

Stacks can be responsive by passing an array value to the spaceBetween prop. The first value will be the default, the second from the smallAndUp breakpoint, the third from the mediumAndUp breakpoint, and so on.

Properties

NameValuesDefault

spaceBetween (required)Array values are responsive and will change based on breakpoint

123456789101112Array<1,2,3,4,5,6,7,8,9,10,11,12>

...

JSX.IntrinsicElements["div"]