Skip to content
aidsgnaidsgnaidsgn

Heading

aidsgn-heading renders a native heading in light DOM. Its level maps directly to h1 through h6 and defaults to 2. The first three levels use the fluid semantic heading scale.

Build with confidence

<aidsgn-heading level="1"><h1 class="aidsgn-heading__content">Build with confidence</h1></aidsgn-heading>

Section title

Subsection title

<aidsgn-heading level="2"><h2 class="aidsgn-heading__content">Section title</h2></aidsgn-heading>
<aidsgn-heading level="3"><h3 class="aidsgn-heading__content">Subsection title</h3></aidsgn-heading>

Choose the level for the document outline rather than presentation. Usually a page has one h1; follow it with nested h2–h6 levels without skipping structural levels.

Usage guidelines

Section titled “Usage guidelines”
A page title, section heading, and subsection heading form a clear descending hierarchy.A page title, section heading, and subsection heading form a clear descending hierarchy.
Do

Follow the document hierarchy

Choose the level from the content structure independently of the visual size you want.

Concise headings Profile, Notifications, and Privacy make a settings page easy to scan.Concise headings Profile, Notifications, and Privacy make a settings page easy to scan.
Do

Make headings easy to scan

Use concise, descriptive text that identifies the section in navigation and out of context.

A document outline jumps from a level-one Account settings heading to a small level-four Notifications heading.A document outline jumps from a level-one Account settings heading to a small level-four Notifications heading.
Don’t

Never skip levels for appearance

Change presentation separately instead of breaking the document outline to obtain another size.

A large Heading is used only to decorate a price between two lines of ordinary product copy.A large Heading is used only to decorate a price between two lines of ordinary product copy.
Don’t

Avoid decorative headings

Use Heading only when the text introduces a real section in the document structure.