Patterns: Utilities

Text styles

Admin

For links that only authorised users can see.

Edit

<p><a href="#" class="utils-admin">Edit</a></p>

Note

For notes in text.

Some normal text. [And a note about it here.]

<p>Some normal text. <span class="utils-note">[And a note about it here.]</span></p>

Nowrap

To keep text together on one line.

This should be kept together. This should be kept together. This should be kept together. This should be kept together.

<p><span class="utils-nowrap">This should be kept together.</span> <span class="utils-nowrap">This should be kept together.</span> <span class="utils-nowrap">This should be kept together.</span> <span class="utils-nowrap">This should be kept together.</span></p>

Warning

Used in forms.

This is a warning.

<p class="utils-warning">This is a warning.</p>

Alignment

This is aligned right.

<p class="utils-align-right">This is aligned right.</p>

Border

See also images.

<p>
  <img class="utils-border" src="https://c1.staticflickr.com/5/4734/38704278564_ff27d42895_m.jpg" alt="240 pixel wide image">
</p>

Inline container

Makes all immediate descendents inline, and everything inside our 'nav' text style.

<div class="utils-inline-container">
  <h2>Tags</h2>

  <ul class="list--inline list--unstyled">
    <li><a href="#">Space Marines</a></li>
    <li><a href="#">Judges</a></li>
    <li><a href="#">Orcs</a></li>
  </ul>
</div>

Screenreaders

Hide an element to all devices except screen readers with .utils-sr-only. Combine .utils-sr-only with .utils-sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user). (From Bootstrap v4.)

Skip to main content

<a class="utils-sr-only utils-sr-only-focusable" href="#content">Skip to main content</a>