Divider
A divider is a horizontal line between blocks of content, with an optional text label on the left, in the center or on the right.
Default markup
The .hr-text element draws a line with a label in the middle. For a line without text, use a plain hr.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text">See also</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>Text position
Add .hr-text-start or .hr-text-end to move the label to the start or the end of the line. Without them it's centered.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text hr-text-start">Start divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
<div class="hr-text">Centered divider</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text hr-text-end">End divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>Divider color
A text-* class from the color palette colors the divider.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text text-green">Green divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>
<div class="hr-text text-red">Red divider</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.</p>
<div class="hr-text text-primary">Primary divider</div>
<p>Dicta error hic illo iure necessitatibus nihil officiis omnis perferendis, praesentium repellendus rerum, saepe sed, sit!</p>Accessibility
- A divider that separates sections is decoration, so
hrwith no extra markup is enough - browsers already expose it as a separator. - When the divider carries a label, keep the label as text. Do not fake it with a
::before, since generated content is not reliably read. - A vertical divider between inline items is decoration too. Use
aria-hidden="true"if you build it from aspanrather than anhr. - Do not use a divider to group form fields. Use a
fieldsetwith alegend, which is what actually creates the group.
Class reference
Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.
hr | component | Applied to the hr element |
hr-text | part | Divider with a label; the text sits in a child element |
hr-text-spaceless | modifier | Removes the vertical margin |
hr-text-start | direction | Moves the label to the leading edge |
hr-text-end | direction | Moves the label to the trailing edge |
text-{color} | color | Any base color for a labelled divider |
