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.


<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-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>
The two child items will be aligned in a horizontal row

Split: aligned left

Aligned right

Padding and margins


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

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.


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


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>
Cutoff effect on the bottom-right corner
Top left cutoff
XL size cutoff

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">