Spacing
beta

Spacing should be attributed 100% below a UI element, never on top, and never split between the top and bottom.

Layout Element
20
20px
done
10
10px
Layout Element
10
10px
close

By default, components contain an extra-small bottom margin (10px). If this is not required, use the vertical-offset-clear class to remove the bottom spacing.

Extra-extra-small 5 5
vertical-offset-xxs
Extra-small 10 10
vertical-offset-xs
Small 15 15
vertical-offset-sm
Base 20 20
vertical-offset-base
Medium 25 25
vertical-offset-md
Large 30 30
vertical-offset-lg
Extra-large 40 34
vertical-offset-xl
Extra-extra-large 50 43
vertical-offset-xxl
Extra-extra-extra-large 60 51
vertical-offset-xxxl

If you would like to add spacing to an element only for a specific breakpoint, you can do so by inserting the breakpoint size before the offset size. vertical-offset-[breakpoint]-[offset]

For example, if you would like a base offset only for the lg breakpoint, you can add vertical-offset-lg-base.

Breakpoints are the exact viewport widths where the grid will reflow.

Breakpoint Class name
Extra small (viewport < 768px) vertical-offset-xs-[offset]
Small (viewport ≥ 768px) vertical-offset-sm-[offset]
Medium (viewport ≥ 992px) vertical-offset-md-[offset]
Large (viewport ≥ 1200px) vertical-offset-lg-[offset]

Click on an icon to see different breakpoints. The vertical-offset classes are listed above each example. The active class for the current breakpoint is bold.