Primitive

Heading

Semantic heading primitive with Concrete hierarchy roles.

Use Heading when hierarchy is needed. Level is document structure; hierarchy is visual hierarchy.
typography
DOM renderImage render
HeadingDefault

Workspace

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Section-level heading.

Workspace

Render state

Hero

Hero heading for first-viewport editorial moments.

The language layer for labs that ship.

Render state

Display

Display heading for editorial or hero-scale moments.

Concrete

Render state

Scale

Title and subsection sizing together.

Agent workflow

Tool trace

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
level'1' | '2' | '3' | '4' | '5' | '6'-Semantic heading level.
hierarchy'hero' | 'display' | 'title' | 'section' | 'subsection' | 'label'-Visual hierarchy role.
intent'default' | 'muted' | 'inverse'-Heading intent.
childrenReactNode-Heading content.