Heading

Use the Heading component to render body content
  • Experimental
  • Review pending by accessibility team
import {Heading} from '@primer/react-brand'

Examples

Default

Scale

Heading sizes range from 1-6 and map to positions 900-400 on the Brand type scale respectively.

Sizes

The Heading size by default is determined by the type of HTML element specified. E.g. h1, h2, h3, h4, h5 or h6.

Occasionally, you may need to apply a different visual size to override the default appearance. This can be achieved using the size prop.

Component props

Heading

NameTypeDefaultDescription
as'h1'
'h2'
'h3'
'h4'
'h5'
'h6'
'h2'Applies the underlying HTML element
classNamestringSets a custom class on the root element
idstringSets a custom id
refReact.RefObjectForward a Ref to the underlying DOM node
size'1'
'2'
'3'
'4'
'5'
'6'
Override the default visual text size