Offset
This helper helps to specify the offset of the element to the left, right, down or up.
Usage #
Specifying offset for an element has two parameters.
offset-{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="offset-top-5 offset-left-3" src="...">
<img class="offset-bottom-3" src="...">
Use offset-off
class to turn off the offset of the element.
<div class="item-with-offset offset-off">...</div>
Responsive #
Use -sm
suffix to change offset on small screens or to turn it off.
<div class="offset-left-4 offset-left-2-sm">...</div>
<div class="offset-left-4 offset-off-sm">...</div>
<div class="offset-top-2 offset-top-off-sm">...</div>