EXTENDED UI

Text Divider

Lines with labels that split, group and date content — quietly.
THEME
01

Playground

Label, line, colour, spacing and orientation
Spring 27 · briefOuterwear for SS27, shot in Berlin and on the Baltic coast.Calm, honest, lots of daylight. Retouch 40 heroes; BTS film 60 s.
<Divider label="Details" align="center" variant="solid" thickness={1} tone="neutral" spacing="M" />
Settings
LABEL
LINE · THICKNESS
COLOUR · SPACING
ORIENTATION
02

Patterns

Login, chat dates, groups, timelines, toolbars, sections
Login · “or”centre, muted
Chat dates + unreadsticky · red “new” line
Selects look great!
Thanks! v2 tomorrow.
Perfect.
v2 is up.
Opening now
Hero 04 ❤️
Ana can push the blue more.
Yes please!
And sharpen the logo?
Sending to Jonas too.
Grouped listcount · collapse
AV-2026-040 · KayaAV-2026-031 · MiraAV-2026-028 · Lumen
Spring 27 · balanceFjord · depositLumen · retainerMira · framesKiln · launch
AV-2026-038 · LumenAV-2026-029 · Nordic
Timeline phasesdone · current · upcoming
Approved Oct 20Mývatn · Nov 10–12Selects + retouch 13 / 40Nov 27 · finals + licence
Verticaltoolbar · stats
BUDGET€38.6kDUENov 27CREW5
Section headersnumbered · with action
01Brief
02Shoot days
03Deliverables
03

Rules & a11y

Checklist and Do / Don’t
Checklist
✓Decorative line → role="separator"or <hr>; screen readers skip it
✓Labelled divider → a headinggroup titles like “Overdue · 3” are h3 / aria-label
✓Muted, not invisibleline ≥ 16 % opacity, label ≥ 4.5:1
✓Sticky dateskeep the day visible while scrolling
✓One style per screendon’t mix solid, dashed and dotted
DO✓Use spacing first, a line only when needed✓Keep labels short and uppercase-small✓Make date dividers sticky in feeds✓Use colour only for meaning (new, overdue)
DON’T✕Put a line between every row✕Use thick or bright lines as decoration✕Mix several line styles on one card✕Hide important info only in a divider