Kit part · Cards & panels
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.
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 | Horizontal | Upright | Inset | On a dark plate |
|---|---|---|---|---|
| Rule | Above Below | AB | Above Below | Above Below |
Graphite
| Part | Horizontal | Upright | Inset | On a dark plate |
|---|---|---|---|---|
| Rule | Above Below | AB | Above Below | Above Below |
| Name | Kind | Values | What it does |
|---|---|---|---|
| hr.tui-separator | element | horizontal | The rule: 2px tall, a hairline and a catch of light under it, with air above and below. |
| div.tui-separator[role="none"] | element | decorative | The same drawing where it only spaces things out, so a screen reader does not count it. |
| --vertical | modifier | with role and aria-orientation | An upright rule that stretches to the height of its row. Say role="separator" and aria-orientation="vertical"; HTML has no element for it. |
| --flush · --inset | modifier | tui-separator--flush, --inset | No air round it, for a place that sets its own; or held in from both edges. |
| margin | CSS property | 16px 0 | Set it on the rule to change the space it makes. |
<!-- Between two things that would be mistaken for one. A real hr: a screen reader says "separator". -->
<hr class="tui-separator">
<!-- Only spacing: nothing for a screen reader to count -->
<div class="tui-separator" role="none"></div>
<!-- Upright, between keys in a row. HTML has no element for it, so say so. -->
<div class="tui-separator tui-separator--vertical" role="separator" aria-orientation="vertical"></div>Needs kit.css only, no script. How to install the kit.
<hr> is a separator to a screen reader, which is right where the rule marks a change of subject; where it only spaces things out, use a div with role="none" so it is not counted.role="separator" and aria-orientation="vertical", since the default is horizontal and a div has no role of its own.Two borders and nothing between them: the top one the kit’s hairline, the bottom one the catch of light that falls on the lower wall of a cut. Quiet turns the lower one off, which leaves the single hairline the rest of the Quiet volume uses. Upright, the lit wall is the one on the right, the side that faces the lamp.
Mark where one thing ends and the next begins, with a groove in the plate that is there when you look for it and quiet when you do not.
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.
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.
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.