Skip to main content
Figuration v3 Preview Available!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Icons

A few simple icons to indicate state or function.

Contents

Caret Icon

Use carets to indicate some meaning of functionality or direction. Note that the default caret will reverse automatically in dropup menus.

If inside of an element marked as .open the caret will reverse direction accordingly to indicate state.

<span class="caret" aria-hidden="true"></span>
<span class="open">
  <span class="caret" aria-hidden="true"></span>
</span>
&mdash;
<span class="dropup">
  <span class="caret" aria-hidden="true"></span>
</span>
<span class="dropup open">
  <span class="caret" aria-hidden="true"></span>
</span>

Close Icon

Use a generic close icon for dismissing content like modals and alerts. Be sure to include text for screen readers, as we’ve done with aria-label.

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

<a href="#" role="button" class="close" aria-label="Close">
    <span aria-hidden="true">&times;</span>
</a>