A two-line rule — a shade line over a highlight line — that separates content, optionally with a word in the middle.
Options
| Choice | Values | Default | What it does |
|---|---|---|---|
orientationsmbk-divider--orientation-<value> | horizontalvertical | horizontal | |
labelledsmbk-divider--labelled | On or off | Off | A short word, such as "or", interrupts the line. Horizontal only. |
Examples
Usage
Two hairlines: a shade over a highlight.
Labeled
A word between two lines.
or
Vertical
Between items in a row.
DocsChangelog
Guidelines
Purpose
A rule that separates content. It is drawn as two hairlines, a shade over a highlight, so it reads as a groove in the surface rather than a drawn line, and it looks right in both themes because each line is its own edge role.
When to use
- Between sections of a list, a card or a form.
- Between alternatives: a labeled divider reading "or" between two ways of signing in.
- Between inline controls, vertically.
When not to use
- Between every item of a list. Spacing separates; a rule everywhere is noise.
- To underline a heading. Headings carry their own rhythm.
Usage rules
Do
- Let it span its container. Its width is the container's.
Don't
- Set a color on it. The two edge roles are the whole design.
- Use a labeled divider vertically.
ProfileNotificationsSecurity
Sign out
Sign out
Let spacing separate the items of a list and keep the rule for a real break, so the rule still means something.
Profile
Notifications
Security
Sign out
Notifications
Security
Sign out
A rule between every item turns the list into stripes and hides the one break that matters.
Anatomy
- The block: a horizontal rule, or a vertical one that stretches to its row.
- Labeled: two line parts with a label part between them, a short word such as "or", in a small label style.
Behavior
None.
Accessibility
What it does for you
- A horizontal divider is a real horizontal-rule element, which assistive technology announces as a separator. A vertical divider carries the separator role explicitly.
- A labeled divider is not a separator as a whole, because a separator's contents are hidden from screen readers and its word would be lost: its first line carries the separator role, and the word follows as plain text, which is read.
What you must do
- Choose a labeled divider's word so it reads on its own, since a screen reader reads it as plain text.
How to test
- With a screen reader, a plain divider is announced as a separator, and a labeled divider as a separator followed by its word.
- In a forced-color mode, the line is still visible.
Source
The files the divider is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.
Stylesheet
/* smbk-divider — Divider. Figma "Divider" 1924:9 and "Divider Labelled" 1924:8774.
* Two hairlines: the edge-top shade over the edge-bottom highlight. */
.smbk-divider {
box-sizing: border-box;
display: block;
width: 100%;
height: 0;
margin: 0;
border: 0;
border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}
.smbk-divider--orientation-vertical {
display: inline-block;
width: 0;
height: auto;
min-height: var(--smbk-size-mark-md);
align-self: stretch;
border-top: 0;
border-bottom: 0;
border-left: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
border-right: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}
/* ---- labelled: a word between two lines ---- */
.smbk-divider--labelled {
display: flex;
align-items: center;
gap: var(--smbk-space-inline-xl);
height: auto;
border: 0;
}
.smbk-divider__line {
flex: 1 1 auto;
height: 0;
border-top: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-top);
border-bottom: var(--smbk-border-width-hairline) solid var(--smbk-color-border-groove-bottom);
}
.smbk-divider__label {
color: var(--smbk-color-text-subtlest);
font-family: var(--smbk-typography-label-sm-font-family);
font-size: var(--smbk-typography-label-sm-font-size);
font-weight: var(--smbk-typography-label-sm-font-weight);
line-height: var(--smbk-typography-label-sm-line-height);
letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
text-transform: var(--smbk-typography-label-sm-text-transform);
white-space: nowrap;
}Tokens it reads
| Token and CSS | Value | Preview | Foundation |
|---|---|---|---|
| border-width.hairline--smbk-border-width-hairline | 1px | Border width | |
| color.border.groove-top--smbk-color-border-groove-top | light: #c4cdd8dark: #00000066changes with theme | Color | |
| color.border.groove-bottom--smbk-color-border-groove-bottom | light: #ffffffdark: #ffffff0dchanges with theme | Color | |
| size.mark.md--smbk-size-mark-md | 20px | Size | |
| space.inline.xl--smbk-space-inline-xl | comfortable: 16pxcompact: 12pxchanges with density | Spacing | |
| color.text.subtlest--smbk-color-text-subtlest | light: #606a75dark: #7c8692changes with theme | Color | |
| typography.label-sm--smbk-typography-label-sm-font-family--smbk-typography-label-sm-font-size--smbk-typography-label-sm-font-weight--smbk-typography-label-sm-line-height--smbk-typography-label-sm-letter-spacing--smbk-typography-label-sm-text-transform | fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 12pxfontWeight: 500lineHeight: 1.4letterSpacing: 0px | The quick brown fox | Typography |
Manifest
{
"name": "divider",
"block": "smbk-divider",
"summary": "A two-line rule — a shade line over a highlight line — that separates content, optionally with a word in the middle.",
"adapt": "css",
"axes": {
"orientation": {
"values": [
"horizontal",
"vertical"
],
"default": "horizontal"
}
},
"flags": {
"labelled": {
"description": "A short word, such as \"or\", interrupts the line. Horizontal only."
}
},
"parts": [
"line",
"label"
],
"figmaNodeId": "1924:9"
}