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.

  There is also a .u-text--muted for a slightly "dimmed" text color. Note: This modifier does not work together with other text colors, it will be overridden by them.

• 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

Muted, Black, White

<span class="u-text--muted">u-text--muted</span>
<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>

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>