1. Docs
  2. Utilities
  3. Typography
Buy Now Contact

Typography Utilities

Change styles of typography-related content.

This is a heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit numquam doloremque, excepturi neque. Laudantium provident eius nesciunt consequatur porro cum veritatis dolore fuga fugit, expedita animi tempore non, voluptates eum.

<h1 class="u-h4">This is a heading</h1>
<p class="u-text-large">Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Sit numquam doloremque, excepturi neque. Laudantium provident eius
nesciunt consequatur porro cum veritatis dolore fuga fugit, expedita animi
tempore non, voluptates eum.</p>

Headings

Allow for double stranded heading hierarchy e.g. semantically need an h3, but we want it to be sized like an h1:

This is a heading
This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

<h6 class="u-h1">This is a heading</h6>
<h5 class="u-h2">This is a heading</h5>
<h4 class="u-h3">This is a heading</h4>
<h3 class="u-h4">This is a heading</h3>
<h2 class="u-h5">This is a heading</h2>
<h1 class="u-h6">This is a heading</h1>

Text Sizes

Change font size of paragraphs.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut dicta optio eligendi odit ipsam sequi vitae ducimus cumque explicabo soluta adipisci, aperiam, quam, maiores doloremque ipsa voluptatibus molestiae quae sapiente.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repellendus laboriosam illo quaerat iure. Explicabo dignissimos aut tempora quia non, eos. Cumque enim dolorem, expedita voluptatibus modi, facere iste minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora velit fugiat, aliquid odio tenetur quo laboriosam. Nesciunt facere officiis quaerat ullam, ducimus, a accusamus inventore illum exercitationem dolorem ipsa omnis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi esse quibusdam doloremque cumque ipsum beatae optio, nam, magnam debitis ab fugit vel laudantium iusto asperiores nulla libero, autem provident odit?

<p class="u-text-tiny">...</p>
<p class="u-text-xsmall">...</p>
<p class="u-text-small">...</p>
<p class="u-text-large">...</p>

Text Align

Align text to there different directions

Aligned to the left

Aligned to the center

Aligned to the right

<p class="u-text-left">...</p>
<p class="u-text-center">...</p>
<p class="u-text-right">...</p>

Text Transform

Transform text into uppercase, lowercase or captialize.

This is Uppercase Text

This is lowercase text

This is captialized text

<p class="u-text-uppercase">...</p>
<p class="u-text-lowercase">...</p>
<p class="u-text-capitalize">...</p>

General

General text utilities

Lorem ipsum dolor sit amet, This is a bold text. Eaque tempore animi distinctio culpa atque natus cupiditate, sequi deleniti This is muted text, similique, officia laudantium vitae inventore iusto veritatis maxime voluptas earum.

<p>
...
<span class="u-text-bold">This is a bold text</span>
...
<span class="u-text-mute">This is muted text</span>
...
</p>