H6

Implemented

Level 6 heading.

Categoryatoms

Sourcecomponents/atoms/Heading/H6.tsx

AI HintLevel-6 heading rendered as a real h6 at the base semibold scale — card eyebrows and list-group titles. Prefer the polymorphic Heading atom for new code.

Deepest heading. Renders <h6>. FR-CA: Titre profond (niveau 6).

H6

Typography atom (Family 2 — Tier 1)

Convenience wrapper around Heading with level locked to 6.

Notes complémentaires

Plus visible

This component supports light and dark mode.

Usage

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

<H6>Notes complémentaires</H6>

Accessibility

Renders <h6>. Most UIs rarely need this level. If your document outline goes 6 levels deep, consider restructuring sections into cards instead.

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 (6).

className

string

—

Additional classes.

id

string

—

Anchor id.

Usage

Import

tsxSnippet

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

Example 1

tsxSnippet

<H6 />

Example 2

tsxSnippet

<H6 variant="default" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms