Kit part · Cards & panels · Sign in & sign up
A rule with a word set into it. The same engraved groove as the separator runs out to both sides of a printed word, broken where the word sits: “or” between two ways in, a date between two days of messages, the name of the section below. The word is real text in reading order; only the two grooves are drawn.
Seats open in 11 days. Want one email that morning?
Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.
Aluminium
| Part | Centred | At the start | At the end | Plain |
|---|---|---|---|---|
| Divider | or | Billing | Continued | 5 October |
Graphite
| Part | Centred | At the start | At the end | Plain |
|---|---|---|---|---|
| Divider | or | Billing | Continued | 5 October |
| Name | Kind | Values | What it does |
|---|---|---|---|
| div.tui-divider | element | text or span | The rule and its word: a flex row with a groove either side. Use a heading element where the word names a section. |
| .tui-divider__text | class | optional | The word, when it needs an element of its own. It wraps and never pushes the rules off the plate. |
| --start · --end | modifier | tui-divider--start, --end | The word at one end, with the rule running on from the other side only. |
| --plain | modifier | tui-divider--plain | The word as it is written, not printed as a legend: for a date or a name that must keep its capitals. |
| --vertical | modifier | tui-divider--vertical | Between two columns, with the word set upright between two upright rules. |
<!-- Between two alternatives -->
<div class="tui-divider">or</div>
<!-- A day, with the rule running on from it -->
<div class="tui-divider tui-divider--start"><time datetime="2026-10-05">Monday 5 October</time></div>
<!-- A section's name: use a heading, so it is one -->
<h3 class="tui-divider tui-divider--start">Billing</h3>Needs kit.css only, no script. How to install the kit.
<time> inside.A flex row whose two pseudo-elements are the separator’s groove, each taking the space the word leaves. The word is set in the kit’s printed legend, or in plain type with --plain. Upright, the row becomes a column and the grooves turn to the upright cut with its lit wall on the right.
Put one word into a rule: “or” between two choices, a date between two days, or a section name above what follows.
5 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.
An engraved rule: a fine groove cut into the plate, a hairline with a catch of light on its lower wall, or on its right wall when it stands upright. It divides without shouting, with no colour, no weight and nothing to read. Quiet keeps only the hairline. A real hr is a separator to a screen reader; one that only spaces things out says nothing.
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.