Heading
Semantic heading with automatic level management.
Heading renders a semantic section heading. It reads its level from HeadingLevels context, or
you can set level directly.
<Heading>Section title</Heading>Heading level
Set base on the root HeadingLevels. Each nested HeadingLevels advances the next heading level.
This keeps the document outline aligned with the component structure.
Product roadmap
Objectives
First quarter
Use level to override the context for one heading. It does not change the level for siblings or
children.
<Heading level={2}>Explicit h2</Heading>Do not skip levels, such as an h2 followed by an h4. Screen reader users navigate a page by heading level.
Size and weight
By default, Heading maps h1 through h6 to size steps '800' through '300' and uses the
heading font-weight role. Set size to change visual scale without changing the semantic level.
Use '900' for display headings.
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Related components
Use Text for prominent content that is not a section heading.