H5

Implemented

Level 5 heading.

Categoryatoms

Sourcecomponents/atoms/Heading/H5.tsx

AI HintLevel-5 heading rendered as a real h5 at the lg semibold scale. Prefer the polymorphic Heading atom for new code.

Minor heading. Renders <h5>. FR-CA: Titre mineur (niveau 5).

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 5.

This component supports light and dark mode.

Usage

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

<H5>Adresse de livraison</H5>
<H5 size={4}>Compact</H5>

Renders <h5>. Use sparingly — typically only when an H4 region needs further subdivision.

Prop

Type

Default

Description

children*

React.ReactNode

—

Heading content.

size

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

—

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

className

string

—

Additional classes.

id

string

—

Anchor id.

tsxSnippet

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

tsxSnippet

<H5 />

tsxSnippet

<H5 variant="default" />

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms