Utilities

Reusable classes with a single purpose and specific role.

Content

Visually hidden

The .u-audible utility class allows elements to be visually hidden, whilst ensuring they can still be accessed and real aloud by accessible software and other devices that place less emphasis on visual presentation.

Small caps

The .u-caps utility class is added automatically to a string of UPPERCASE letters.

Ampersands

The .u-amp utility class is added automatically when an ampsersand (&) appears in a run of text.

Icons

The .u-icon utility class is used to show an icon or glyph before a span of text, for example this .

Layout

Abreast

The .u-abreast utility class uses Quantity Queries and flexbox to resize images based on the number of siblings they sit beside:

Image 1 Image 2
Two images placed side-by-side, with supporting caption
Image 1 Image 2 Image 3
Three images placed side-by-side, with supporting caption
Image 1 Image 2 Image 3 Image 4
Four images placed side-by-side, with supporting caption
Image 1 Image 2 Image 3 Image 4 Image 5
Five images placed side-by-side, with supporting caption

Container

The .u-container utility class is used for macro layout control, constraining major structural components like .c-banner and .c-contentinfo.

Align right

.u-align-right The .u-align-right utility class is used to align an element to the right. Typically used within prose.

Align left

.u-align-left The .u-align-left utility class is used to align an element to the left. Typically used within prose.

Pull right

.u-pull-right The .u-pull-right utility class pulls an element to the right. Typically used within prose.

Pull left

.u-pull-left The .u-pull-left utility class pulls an element to the left. Typically used within prose.

Aside

.u-aside The .u-aside utility class pull sidebar content to the left of the main content. Typically used for meta or page navigation components.

Extend

.u-extend

On wider breakpoints, the .u-extend utility class extends an element to the full width of the main container. Typically used within prose.

Bleed

.u-bleed

On narrow breakpoints, the .u-bleed utility class ensures an element bleeds to edges of the viewport. Typically used within prose.