Spacing
Margin and padding utilities based on the vertical rhythm. All values use calc(var(--ug-leading) * N) so they adapt at the desktop breakpoint.
Scale
| Level | Multiplier | Mobile (26px) | Desktop (31px) |
|---|---|---|---|
| 0 | 0 | 0 | 0 |
| 1 | 0.25 | 6.5px | 7.75px |
| 2 | 0.5 | 13px | 15.5px |
| 3 | 1 | 26px | 31px |
| 4 | 1.5 | 39px | 46.5px |
| 5 | 2 | 52px | 62px |
| 6 | 3 | 78px | 93px |
| 7 | 4 | 104px | 124px |
| 8 | 6 | 156px | 186px |
Margin
Margin bottom
ug-mb--3 (1 leading)
ug-mb--5 (2 leading)
No margin
<div style="background:#e8e5e0">
<p class="ug-mb--3" style="background:#274a5a;color:#fff;padding:0.5rem">ug-mb--3 (1 leading)</p>
<p class="ug-mb--5" style="background:#274a5a;color:#fff;padding:0.5rem">ug-mb--5 (2 leading)</p>
<p style="background:#274a5a;color:#fff;padding:0.5rem">No margin</p>
</div>Padding
Padding
ug-p--3 (1 leading padding on all sides)
<div class="ug-p--3" style="background:#e8e5e0">
<p>ug-p--3 (1 leading padding on all sides)</p>
</div>Padding top + bottom
ug-pt--5 ug-pb--5 (2 leading top and bottom)
<div class="ug-pt--5 ug-pb--5" style="background:#e8e5e0">
<p>ug-pt--5 ug-pb--5 (2 leading top and bottom)</p>
</div>Class Reference
| Class | Description |
|---|---|
.ug-m--N (0-8) | Margin on all sides |
.ug-mt--N | Margin top |
.ug-mb--N | Margin bottom |
.ug-ml--N | Margin left |
.ug-mr--N | Margin right |
.ug-p--N (0-8) | Padding on all sides |
.ug-pt--N | Padding top |
.ug-pb--N | Padding bottom |
.ug-pl--N | Padding left |
.ug-pr--N | Padding right |