Divider

Implemented

Horizontal 1px divider in --c-border-light. Used inside stat cards, table rows, side cards.

Categoryatoms

Sourcepatterns/atoms/divider.html

AI Hint1px rule in the border token, horizontal or vertical, exposed as role=separator with aria-orientation. Use between stat cards, table rows and side-card sections.

Horizontal or vertical rule used to separate content regions. FR-CA: Séparateur horizontal ou vertical.

Divider

Display atom (Family 2 — Tier 1, placeholder)

Tier-1 placeholder. Production component ships in DS-313.

Horizontal — default

Subtle

Strong + label

Gauche

Droite

This component supports light and dark mode.

Status

Tier-1 placeholder. Production Divider ships in DS-313.

Intended API

import { Divider } from '@epasslive/design-system'

<Divider />
<Divider weight="subtle" />
<Divider orientation="vertical" />
<Divider label="ou" />

Accessibility

The wrapper renders role="separator" with the appropriate aria-orientation. Default French aria-label is "Séparateur".

Props

Prop

Type

Default

Description

orientation

'horizontal' | 'vertical'

horizontal

Render axis.

weight

'subtle' | 'default' | 'strong'

default

Border strength.

label

string

—

Optional caption rendered beneath the rule.

ariaLabel

string

Séparateur

French label announced by assistive tech.

Props

Preview

Divider

Prop

Type

Required

Default

Description

orientation

"horizontal" | "vertical"

Optional

'horizontal'

Synced from source — no interface JSDoc yet; document on `Divider.tsx`.

Quick use:<Divider />

Accessibility

ARIA roleseparator

Usage

Import

tsxSnippet

import { Divider } from "@epasslive/design-system"

Example 1

tsxSnippet

<Divider />

Example 2

tsxSnippet

<Divider variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms