H3

Implemented

Level 3 heading for subsections.

Categoryatoms

Sourcecomponents/atoms/Heading/H3.tsx

AI HintLevel-3 subsection heading rendered as a real h3 at the 2xl bold scale. Prefer the polymorphic Heading atom for new code.

Subsection heading. Renders <h3>. FR-CA: Titre de sous-section (niveau 3).

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 3.

This component supports light and dark mode.

Usage

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

<H3>Billets confirmés</H3>
<H3 size="display">Bannière promo</H3>

Renders <h3>. Use the display size sparingly — typically reserved for editorial hero blocks.

Prop

Type

Default

Description

children*

React.ReactNode

—

Heading content.

size

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

—

Visual scale token; defaults to the level (3).

className

string

—

Additional classes.

id

string

—

Anchor id.

tsxSnippet

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

tsxSnippet

<H3 />

tsxSnippet

<H3 variant="default" />

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms