Divider

Dividers are visual separators that create clear boundaries between content sections. They use semantic HTML and adapt across brands and modes.

Open Divider Playground

Open in Figma

Anatomy

1
  1. 1 Rule — the visible line that separates content

Options

Orientation

Horizontal
Vertical

Variants

Default
Subtle

Table of options

PropertyValuesDefault
orientationhorizontal / verticalhorizontal
variantdefault / subtledefault

Behaviors

Non-interactive

Dividers are purely visual. They cannot be clicked, focused, or dismissed.

Full-width by default

Horizontal dividers stretch to fill their container. Vertical dividers stretch to the container height.

Usage guidelines

Use dividers to separate, not decorate

Section A content

Section B content

Do

Use dividers between distinct content sections.

Content

Don't

Don't use dividers as decorative borders around content.

Content standards

  • Dividers have no text content. They are purely structural.
  • Use spacing tokens around dividers rather than adding margin to the divider itself.

Keyboard interactions

Dividers are non-interactive and not focusable. They are skipped by keyboard navigation.

Accessibility

  • Uses native <hr> element which has implicit role="separator".
  • Vertical dividers include aria-orientation="vertical" for assistive technology.
  • Decorative dividers (purely visual, no semantic separation) can use role="presentation" to hide from the accessibility tree.

Theming

Divider adapts across brands and modes through semantic color tokens (--color-border-default, --color-border-subtle). Use the hero switches above to preview.

Design checklist

✓
All brand/mode contextsWorks across light and dark modes.
✓
Accessible contrastBorder color meets minimum contrast requirements.
✓
Defined optionsOrientation, size, variant documented.
✓
Usage guidelinesSeparation vs decoration do/don't.
✓
Design tokensColor and size via semantic tokens.
○
Figma componentPending Figma library addition.