Margin

Margin is used to add space
around content.

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

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

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
Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

bottom
Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

left
Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

right
Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

vertical
Sets top and bottom margin. Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

horizontal
Sets left and right margin. Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

all
Sets top, bottom, left, and right margin. Array values are responsive and will change based on breakpoint

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

inline
Web only, makes the component use inline-block

boolean

...

JSX.IntrinsicElements["div"]


Related components


Related patterns


External links

  • xxx