AccentUnderline
ImplementedADR-031 short decorative brand-accent underline (h-0.5 w-6 rounded-ep-full) for section headings — one of the three valid accent contexts. Signals the heading's stable identity (the FooterColumn pattern). Always aria-hidden; the heading carries the semantics.
components/atoms/AccentUnderline/AccentUnderline.tsxADR-031 short decorative brand-accent underline for section headings. FR-CA : Soulignement décoratif d’accent sous un titre de section.
AccentUnderline
Display atom (Family 2 — Tier 1)
One of the three valid ADR-031 accent contexts. Always aria-hidden — the heading carries the semantics.
Événements
Assistance
Entreprise
Infolettre
This component supports light and dark mode.
Usage
import { AccentUnderline } from '@epasslive/design-system'
<h2 className="...">Événements</h2>
<AccentUnderline accent="teal" className="mb-3" />Accessibility
- Always
aria-hidden— purely decorative (ADR-031 §4.3); the heading carries the semantics. - Attach the accent to a stable identity (fixed action, role, column) — never index % 4 cycling.
Props
accent*'teal' | 'indigo' | 'amber' | 'pink'Brand accent — must attach to a stable identity, never index % 4 cycling.
classNamestringExtra utility classes appended after the recipe classes (e.g. "mb-3").
Props
AccentUnderline
accent'teal' | 'indigo' | 'amber' | 'pink'—Brand accent. Must attach to a stable identity — footer columns use events=teal, support=indigo, company=amber, newsletter=pink. Never index % 4 cycling (ADR-031 §3).
classNamestring—Extra utility classes appended after the recipe classes (e.g. "mb-3" for heading spacing).
<AccentUnderline />Accessibility
ARIA
1 ruleType
1 ruleUsage
Import
import { AccentUnderline } from "@epasslive/design-system"Example 1
<AccentUnderline accent="teal" className="mb-3" />Example 2
<AccentUnderline accent="pink" />Anti-patterns
— Do not attach accents via index % 4 over dynamic collections
— Do not put meaningful content inside the underline — it is aria-hidden