Divider

Separates sections of content.

  • Added In: 1.4.0
Top

Usage

A divider can be used to separate sections of content, and can also be used for clearing floats.

<div class="divider"></div>
The divider requires no whitespace for proper border collapsing, unless content is inserted (below).

Strings of text can be inserted within the divider, which will be horizontally centered.

<div class="divider">OR</div>

If the text is really long, or spans multiple lines, wrap the text in a span.

<div class="divider"><span>Chapter 4<br>Page 45</span></div>

Icons can also be inserted within the divider.

<div class="divider"><span class="icon-16-star"></span></div>

Styling

Dividers make use of ::before and ::after pseudo elements for their border effect. When the divider has content, the pseudos are shifted to the side to create a gap for the content. The pseudos should be modified when styling the divider.

.divider::before,
.divider::after {
    border: 1px solid black;
}
Top

ARIA

The separator role is required when supporting ARIA.

<div class="divider" role="separator"></div>
Top

Variables

Variable Default Description
$divider-class .divider CSS class name for the divider element.