Heading

Implemented

Polymorphic heading component H1-H6.

Categoryatoms

Sourcecomponents/atoms/Heading/Heading.tsx

AI HintPolymorphic heading — renders a real h1-h6 with the matching visual scale, a display size, and an as override for the element/visual-scale pair. Consumer weight and font-slot classes deterministically win over the baked presets.

Semantic heading atom for page and section titles, with independent control over the rendered level and visual size.

Heading

Typography atom — Family 1

Renders an h1 through h6 by default. Use size when the visual scale should differ from the document outline, and use as only when the rendered tag needs to differ from the semantic level.

Event dashboard

Upcoming events

Featured event

This component supports light and dark mode.

Usage

Choose level from the page outline first. Use size when a heading needs a different visual scale without changing the document hierarchy. Keep heading levels sequential for screen-reader users.

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

<Heading level={1}>Events</Heading>
<Heading level={2} id="upcoming">Upcoming events</Heading>
<Heading level={3} size="display">Summer festival</Heading>

Dark mode

Heading text uses the theme-aware text-ep-text-heading token and adapts automatically when the surrounding design-system theme switches to dark mode.

Props

Prop

Type

Default

Description

level

1 | 2 | 3 | 4 | 5 | 6

2

Semantic heading level and default visual scale.

size

1 | 2 | 3 | 4 | 5 | 6 | 'display'

—

Visual scale token; defaults to the level.

as

1 | 2 | 3 | 4 | 5 | 6

—

Override the rendered heading tag while preserving the component styling.

children*

React.ReactNode

—

Heading content.

className

string

—

Additional classes appended to the component classes.

id

string

—

Optional id for in-page navigation and accessible labelling.

Props

Preview

Heading

Prop

Type

Required

Default

Description

level

HeadingLevel /** Visual scale token. Defaults to the rendered level (`as ?? level`). */

Optional

2

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

size

HeadingLevel | 'display' /** Override the rendered element. Still a real <h1>-<h6>, so heading * semantics come from the element itself — there are no class-based * semantics. Visual scale follows `as` unless `size` is passed. */

Optional

—

Visual size preset.

Quick use:<Heading />

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<Heading />

Example 2

tsxSnippet

<Heading variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms