Documentation

Design System Navigation

Text

Classes for styling text.

Usage

When to Use

Class Name Description
u-text-transform--upper

Transforms the text of an element into all upper-case letters.
u-text-transform--lower

Transforms the text of an element into all lower-case letters.
u-text-strong

Applies the strong or bold tag to text inside an element.
u-text-decoration--underline

Underlines the text of an element.
o-intro

Resizes a paragraph to a format that is slightly larger to open a document.
o-dropcap

Creates a stylized dropcap character to open an article.
u-no-wrap

Forces the text to no wrap.
u-font--primary

Applies the primary font family to an element.
u-font--secondary

Applies the secondary font family to an element.
u-font--monospace

Applies the monospace font family to an element.
u-font--primary--xxl

Applies the Extra Extra Large primary type sizing and styling to an element.
u-font--primary--xl

Applies the Extra Large primary type sizing and styling to an element.
u-font--primary--l

Applies the Large primary type sizing and styling to an element.
u-font--primary--m

Applies the Medium primary type sizing and styling to an element.
u-font--primary--s

Applies the Small primary type sizing and styling to an element.
u-font--primary--xs

Applies the Extra Small primary type sizing and styling to an element.
u-font--secondary--xxl

Applies the Extra Extra Large secondary type sizing and styling to an element.
u-font--secondary--xl

Applies the Extra Large secondary type sizing and styling to an element.
u-font--secondary--l

Applies the Large secondary type sizing and styling to an element.
u-font--secondary--m

Applies the Medium secondary type sizing and styling to an element.
u-font--secondary--s

Applies the Small secondary type sizing and styling to an element.
u-font--secondary--xs

Applies the Extra Small secondary type sizing and styling to an element.
u-font--monospace--xxl

Applies the Extra Extra Large monospace type sizing and styling to an element.
u-font--monospace--xl

Applies the Extra Large monospace type sizing and styling to an element.
u-font--monospace--l

Applies the Large monospace type sizing and styling to an element.
u-font--monospace--m

Applies the Medium monospace type sizing and styling to an element.
u-font--monospace--s

Applies the Small monospace type sizing and styling to an element.
u-font--monospace--xs

Applies the Extra Small monospace type sizing and styling to an element.

Fine print

  • Last updated: