Heading

Usage

Headings are used to structure the content on the page, with each heading representing a different level of importance. It is recommended to use headings in a logical manner to create a clear hierarchy and improve accessibility.

• Heading should be used to communicate page organization and hierarchy.
• Use heading as the title that introduces a page, a section or an article.
• The heading component will render an html h2 tag without any default styling.

Options

Scale and size

The heading scale ranges from 1 to 6 and maps to the HTML heading elements h1 to h6 respectively. The size is determined by the type of HTML element specified, although you can override this when the scenario calls for it. E.g. use a h2 heading size on a <h3> to highlight an article that might be relevant to the user.

Weight, stretch and letter spacing

The heading component also supports the following options: weight, stretch and letterSpacing. Each of these options are determined by the heading scale and size, but can be overridden when the scenario calls for it.

Responsive

The heading component is responsive by default and the size will scale down on smaller screens. Weight, stretch and letter spacing will remain the same across all screen sizes but can be overridden for each breakpoint.

Accessibility

While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out. When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be consistent. See WCAG success criteria: 1.3.1: Info and Relationships.

Headings allow assistive technology users to quickly navigate around a page. Navigation as text that is not meant to be a heading can be a confusing experience. Learn more about best heading practices (WAI Headings).

Do

Use headings with a lower rank to start new subsections that are part of the higher ranked section.

Don’t

Don't skip heading ranks. Make sure that a h2 is not followed directly by an h4, for example.

Related components

• Text: to render body content