UI Toolkit

Miscellaneous Components

Pagination Requires MAX Custom Bootstrap Stylesheet

Simple pagination, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

<nav class="pagination-wrapper">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span class="fa fa-fw fa-chevron-left" aria-hidden="true"></span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span class="fa fa-fw fa-chevron-right" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</nav>
Back to Top

Labels Requires MAX Custom Bootstrap Stylesheet

Labels are used to provide additional information.

More Information in the WCAG 2.0 Guidelines

G131: Providing descriptive labels

Example Heading New!

Example Heading New!
Example Heading New!

Default Primary Success Warning Danger 

<h4>Example Heading <span class="label label-default">New!</span></h4>
<h5>Example Heading <span class="label label-default">New!</span></h5>
<h6>Example Heading <span class="label label-default">New!</span></h6>

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Back to Top

Badges Requires MAX Custom Bootstrap Stylesheet

Easily highlight new or unread items by adding a <span class="badge"> to links, Bootstrap navs, and more.

When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.

Inbox 42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>
Back to Top

Alerts Requires MAX Custom Bootstrap Stylesheet

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Wrap any text and an optional dismiss button in .alert and one of the four contextual classes (e.g., .alert-success) for basic alert messages.

More Information in the WCAG 2.0 Guidelines

SCR18: Providing client-side validation and alert

<div class="alert alert-success" role="alert">
  <strong>Well done!</strong> You successfully read this important alert message.
</div>

<div class="alert alert-info" role="alert">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>

<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
Back to Top

Wells Requires MAX Custom Bootstrap Stylesheet

Use the well as a simple effect on an element or group of elements to give an inset effect.

Look, I'm in a well! 
<div class="well">
  Look, I'm in a well!
</div>
Back to Top

Tooltips Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Tooltips are excellent for displaying a small amount of additional information. They don't rely on images, use CSS3 for animations, and use data-attributes for local title storage. Hover or focus on the following buttons to view the examples.

Accessible tooltips

For users navigating with a keyboard, and in particular users of assistive technologies, you should only add tooltips to keyboard-focusable elements such as links or form controls. To make an arbitrary element keyboard-focusable, add a tabindex="0" attribute.

<button type=button class="btn btn-default" data-toggle="tooltip" data-placement="left" tabindex="0" title="Tooltip on left">Tooltip on left</button>

<button type=button class="btn btn-default" data-toggle="tooltip" data-placement="top" tabindex="0" title="Tooltip on top">Tooltip on top</button>

<button type=button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" tabindex="0" title="Tooltip on bottom">Tooltip on bottom</button>

<button type=button class="btn btn-default" data-toggle="tooltip" data-placement="right" tabindex="0" title="Tooltip on right">Tooltip on right</button>
Back to Top