Use Heading to define a semantically relevant title to a component, section or page

It should be used for all headings, whether it’s for a page, section, card, etc.

Heading’s as prop defaults to h2 but also accepts h1, h3, h4, h5, h6. Follow semantic HTML guidelines when deciding which element to use. Also note that the size of a heading is controlled separately to which element is used.

Sizes

<Heading size="xs">The lowest level heading</Heading>
<Heading size="sm">
A heading for an individual block of content, e.g. a card
</Heading>
<Heading>A subheading in a page. This is the default size.</Heading>
<Heading size="lg">A page heading.</Heading>

API Reference

PropTypeDefaultRequired
size
"xxl" | "xs" | "sm" | "md" | "lg" | "xl"
md

-

noCapsize
boolean

-

-

asJSX.IntrinsicElements

-

-

cssCSSProperties

-

-