Horizontal rules

Horizontal rules are used to provide a visual break and divide content.

In most cases, <hr> tags are used for visual purposes only. Therefore, it does not need to be announced by a screen reader. Add the attribute aria-hidden="true" so screen readers will ignore the element. If the element should be announced by a screen reader, the aria-hidden attribute can be removed.

Normal horizontal rule

Thick horizontal rule

Code


<!-- Normal horizontal rule -->
<hr aria-hidden="true">

<!-- Thick horizontal rule -->
<hr class="row-divider" aria-hidden="true">