Margin is a primitive layout component that is highly reusable. It allows the spacing to layout using the theme space tokens without the need to alter the style of other components.
Live example
Availabile platforms
Platform |
Available |
---|---|
Figma |
❌ |
Web (@ovotech/element) |
✓ |
App (@ovotech/element-native) |
✓ |
How to use it
Responsive margin
Margins can be responsive by passing an array value. The first value will be the default, the second from the smallAndUp breakpoint, the third from the mediumAndUp breakpoint, and so on.
Note that the theme space values have been extended with a 0 value for this component in order for zero margin to be achievable within a responsive array of values. It's technically possible to set a single margin to zero, but on its own this would be redundant.
Properties
Name |
Values |
---|---|
top |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
bottom |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
left |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
right |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
vertical |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
horizontal |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
all |
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
inline |
boolean |
... |
JSX.IntrinsicElements["div"] |
Related components
Related patterns
External links
- xxx