68Divider
A rule between things. Principle 1 says the hairline is the structure, so this is the one component that is nothing but the hairline.
Use it for
- Separating groups that a heading would over-announce
- --labelled for an OR between two routes, or a date break in a feed
Not for
- Between every item in a list — List already rules its own rows
- As decoration — a rule with nothing on either side of it is noise
Plain
Above the rule.
Below it.
markup
<p class="ns-card__text">Above the rule.</p>
<hr class="ns-divider">
<p class="ns-card__text">Below it.</p>Labelled
or
markup
<div class="ns-divider ns-divider--labelled">or</div>Tight
Inside a card or a menu, where the default rhythm is too much air.
Above.
Below.
markup
<p class="ns-card__text">Above.</p>
<hr class="ns-divider ns-divider--tight">
<p class="ns-card__text">Below.</p>Accessibility contract
- A bare rule is a real <hr>
- The labelled form's text is real text between two rules, so it survives selection and copy — not a background trick