Separator
A line between things, optionally with a word or two in it. Specification: docs/components/separator.md
Line
An <hr class="canon-separator">: a break between two parts, as wide as its container, with space above and below.
Signed in as Ada Lovelace.
Last active 2 minutes ago.
With words
A <div class="canon-separator"> with the words inside: they sit between two lines. The words are read as ordinary text ("or"), so say them as a sentence would.
Size
data-size on the separator or a container: rows of 12 / 16 / 20px, words in the matching text size.
Vertical
aria-orientation="vertical" on the <hr>, in a row: a line as tall as the row, between groups of buttons or bits of text. A vertical line has no words.
Edge cases
Long words keep to one line, the lines shrinking around them; right to left mirrors nothing (the lines are symmetric).