Text

The foundation of our CSS text utilities are sourced from SUIT CSS, including:

  • u-textBreak - Break strings when their length exceeds the width of their container.
  • u-textCenter - Center-align text.
  • u-textLeft - Left-align text.
  • u-textRight - Right-align text.
  • u-textInheritColor - Inherit the ancestor's text color.
  • u-textKern - Enable kerning in supporting browsers.
  • u-textNoWrap - Prevent wrapping at whitespace.
  • u-textTruncate - Truncate a single line of text, with ellipsis.

We've extended these basic patterns and documented our changes below.

The default color of an element may be overridden using a utility class of u-textX, where X is replaced with a color from our palette.

This can be also be useful for styling icons or other elements that inherit parent colors.

Success

Failure

<p class="u-textGreen">
  Success
</p>

<p class="u-textRed">
  Failure
</p>

Breakpoint-specific versions of the standard text alignment utilities are included.

Default alignment, then centered, then right-aligned
<div class="u-md-textCenter u-lg-textRight">
  Default alignment, then centered, then right-aligned
</div>

Size: Exact

  • responsive

To set the element's font size to that of a specific step of our modular scale, include a class formatted as follows:

u-textSizeX

Where X is replaced with the desired modular scale step. For negative steps, use a leading zero (01 instead of -1). Omit X to use the base (0) step.

Steps -1 through 6 are supported for this utility. Smaller step values are not supported because they are not readable.

This utility also supports responsive variations, for example u-md-textSizeX to apply X text size at the medium breakpoint.

u-textSize01

u-textSize

u-textSize1

u-textSize2

u-textSize3

u-textSize4

u-textSize5

u-textSize6

You can set an element's size relative to its parent using the u-textGrowX and u-textShrinkX utilities, with X corresponding to how many scale steps to apply.

Steps -6 through 6 are supported for this utility.

Default Heading (2 steps smaller)

Can you even believe how useful this is?

<h2>
  Default Heading
  <span class="u-textShrink2">
    (2 steps smaller)
  </span>
</h2>

<p>
  Can you even
  <em class="u-textGrow3">
    believe
  </em>
  how useful this is?
</p>

These modifiers exist to change the style of displayed text:

  • u-textUpper - All caps.

Uppercase Text!

<h2 class="u-textUpper">
  Uppercase Text!
</h2>

These modifiers exist to change the weight of displayed text:

  • u-textWeightNormal - Normal weight (400).
  • u-textWeightBold - Bold weight (700).
  • u-textWeightBlack - Black weight (800).

Normal Weight Text

Bold Weight Text

Black Weight Text

<p class="u-textWeightNormal">
  Normal Weight Text
</p>

<p class="u-textWeightBold">
  Bold Weight Text
</p>

<p class="u-textWeightBlack">
  Black Weight Text
</p>