H2

Implemented

Level 2 heading for major sections.

Categoryatoms

Sourcecomponents/atoms/Heading/H2.tsx

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

Section heading. Renders <h2>. FR-CA: Titre de section (niveau 2).

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 2.

Événements à venir

This component supports light and dark mode.

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

<H2 id="upcoming">Événements à venir</H2>
<H2>Statistiques</H2>

Renders <h2>. Maintain sequential heading order. Use the id prop to anchor deep-link navigation.

Prop

Type

Default

Description

children*

React.ReactNode

—

Heading content.

size

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

—

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

className

string

—

Additional classes.

id

string

—

Anchor id.

tsxSnippet

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

tsxSnippet

<H2 />

tsxSnippet

<H2 variant="default" />

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms