Rule

Rule

A rule (or divider) is used to add saparation between items vertically.

Give an hr a class name of rule for basic styling.


<hr class="rule">

Styling a Rule

Use utility classes to change the appearence of a rule.

Make it the primary brand color.


Make it have a thicker border.


Adjust the margins.


<p>Make it the primary brand color.</p>
<hr class="rule  u-colorPrimary">

<p>Make it have a thicker border.</p>
<hr class="rule  u-border3">

<p>Adjust the margins.</p>
<hr class="rule  u-my6">