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
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) |
1 2 3 4 5 6 7 8 9 10 11 12 |
|
... |
JSX.IntrinsicElements["div"] |
|
Related components
Related patterns
External links
- xxx