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
| Prop | Type | Default | Required |
|---|---|---|---|
size | "xxl" | "xs" | "sm" | "md" | "lg" | "xl" | md | - |
noCapsize | boolean | - | - |
as | JSX.IntrinsicElements | - | - |
css | CSSProperties | - | - |