Overline

Implemented

Small uppercase label text.

Categoryatoms

Sourcecomponents/atoms/Overline/Overline.tsx

AI HintSmall uppercase kicker/eyebrow label above headings, renderable as span, div or p. Decorative emphasis — the heading below carries the semantics.

Overline component.

Overline

design-system

Overline component preview and API reference.

Overline

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Overline />

Example 2

tsxSnippet

<Overline variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms