Skip to content

Divider

TIP

The divider is a horizontal rule that can be used to separate content. Use the <hr> tag instead of a <div> if you want to define thematic changes in the content.

hr.l-divider or div.l-divider

Size Modifiers

.l-divider[.-large, .-fullwidth ]




html
<hr class="l-divider" />
<hr class="l-divider -large" />
<hr class="l-divider -fullwidth" />

Color Modifiers

.l-divider[.-light]


html
<hr class="l-divider -light -fullwidth"/>

Vertical Divider

.l-divider[.-vertical]



html
<hr class="l-divider -vertical"/>
<hr class="l-divider -vertical -large"/>