Text Styling
A set of presentational classes for expressing text styling.
.text-xxs
.text-xs
.text-sm
.text-md
.text-lg
.text-xl
.text-xxl
.text-xxxl
.text-bold
.text-normal
.text-upper
.text-underline
.text-noUnderline
.letterSpacing-loose
.letterSpacing-looser
.lineHeight-normal
Size
Body copy (i.e. text that is not a heading) will typically use one of three sizing classes: text-xxs
, text-xs
, text-sm
.text-md
is commonly reserved for prominent links. Larger classes are used by the Heading component, but are still available to avoid semantic mismatches.
The body tag itself uses the equivalent of text-xs
, so that size will be inherited by default.
Weight
Bold text can be displayed with the class text-bold
.
Casing
Uppercase text can be displayed via the class text-upper
. This class applies a bit of letter-spacing as well.
Underlines
Underlines can be added with text-underline
. To remove underlines (as from links that inherit from global styling), use text-noUnderline
.
Letter spacing
Letter spacing can be increased with letterSpacing-loose
, orletterSpacing-looser
.