Dividers

Use dividers to split content up. You may style <hr> tags directly or apply a .divider class to a <div> element.

Modifier Classes	Modifies	Description
`.divider--label`	`.divider`	Add a centered label to your divider
`.divider--label--left`	`.divider`	Add a left-aligned label to your divider
`.divider--label--right`	`.divider`	Add a right-aligned label to your divider
`.divider--info`	`.divider`	Add blue informational treatment to divider, derived from color mappings in `_colors.scss`
`.divider--success`	`.divider`	Add green positive treatment to divider, derived from color mappings in `_colors.scss`
`.divider--warning`	`.divider`	Add orange warning treatment to divider, derived from color mappings in `_colors.scss`
`.divider--error`	`.divider`	Add red alert treatment to divider, derived from color mappings in `_colors.scss`

Modifier Classes
Basic Divider
Labeled Divider
Stateful Divider
View divider.scss

Basic Divider

HTMLCopy HTML

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

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

Labeled Divider

Divider Label

HTMLCopy HTML

<div class="divider divider--label--left">
    <div class="divider__text">Divider Label</div>
</div>
<div class="divider divider--label">
    <div class="divider__text">Divider Label</div>
</div>
<div class="divider divider--label--right">
    <div class="divider__text">Divider Label</div>
</div>

<div class="divider divider--label--left">
    <div class="divider__text">Divider Label</div>
</div>
<div class="divider divider--label">
    <div class="divider__text">Divider Label</div>
</div>
<div class="divider divider--label--right">
    <div class="divider__text">Divider Label</div>
</div>

Stateful Divider

Success Divider

Warning Divider

Error Divider

Info Divider

HTMLCopy HTML

<div class="divider divider--label divider--success">
    <div class="divider__text">Divider Label</div>
</div>

<div class="divider divider--label divider--success">
    <div class="divider__text">Divider Label</div>
</div>

Dividers

Contents