H1

Implemented

Level 1 heading for page titles.

Categoryatoms

Sourcecomponents/atoms/Heading/H1.tsx

AI HintLevel-1 page-title heading rendered as a real h1 at the 4xl bold scale. Prefer the polymorphic Heading atom for new code; H1-H6 are level-specific shortcuts.

Page-level heading. Always rendered as <h1>. Use exactly one per page. FR-CA: Titre de niveau 1 (page).

H1

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 1.

Tableau de bord

Titre éditorial

This component supports light and dark mode.

Usage

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

<H1>Tableau de bord</H1>
<H1 size="display">Page d'accueil</H1>

Accessibility

Renders <h1>; exactly one per page is recommended.
Skip-to-content links should target the H1.
Add id for in-page anchor navigation.

Dark mode

Uses text-ep-text-heading; auto-adapts to dark theme.

Props

Prop

Type

Default

Description

children*

React.ReactNode

—

Heading content.

size

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

—

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

className

string

—

Additional classes.

id

string

—

Anchor id for in-page navigation.

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<H1 />

Example 2

tsxSnippet

<H1 variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms