H4

Implemented

Level 4 heading for nested sections.

Categoryatoms

Sourcecomponents/atoms/Heading/H4.tsx

AI HintLevel-4 nested-section heading rendered as a real h4 at the xl bold scale. Prefer the polymorphic Heading atom for new code.

Card / panel title. Renders <h4>. FR-CA: Titre de carte ou panneau (niveau 4).

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 4.

This component supports light and dark mode.

Usage

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

<H4>Détails de l'événement</H4>
<H4 size={3}>Carte compacte</H4>

Renders <h4>. Pair H4 cards with an enclosing H3 region.

Prop

Type

Default

Description

children*

React.ReactNode

—

Heading content.

size

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

—

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

className

string

—

Additional classes.

id

string

—

Anchor id.

tsxSnippet

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

tsxSnippet

<H4 />

tsxSnippet

<H4 variant="default" />

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms