Spacing
Design Links
Units
All spacings increments are based on a 4px base unit, going from 4px to 64px. Together with our 16px base font size we can assure a harmonic relationship between elements. When defining additional larger spacings on your own for more specific cases, make sure they follow the same logic.
4
8
12
16
24
32
64
CSS Variables
var(--ds-spacing-1)var(--ds-spacing-2)var(--ds-spacing-3)var(--ds-spacing-4)var(--ds-spacing-6)var(--ds-spacing-8)var(--ds-spacing-16)
Paddings
Various helper classes can be used to apply padding to your UI. Most components use a vertical padding of 8, 12, 16 or 24px. For the height of elements, such as buttons or forms, working with a fix height ensures different UI elements line up correctly when used together.
CSS classes
The following CSS classes can be applied with any of the spacing sizes: 1, 2, 3, 4, 6, 8, 16
.ds-pad-left--<size>.ds-pad-right--<size>.ds-pad-top--<size>.ds-pad-bottom--<size>.ds-pad-ver--<size> /* add padding left and right */.ds-pad-hor--<size> /* add padding top and bottom */.ds-pad-all--<size>
Margins
CSS classes
The following CSS classes can be applied with any of the spacing sizes: 1, 2, 3, 4, 6, 8, 16
.ds-mar-left--<size>.ds-mar-right--<size>.ds-mar-top--<size>.ds-mar-bottom--<size>.ds-mar-ver--<size> /* add padding left and right */.ds-mar-hor--<size> /* add padding top and bottom */.ds-mar-all--<size>