Click target

<a href="#" class="u-click-target">Anchor with increased click area</a>

Compact

The .u-compact class can be used to remove the top margin of the first direct child as well as the bottom margin of the last direct child. This is useful in cases where typography (or anything really) is used within modules that function as some kind of container (a masthead for example).

Heading

Fermentum non, ipsum. Etiam quis felis. Curabitur tincidunt, sapien et luctus faucibus, nibh nisi commodo arcu, vitae cursus neque ante sed elit. Sed sit amet erat. Phasellus luctus cursus risus. Phasellus ac felis. Proin nec eros quis ipsum pellentesque congue. Curabitur et diam sed odio accumsan cursus.

Maecenas accumsan, sem iaculis egestas gravida, odio nunc aliquet dui, eget cursus diam purus vel augue. Donec eros nisi, imperdiet quis, volutpat ac, sollicitudin sed, arcu. Aenean vel mauris. Mauris tincidunt.

<div class="u-compact">
  <h3>Heading</h3>

  <p>Fermentum non, ipsum. Etiam quis felis. Curabitur tincidunt, sapien et luctus faucibus, nibh nisi commodo arcu, vitae cursus neque ante sed elit.  Sed sit amet erat. Phasellus luctus cursus risus. Phasellus ac felis. Proin nec eros quis ipsum pellentesque congue. Curabitur et diam sed odio accumsan cursus.</p>

  <p>Maecenas accumsan, sem iaculis egestas gravida, odio nunc aliquet dui, eget cursus diam purus vel augue. Donec eros nisi, imperdiet quis, volutpat ac, sollicitudin sed, arcu. Aenean vel mauris. Mauris tincidunt.</p>
</div>

Flex box

This is a flexible paragraph.

This is a flexible paragraph.

<div class="u-display-flex u-display-flex--row">
  <p class="u-flex">This is a flexible paragraph.</p>
  <p class="u-flex">This is a flexible paragraph.</p>
</div>

Flushing

The .u-flush[--<direction>] class can be used for flushing the margins of elements.

This is a paragraph with no bottom margin.

<p class="u-flush--bottom">This is a paragraph with no bottom margin.</p>

Inline lists

  • Item 1
  • Item 2
  • Item 3
<ul class="u-inline-list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Screen reader

This will only be visible to screen readers
<div class="u-sr-only">This will only be visible to screen readers</div>

Text alignment

Erat volutpat. Praesent feugiat vehicula pede.

<p class="u-text-left">Erat volutpat. Praesent feugiat vehicula pede.</p>

Erat volutpat. Praesent feugiat vehicula pede.

<p class="u-text-center">Erat volutpat. Praesent feugiat vehicula pede.</p>

Erat volutpat. Praesent feugiat vehicula pede.

<p class="u-text-right">Erat volutpat. Praesent feugiat vehicula pede.</p>

Erat volutpat. Praesent feugiat vehicula pede. Suspendisse pulvinar, orci in sollicitudin venenatis, nibh libero hendrerit sem, eu tempor nisi felis et metus. Etiam gravida sem ut mi. Integer volutpat, enim eu varius gravida, risus urna venenatis lectus, ac ultrices quam nulla eu leo.

<p class="u-text-justify">Erat volutpat. Praesent feugiat vehicula pede. Suspendisse pulvinar, orci in sollicitudin venenatis, nibh libero hendrerit sem, eu tempor nisi felis et metus. Etiam gravida sem ut mi. Integer volutpat, enim eu varius gravida, risus urna venenatis lectus, ac ultrices quam nulla eu leo.</p>

Text transform

Lorem ipsum dolor sit amet.

<p class="u-lowercase">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

<p class="u-uppercase">Lorem ipsum dolor sit amet.</p>

Lorem ipsum dolor sit amet.

<p class="u-capitalize">Lorem ipsum dolor sit amet.</p>