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>You can use the u-textFamilyAlt utility to apply our display font to text.
It can be helpful for adding additional emphasis to text without affecting the semantics of a page.
Wowza
<p class="u-textSize3 u-textFamilyAlt">Wowza</p>Breakpoint-specific versions of the standard text alignment utilities are included.
<div class="u-md-textCenter u-lg-textRight">
Default alignment, then centered, then right-aligned
</div>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.
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.<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>