Dividers

Horizontal rules with various weights and styles. Use to separate content sections or add visual structure.

Weights

Control line thickness from hairline to heavy.

Code

<hr />                        <!-- Default -->
<hr class="divider--hairline" />
<hr class="divider--semibold" />
<hr class="divider--bold" />
<hr class="divider--extrabold" />
<hr class="divider--heavy" />

Hairline


Regular (default)


Semibold


Bold


Extra bold


Heavy


Styles

Color and pattern variations.

Code

<hr class="divider--accent" />
<hr class="divider--dotted" />
<hr class="divider--dashed" />

Accent


Dotted


Dashed