Divider

A horizontal or vertical line for visually separating content. Supports subtle, default, and strong weights, plus a text label variant.

Preview

Horizontal variants

Subtle

---

Default

---

Strong

---

With text label

Or

Section Two

Vertical divider

Left content

Right content

Variants

Variant	Weight	Use case
subtle	Lightest	Between closely related items
default	Medium	Standard section separation
strong	Heaviest	Major content boundaries
with-text	With label	"Or" dividers, section headings
vertical	Vertical	Separating inline elements

Props

Prop	Type	Default	Description
variant	'subtle' | 'default' | 'strong'	'default'	Line weight
orientation	'horizontal' | 'vertical'	'horizontal'	Line direction
label	string	--	Text label shown in the middle

Code example

React

import { Divider } from '@thepace/lexicon/components';

<Divider />
<Divider variant="strong" />
<Divider label="Or" />
<Divider orientation="vertical" />

Vanilla HTML

<hr class="lex-divider lex-divider--default" />

<div class="lex-divider lex-divider--with-text">
  <span class="lex-divider__text">Or</span>
</div>

<div style="display: flex; align-items: stretch; height: 40px;">
  <span>Left</span>
  <div class="lex-divider lex-divider--vertical lex-divider--default"></div>
  <span>Right</span>
</div>

CSS class reference

Class	Purpose
.lex-divider	Base horizontal line
.lex-divider--subtle	Lightest weight
.lex-divider--default	Standard weight
.lex-divider--strong	Heavy weight
.lex-divider--vertical	Vertical orientation
.lex-divider--with-text	Label variant
.lex-divider__text	Label text

Accessibility

• Horizontal dividers use <hr> for semantic separation.
• Decorative dividers (within a visual group) use role="separator".
• Labelled dividers associate the text with the separator for screen readers.

Guidelines

Do

• Use dividers to separate logical sections, not every element.
• Use the subtle variant within cards and the default variant between sections.
• Use the text label variant for "or" patterns in auth forms.

Don't

• Don't overuse dividers — whitespace is often sufficient.
• Don't use strong dividers for minor separations.