Utility classes are namespaced with the u- prefix. They are classes that can be added to any element to style them differently.

Since you can't nest an anchor tag <a> within another <a>, add this class to a <span> within a link to make some text look link-like. Used in blockquotes.

This text is all clickable but has been styled to look normal. But this looks and acts like a link.

<a href="#" style="color:#333; text-decoration:none;">This text is all clickable but has been styled to look normal. <span class="u-link">But this looks and acts like a link.</span></a>

Paragraph-like margin

For those times when you need to use a <div> (or something else) for semantic/CMS reasons, but want it to have margin like a <p>.

This should really be a paragraph
<div class="u-paragraph">This should really be a paragraph</div>

Multi-column content

Useful for long lists, multi-column content splits the content over two, three or four columns. All multi columns will drop to at most three columns on large screens, two on medium screens and all will drop to a single column on small or tiny screens.

  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
  • Item six
  • Item seven
  • Item eight
  • Item nine
  • Item ten
  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
  • Item six
  • Item seven
  • Item eight
  • Item nine
  • Item ten
  • Item one
  • Item two
  • Item three
  • Item four
  • Item five
  • Item six
  • Item seven
  • Item eight
  • Item nine
  • Item ten
<ul class="u-two-columns">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
  <li>Item six</li>
  <li>Item seven</li>
  <li>Item eight</li>
  <li>Item nine</li>
  <li>Item ten</li>
</ul>
<ul class="u-three-columns">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
  <li>Item six</li>
  <li>Item seven</li>
  <li>Item eight</li>
  <li>Item nine</li>
  <li>Item ten</li>
</ul>
<ul class="u-four-columns">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four</li>
  <li>Item five</li>
  <li>Item six</li>
  <li>Item seven</li>
  <li>Item eight</li>
  <li>Item nine</li>
  <li>Item ten</li>
</ul>