Stack

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

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.


Live example

Storybook failed to load. Please connect to the VPN to access.

 


Availabile platforms

Platform

Available

Figma

Web (@ovotech/element)

App (@ovotech/element-native)

In Figma this functionality is available through Autolayout.


How to use it

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

name

Values

Default

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

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

 

...

JSX.IntrinsicElements["div"]

 


Related components


Related patterns


External links

  • xxx