Utilities

These utility classes each do a single, simple job. They can be applied to any HTML element, and are designed to be used in a wide variety of contexts, when creating a new component or variant might not be required.

Typography

<div class="u-strong">Bold text</div>

<div class="u-normal">Regular-weight (non-bold) text</div>

<div class="u-text-center">Center-aligned text</div>

<div class="u-ls">Standard letter-spacing (-0.01em)</div>

More typography utility classes are documented on the typography page.

---

Visibility & display

<div class="u-hidden">Visually hidden, but still accessible to screenreaders</div>

<div class="u-display-none">Entirely hidden</div>

<div class="u-display-block">Block-level layout</div>

<div class="u-display-inline-block">Inline-block-level layout</div>

<div class="u-revealed">The opposite of u-hidden, useful for e.g. accordions</div>

<div class="u-disabled">
    <label class="c-label" for="text_input">
        Disabled input, without using the [disabled] attribute</label>
    <input type="text" class="c-input">
</div>

---

Layout

<div class="u-float-right">Floated right</div>

<div class="u-clear-both">Cleared from floats</div>

<div class="u-relative">Relative positioning</div>

<div class="u-sticky">This will "stick" to the top of the screen while scrolling</div>

<div class="u-sticky--gutter">To create a small gap above a sticky element</div>

<div class="u-split">
    <p>Split: aligned left</p>
    <a class="u-link">Aligned right</a>
</div>
The two child items will be aligned in a horizontal row

---

Padding and margins

Syntax:

u-(pad or margin)-(size)

u-(pad or margin)-(direction, optional)-(size)-(flex size, optional)

<div class="u-pad-s">Small padding on all sides</div>

<div class="u-margin-x-xs">Extra small margin on left and right</div>

<div class="u-margin-left-m">Medium margin on left side only</div>

<div class="u-pad-y-l-xl">Flexible (large to XL) padding on top and bottom</div>
Grows from large padding on small screens, to xl padding on large screens

Sizes	Directions
3xs	top
2xs	bottom
xs	left
s	right
m	y
l	x
xl
2xl
3xl
4xl

N.B. Not all permutations are available in the existing CSS, as that would amount to over 4800 extra lines of code. Currently we've only implemented a handful - but we can add more as needed.

More padding and margin utility classes are documented on the space page.

---

Miscellaneous

<div class="u-link-inside">Links inside will have underline styling</div>

<div class="u-border">Element will have a subtle border</div>

Cutoff

u-cutoff-(optional direction; can be bottom-left, top-left, or top-right)-(size, optional)

N.B. The default diagonal size is based on var(--gutter).

<div class="u-cutoff">Cutoff effect on the bottom-right corner</div>

<div class="u-cutoff--top-left">Top left cutoff</div>

<div class="u-cutoff--xl">XL size cutoff</div>

Scroll shadows

When a tab row is too wide for the screen, this displays shadows which indicate that scrolling/swiping is available. Horizontal and vertical options are available. See example.

<nav class="c-tabs__controls u-scroll-shadows--h">