Dividers serve as boundaries between different parts of the page. It is an alternative to the hr tag that has support for vertical orientation and text.



By default, the divider class has a horizontal orientation.

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

To use the vertical variant, use the divider--v class instead.

<div class="divider--v" />
Divider Labels

To add text in the center of thse dividers, add the data-content attribute with your text.


<div class="divider" data-content="Label"></div>


<div class="divider--v h-100p" data-content="Label" />