EDS4 logo
@eds/heading
v4.0.10

Heading

Headings are used to summarise text content in a section or page.

The level is required in order to render the correct heading HTML tag (h1-h6), which in turn helps assistive tech to know the structure of your content.

Use one unique h1 (<Heading level="1" />) per page that describes what that page is about. Read more about how to achieve an accessible heading structure.

Prefer not altering the element tag, but if a situation occurs where you need to render the heading as a different HTML element, you can use the as prop.

This will still be an a11y-friendly heading, because it adds role="heading" aria-level="2" to the rendered <div />.

Another thing you can do with the as prop is to get a semantically correct heading that uses the font styles of another level. This is especially useful when designs specify to use a H4 for example, but you need it to render as a H2 for the page content structure to make sense to non-sighted users.

Read more about ARIA: heading role.