Utilities
🔗
For quick, easy and consistent typographic manipulation, make use of Toolkit's typography utilities:
Alignment
I'm a left-aligned sentence.
I'm a center-aligned sentence.
I'm a right-aligned sentence.
I'm a justified sentence.
<p class="u-text-left">I'm a left-aligned sentence.</p>
<p class="u-text-center">I'm a center-aligned sentence.</p>
<p class="u-text-right">I'm a right-aligned sentence.</p>
<p class="u-text-justify">I'm a justified sentence.</p>
Style
Sometimes we want text to be bold or italic purely for cosmetic reasons. To avoid this being miscommunicated to visually impaired users via screen readers or ATs, we provide the following classes:
I'm a visually bold sentence.
I'm a visually italic sentence.
<p class="u-text-bold">I'm a visually bold sentence.</p>
<p class="u-text-italic">I'm a visually italic sentence.</p>
Line Length
I'm a constrained paragraph. This utility will constrain text to a maximum of 75 characters per line, regardless of the text's font-size.
<p class="u-text-constrain">
I'm a constrained paragraph. This utility will constrain text to a maximum
of 75 characters per line, regardless of the text's font-size.
</p>