Rule
Page divider styles user a hr tag.
Rule Styles
Different rule styles.
Labels
Add a label to the rule/divider.
Continue
.c-rulePage divider styles user a hr tag.
<hr class="c-rule" />Different rule styles.
<hr class="c-rule c-rule--dotted" /><hr class="c-rule c-rule--dashed" /><hr class="c-rule c-rule--gradient" /><hr class="c-rule c-rule--ornament" data-ornament="***" />Add buttons to the rule/divider.
<div class="c-rule-container">
<ul class="c-rule__actions | o-list-inline | u-space-x-sm">
<li class="o-list__item">
<a class="c-btn c-btn--primary" href="#">Button</a>
</li>
<li class="o-list__item">
<a class="c-btn c-btn--tertiary" href="#">Filters</a>
</li>
</ul>
<hr class="c-rule c-rule--gradient">
</div>Add a label to the rule/divider.
<div class="c-rule-container">
<div class="c-rule__label">
<span>Continue</span>
</div>
<hr class="c-rule c-rule--gradient">
</div>