Divider
Dividers separate content. The dashed variant is Settld's signature — it echoes the ruled lines of a khata ledger and creates a visual rhythm that's immediately recognisable. Use solid for card interiors, dashed for list rows and activity feeds.
Variants
Solid
Dashed
Labeled
Solid is a 1px line in --ink-line. Use it inside cards, between form sections, and below section headings. It's the quietest separator.
Dashed is the ledger line — 1px dashed in --ink-line. Use it between list rows in transaction histories and activity feeds. It carries the khata visual language without becoming decorative.
Labeled is a solid line with a centered mono-uppercase label. Use it to separate time buckets ("This month", "Last week", "August") in chronological feeds. The label floats on the line — it doesn't break it.
Inset
The .divider-inset modifier offsets the line by 56px — aligned with the right edge of a 36px avatar plus 16px gap, plus 4px extra. This preserves the visual column of avatars and avoids a line that runs under the avatar.
Spacing
| Class | Margin top/bottom | Use case |
|---|---|---|
.divider-my-sm | 8px / 8px | Between list rows in compact layouts |
.divider-my-md | 16px / 16px | Default — between card sections, form groups |
.divider-my-lg | 24px / 24px | Between major content blocks |
| No modifier | 0 | Flush — use when parent controls spacing |
On dark surfaces
Solid
Dashed
Labeled
On dark surfaces, the line color shifts to --dark-border (#3D3630). The labeled variant's text uses --dark-text-mute. No additional CSS changes — the .on-dark parent class handles everything.
Anatomy
| Part | Element | Notes |
|---|---|---|
| Line | <hr> or <div> | Use <hr> for semantic separation. Use <div> for the labeled variant (it needs flex children). |
| Dash pattern | CSS border-top: dashed | Browsers render dashes at approx 4px on/4px off at 1px stroke — no SVG needed. |
| Label | .divider-label inside .divider-labeled | Mono, 10px, uppercase, --ink-mute. Max 20 chars to stay readable. |
Usage
Accessibility
<hr> for meaningful separations so screen readers announce a thematic break. For purely decorative spacing, use a <div> with aria-hidden="true".
.divider-labeled pattern uses a <div> not an <hr>. Add role="separator" and aria-label matching the visible label text (e.g. aria-label="This month").
--ink-line (#DDD2B8) against --s-paper (#FBF8F0) gives a subtle but visible 1.5:1 ratio. This is intentional — dividers are structural, not text, and don't need to meet AA text contrast requirements.
Code
HTML
<!-- Solid --> <hr class="divider divider-solid divider-my-md"> <!-- Dashed (ledger style) --> <hr class="divider divider-dashed"> <!-- Dashed, inset (list with avatars) --> <hr class="divider divider-dashed divider-inset"> <!-- Labeled time bucket --> <div class="divider divider-labeled" role="separator" aria-label="This month"> <span class="divider-label">This month</span> </div>
CSS classes
| Class | Purpose |
|---|---|
.divider | Base reset — removes default <hr> border and sets width: 100% |
.divider-solid | 1px solid --ink-line |
.divider-dashed | 1px dashed --ink-line — the khata ledger line |
.divider-labeled | Flex row with centered label and flanking lines via pseudo-elements |
.divider-label | Text child inside .divider-labeled |
.divider-inset | 56px left offset — aligns with avatar list content |
.divider-my-sm/md/lg | Vertical margin helpers (8/16/24px) |
Design tokens used
| Token | Value | Role |
|---|---|---|
--ink-line | #DDD2B8 | Line color on light surfaces |
--ink-mute | #8A8276 | Label text color |
--dark-border | #3D3630 | Line color on dark surfaces |
--dark-text-mute | rgba(251,248,240,0.45) | Label text on dark surfaces |
--font-mono | JetBrains Mono | Label typography |