⬅

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">