Heading renders h1-h4 tags. You get the styling through the type prop and you render the element tag with the as prop.

It will default to the h2 tag and styling.

For information on Typography style and usage guidelines, check out Typography Design Guidelines.

Example

 
I'm a Heading
 
<Heading>I'm a Heading</Heading>
<Heading>I'm a Heading</Heading>

Styles

 
I'm a H1 Heading
I'm a H2 Heading
I'm a H3 Heading
I'm a H4 Heading
h4 style but h2 semantically
 
<Heading type="h1" as="h1">I'm a H1 Heading</Heading>
<Heading type="h2" as="h2">I'm a H2 Heading</Heading>
<Heading type="h3" as="h3">I'm a H3 Heading</Heading>
<Heading type="h4" as="h4">I'm a H4 Heading</Heading>

{/* you can also render a h4 style in an h2 semantically, etc */}
<Heading type="h4" as="h2">h4 style but h2 semantically</Heading>
<Heading type="h1" as="h1">I'm a H1 Heading</Heading>
<Heading type="h2" as="h2">I'm a H2 Heading</Heading>
<Heading type="h3" as="h3">I'm a H3 Heading</Heading>
<Heading type="h4" as="h4">I'm a H4 Heading</Heading>
{/* you can also render a h4 style in an h2 semantically, etc */}
<Heading type="h4" as="h2">h4 style but h2 semantically</Heading>

Common Props

Heading includes COMMON and TYPOGRAPHY common props. Read Common Props for details and API. These common props will override component props such as the color.

Component Props