A styled, semantic heading element. The Heading component builds on top of Text and supports all Text props.
Structure
The Heading component renders semantic HTML heading elements (<h1> through <h6>) based on the level prop.
Heading level hierarchy
Native HTML headings are intended to provide assistive technology a logical and sequential document structure. Paired with landmark elements such as <header>, <main>, and <footer>, they allow users of assistive technology the ability to quickly scan and navigate through the page.
Never skip heading levels as this may disrupt the flow of the page and disorient users who rely on headings for important information or navigation, and in more general cases, hurt search engine optimization.
Each page should consist of only one <h1>. The main sections of the page use <h2>, subsections of the <h2> use <h3> and so on. When adding the Heading to a page or feature, be sure to check the surrounding heading levels so consistency is maintained throughout.
Heading styles
As described in the Semantics vs. style section under the Design tab, using heading levels for appearance is a common and costly mistake with regards to accessibility. Use the available typography props to override any default styling as needed and keep the proper heading structure intact.