HeadingDisplay and semantic heading patterns covering scale, responsive sizing, and constrained-content edge cases.

Available components

Examples

Scale (3xl–xs)

Heading 3xlHeading 2xlHeading xlHeading lgHeading mdHeading smHeading xs

Scale (3xl–xs) (dark)

Heading 3xlHeading 2xlHeading xlHeading lgHeading mdHeading smHeading xs

Semantic levels (h1–h6)

Level 1 (h1)Level 2 (h2)Level 3 (h3)Level 4 (h4)Level 5 (h5)Level 6 (h6)

Semantic levels (h1–h6) (dark)

Level 1 (h1)Level 2 (h2)Level 3 (h3)Level 4 (h4)Level 5 (h5)Level 6 (h6)

Responsive size ({ base, md, xl })

Responsive size: sm to lg to 2xlResponsive size: xs to md to xl

This narrower example makes the responsive size change easier to spot as the viewport expands.Resize the viewport to see the heading step from `xs` to `sm` to `lg`.

Responsive size ({ base, md, xl }) (dark)

Responsive size: sm to lg to 2xlResponsive size: xs to md to xl

This narrower example makes the responsive size change easier to spot as the viewport expands.Resize the viewport to see the heading step from `xs` to `sm` to `lg`.

Edge Cases

Hyphenation in constrained containers

Donaudampfschifffahrtsgesellschaftskapitän

`auto` lets the browser hyphenate long words when the container is narrow.

Donaudampf­schifffahrts­gesellschafts­kapitän

`manual` only breaks at inserted soft hyphen positions.

Donaudampfschifffahrtsgesellschaftskapitän

`inherit` picks up the parent hyphenation setting.

Hyphenation in constrained containers (dark)

Donaudampfschifffahrtsgesellschaftskapitän

`auto` lets the browser hyphenate long words when the container is narrow.

Donaudampf­schifffahrts­gesellschafts­kapitän

`manual` only breaks at inserted soft hyphen positions.

Donaudampfschifffahrtsgesellschaftskapitän

`inherit` picks up the parent hyphenation setting.

Semantic and visual edge cases

Semantic h1 with the smallest visual sizeUse this when the document outline needs a top-level heading but the layout requires a compact treatment.

Donaudampfschifffahrtsgesellschaftskapitän

Semantic h6 with the largest visual size stresses the separation of document structure and visual scale.

LangfristigerTransformationsfahrplan

Combines responsive sizing with a narrow container and automatic hyphenation.

Semantic and visual edge cases (dark)

Semantic h1 with the smallest visual sizeUse this when the document outline needs a top-level heading but the layout requires a compact treatment.

Donaudampfschifffahrtsgesellschaftskapitän

Semantic h6 with the largest visual size stresses the separation of document structure and visual scale.

LangfristigerTransformationsfahrplan

Combines responsive sizing with a narrow container and automatic hyphenation.