Offset

Usage #

Specifying offset for an element has two parameters.

o-{side}-{size}

Where {side} is one of:

• left
• right
• top
• bottom

The {size} in offset is based on the Spacing scale. So using any spacing value you can set the offset for the element to one or more sides relative to the parent element.

<img class="o-top-5 o-left-3" src="...">
<img class="o-bottom-3" src="...">

Use o-off class to turn off the offset of the element.

<div class="item-with-offset o-off">...</div>

Responsive #

Use -sm suffix to change offset on small screens or to turn it off.

<div class="o-left-4 o-left-2-sm">...</div>
<div class="o-left-4 o-off-sm">...</div>
<div class="o-top-2 o-top-off-sm">...</div>