Utilities
Reusable classes with a single purpose and specific role.
Content
Visually hidden
The .u-hidden 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.
Layout
Abreast
The .u-abreast utility class uses Quantity Queries and flexbox to resize images based on the number of siblings they sit beside:
Two images placed side-by-side, with supporting caption
Three images placed side-by-side, with supporting caption
Four images placed side-by-side, with supporting caption
Five images placed side-by-side, with supporting caption
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.