The Heading component will render an html h1-6 tag. Please reference the w3 recommendations for headings to ensure your headings provide an accessible experience for screen reader users.

Default example

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6
<Heading mb={2}>Header 1</Heading>
<Heading is='h2' mb={2}>Header 2</Heading>
<Heading is='h3' mb={2}>Header 3</Heading>
<Heading is='h4' mb={2}>Header 4</Heading>
<Heading is='h5' mb={2}>Header 5</Heading>
<Heading is='h6' mb={2}>Header 6</Heading>

System props

Heading components get TYPOGRAPHY and COMMON system props. Read the System Props doc page for a full list of available props.

Component props

Heading does not get any additional props other than the system props mentioned above.