# Divider

A two-line rule — a shade line over a highlight line — that separates content, optionally with a word in the middle.

Block: `smbk-divider`. Status: candidate. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.

## Options

| Axis | Values | Default | Meaning |
|---|---|---|---|
| `orientation` | `horizontal`, `vertical` | `horizontal` |  |
| `labelled` | on / off | off | A short word, such as "or", interrupts the line. Horizontal only. |

Parts: `smbk-divider__line`, `smbk-divider__label`

## Markup

```html
<hr class="smbk-divider smbk-divider--orientation-horizontal"/>
```

## React

```tsx
import { Divider } from './design-system/components/divider/divider.js';

<Divider orientation="horizontal" />
```

## Stylesheet

```css
/* 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

```json
{
  "border-width": {
    "hairline": {
      "$type": "dimension",
      "$value": "{{border-width.1}}",
      "$description": "Thin lines: dividers and almost every edge."
    }
  },
  "color": {
    "border": {
      "groove-top": {
        "$type": "color",
        "$value": "{{color.grey.300}}",
        "$description": "Upper line of an engraved divider or rim."
      },
      "groove-bottom": {
        "$type": "color",
        "$value": "{{color.alpha.white.100}}",
        "$description": "Lower line of an engraved divider or rim."
      }
    },
    "text": {
      "subtlest": {
        "$type": "color",
        "$value": "{{color.grey.600}}",
        "$description": "Quietest text: hints, captions, placeholders."
      }
    }
  },
  "size": {
    "mark": {
      "md": {
        "$type": "dimension",
        "$value": "{{size.20}}",
        "$description": "Small fixed marks inside components (dots, bars, keys), medium."
      }
    }
  },
  "space": {
    "inline": {
      "xl": {
        "$type": "dimension",
        "$value": "{{space.16}}",
        "$description": "Gap between things side by side, extra large."
      }
    }
  },
  "typography": {
    "label-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Geist, Geist Fallback, system-ui, sans-serif",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0px"
      },
      "$description": "Label SM: labels on controls and short UI text (buttons, chips, tabs, menu headings). Geist Medium, sentence case. Code and keys use Code SM and Code MD."
    }
  }
}
```

## 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.

## 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.

## 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.

## 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.

## 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.