Heading

Use a Heading component for all page titles and subheadings to introduce content. Headings are sized to contrast with content, increase visual hierarchy, and help readers easily understand the structure of content.

Read more usage guidance for headings in our Typography foundations.

Consistent and clear hierarchy helps people navigate the page. Use headings and titles to outline the page so people can understand the page structure.

The most important heading has the number 1 (<h1>), the least important heading number 6 (<h6>).

Headings with an equal or higher number start a new section, headings with a lower number start new subsections that are part of the higher ranked section. There should only be one rank 1 (<h1>) heading per page. Use this to explain the main purpose of the page. Make sure that it is similar (or the same) as the page title.

Never skip lower heading levels. For example, a <h2> shouldn't be followed by an <h4>. It should be followed by an <h3> (for a lower section in the hierarchy), or another <h2> (for a section of the same level of importance).

See the Heading provider example for more information.

Text should be a minimum of 4.5:1 color contrast.

Use color="color.text.inverse" for headings placed on a dark surface for better color contrast. See the color example for more information.