Divider

A small separator which represents a presentational break between element groups—e.g. separate a log in link from a group of navigation links.

Default divider

Define a Divider using an empty div. Don't use a hr because it's inappropriate for many use cases.

<div class="Divider"></div>

Sizes

There are 3 sizes available plus an expanded variation, which spans the full width of its container. The default size is size2.

<div class="Divider size1"></div>
<div class="Divider size2"></div>
<div class="Divider size3"></div>
<div class="Divider expanded"></div>

Colors

Colors are handled with background-color utility classes. Check out the color docs for more detailed guidelines on color usage.

<div class="Divider bc-red"></div>
<div class="Divider bc-pink"></div>
<div class="Divider bc-purple"></div>
<div class="Divider bc-violet"></div>
<div class="Divider bc-indigo"></div>
<div class="Divider bc-blue"></div>
<div class="Divider bc-teal"></div>
<div class="Divider bc-green"></div>
<div class="Divider bc-lime"></div>
<div class="Divider bc-yellow"></div>
<div class="Divider bc-amber"></div>
<div class="Divider bc-orange"></div>

Vertical divider

Each of the sizes is also available in a vertical orientation by adding the vertical modifier class.

<div class="Divider size1 vertical"></div>
<div class="Divider size2 vertical"></div>
<div class="Divider size3 vertical"></div>