Reusable classes with a single purpose and specific role.
.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.
.u-caps utility class is added automatically to a string of UPPERCASE letters.
.u-amp utility class is added automatically when an ampsersand (&) appears in a run of text.
.u-icon utility class is used to show an icon or glyph before a span of text, for example this .
.u-abreast utility class uses Quantity Queries and flexbox to resize images based on the number of siblings they sit beside:
.u-container utility class is used for macro layout control, constraining major structural components like
.u-align-right utility class is used to align an element to the right. Typically used within prose.
.u-align-left utility class is used to align an element to the left. Typically used within prose.
.u-pull-right utility class pulls an element to the right. Typically used within prose.
.u-pull-left utility class pulls an element to the left. Typically used within prose.
.u-aside utility class pull sidebar content to the left of the main content. Typically used for meta or page navigation components.
On wider breakpoints, the
.u-extend utility class extends an element to the full width of the main container. Typically used within prose.
On narrow breakpoints, the
.u-bleed utility class ensures an element bleeds to edges of the viewport. Typically used within prose.