Offset

Notation #

o-{side}-{size}

Where {side} is one of:

• left
• right
• top
• bottom

The {size} in offset is based on the $spacing-scale map specified in vars/scales. See more about how spacing scales are formed. By default, it looks like this:

$spacing-scale: (
    1: 1, // {size name}: {size in rem}
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    6: 6,
    7: 7,
    8: 8,
    9: 9,
    10: 10,
    12: 12,
    14: 14,
    16: 16,
    20: 20,
    25: 25,
    30: 30
);

Here are some examples of how to specify offset classes:

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

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

<div class="card o-off">..</div>

Behavior on small screens #

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>