🔗

Base

The divider in its basic form uses a gradient keyline and provides a prominent shadow on the bottom edge. By utilising <hr> we can easily place content above and below without disrupting the flow of the document.

<hr class="c-divider" />

Modifiers

Top

Provides a horizontal divider with a prominent shadow on the top edge.

<hr class="c-divider c-divider--top" />

Left and Right

Provides vertical dividers with a prominent shadow on the left and right edges.

Note: Unlike horizontal dividers, these should be applied to a block element and wrapped around content.

<div class="c-divider c-divider--left u-padding-all">
  Divider on the left.
</div>
<div class="c-divider c-divider--right u-padding-all">
  Divider on the right.
</div>

Subsection

Provides a horizontal subsection divider without a prominent shadow.

<hr class="c-divider c-divider--sub" />

Subsection dividers can be aligned via additional modifiers:

Align Left

<hr class="c-divider c-divider--sub c-divider--align-left" />

Align Right

<hr class="c-divider c-divider--sub c-divider--align-right" />

Spacing

Extra spacing can be applied on any edge with the spacing utility classes.