` - Needs: `kit.css` only, no script ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Cards & panels, Sign in & sign up - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### Centred · or ```html

``` ### At the start · --start ```html

Billing

``` ### At the end · --end ```html

Continued

``` ### A date as written · --plain ```html

Monday 5 October

``` ### A heading ```html

Billing

``` ### Upright · --vertical ```html

``` ### A long word wraps ```html

Unreleased changes still waiting for a second pair of eyes

Monday 5 October

Billing

``` The demo on the page: ```html

Monday 5 October

Dana WhitlockRe: site visit

Friday 2 October

Rhys OkaforDrawings, revision B

``` ## Usage notes The sign-in panel offers two ways in, with “or” between them. The inbox below it runs from today back, each day under a rule that names it at its start. Narrow the window and the word wraps instead of pushing the rule off the plate. ## Accessibility - The word is ordinary text in reading order, so a screen reader says “or” between the two choices and “Monday 5 October” before that day’s messages; the two grooves are drawn and say nothing. - It has no role of its own on purpose: a separator’s children are not read, which would hide the word. Where the rule names a section, make it a heading, and where it dates something, put a `` inside. - The word is printed in the secondary ink (6:1 on the plate); the grooves are decoration, so their softness is no loss. - It takes no focus and nothing moves. A word that is too long for the row wraps, so there is no sideways scroll at 390px. ## How it’s built 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. ## Rules Put one word into a rule: “or” between two choices, a date between two days, or a section name above what follows. The full rules are in `divider-label.rules.md` in the brain, which ships with the Kit. ## Related parts - [Separator](https://tactileui.dev/parts/separator): 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. - [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels. - [Field](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.