Text

When to use it

The Text utility is used to apply pre-defined text colors, alignments, and other text-related styles. It provides a way to quickly and consistently style text across your application.

TIP

Looking for background colors? See the Color utilities.

Variants

• Text Colors: Use the .u-text--[color-name] classes to apply pre-defined text colors. These color utilities invert automatically in dark mode, but some values remain the same. Make sure you test your markup in both light and dark mode.
• Text Alignment: Use the .u-text--(left|center|right) classes to align text left, center, or right.
• Text Wrapping: Use the .u-text--(wrap|nowrap) classes to control text wrapping.
• No Underline: Use the .u-text--no-underline class to remove any underline (i.e., text-decoration) from the element.

What it looks like

Black / White

<span class="u-text--black">u-text--black</span>
<span class="u-text--white">u-text--white</span>

Blue

<span class="u-text--blue-lightest">u-text--blue-lightest</span>
<span class="u-text--blue-lighter">u-text--blue-lighter</span>
<span class="u-text--blue-base">u-text--blue-base</span>
<span class="u-text--blue-darker">u-text--blue-darker</span>
<span class="u-text--blue-darkest">u-text--blue-darkest</span>

Turquoise

<span class="u-text--turquoise-lightest">u-text--turquoise-lightest</span>
<span class="u-text--turquoise-lighter">u-text--turquoise-lighter</span>
<span class="u-text--turquoise-base">u-text--turquoise-base</span>
<span class="u-text--turquoise-darker">u-text--turquoise-darker</span>
<span class="u-text--turquoise-darkest">u-text--turquoise-darkest</span>
<span class="u-text--turquoise-black">u-text--turquoise-black</span>

Yellow

<span class="u-text--yellow-lightest">u-text--yellow-lightest</span>
<span class="u-text--yellow-lighter">u-text--yellow-lighter</span>
<span class="u-text--yellow-base">u-text--yellow-base</span>
<span class="u-text--yellow-darker">u-text--yellow-darker</span>
<span class="u-text--yellow-darkest">u-text--yellow-darkest</span>

Grey

<span class="u-text--grey-white">u-text--grey-white</span>
<span class="u-text--grey-lightest">u-text--grey-lightest</span>
<span class="u-text--grey-lighter">u-text--grey-lighter</span>
<span class="u-text--grey-base">u-text--grey-base</span>
<span class="u-text--grey-dark">u-text--grey-dark</span>
<span class="u-text--grey-darker">u-text--grey-darker</span>
<span class="u-text--grey-darkest">u-text--grey-darkest</span>

Red

<span class="u-text--red-lightest">u-text--red-lightest</span>
<span class="u-text--red-lighter">u-text--red-lighter</span>
<span class="u-text--red-base">u-text--red-base</span>
<span class="u-text--red-darker">u-text--red-darker</span>
<span class="u-text--red-darkest">u-text--red-darkest</span>

Green

<span class="u-text--green-lightest">u-text--green-lightest</span>
<span class="u-text--green-lighter">u-text--green-lighter</span>
<span class="u-text--green-base">u-text--green-base</span>
<span class="u-text--green-darker">u-text--green-darker</span>
<span class="u-text--green-darkest">u-text--green-darkest</span>

Other

<p class="u-text--left">u-text--left</p>
<p class="u-text--center">u-text--center</p>
<p class="u-text--right">u-text--right</p>

<p class="u-text--wrap">u-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrapu-text--wrap</p>
<p class="u-text--nowrap">u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap u-text--nowrap</p>

<a href="#" class="u-text--no-underline">u-text--no-underline</a>