Components

Fonts

These classes affect how text appears on a page.

Text size

Use class .Text--base to force body copy size or .Text--small, .Text--xsmall, .Text--medium, .Text--large, .Text--xlarge,.Text--xxlarge to modify the text size.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<small class="Text--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>
<p class="Text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 class="Text--base">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
<p class="Text--medium">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="Text--large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="Text--xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="Text--xxlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Text variants

Use class .Text--bold to bold the content. Use only on the following tags: <p>, <li>, <span>, <dt> or <dd>. Use class .Text--light to to change from bold to light content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


<p class="Text--bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2>Lorem ipsum dolor sit amet, <span class="Text--light">consectetur adipiscing elit</span>.</h2>