Divider

atoms

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

ARIA Role: separator

Demo

Demo for Divider (atoms)

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

TypeScript Interface

interface DividerProps {
  orientation?: 'horizontal' | 'vertical';
  className?: string;
}

Assertions (NASA Rule 5)

  • [aria]Divider must have role='separator' and aria-orientation when used semantically(WCAG 1.3.1)
  • [render]Default orientation='horizontal' — vertical requires explicit opt-in(NASA Rule 2)

Usage

Import

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

Basic

<Divider />

With Variants

<Divider variant="primary" size="md" />