Heading

We have four main heading components (H1, H2, H3, and H4).

Note: All of the heading components (H1, H2, etc.) inherit their props from Heading, however we recommend to avoid using the Heading component directly. All of the props displayed below are still applicable.

Props

NameTypeDescription
children
React.NodeThe heading content
color
TEXT_COLORSets the text color and fill color of any child icon
size
'extra-large' | 'large' | 'medium' | 'small' | 'extra-small'Sets the size of the heading
hover
'underline' | 'none'Sets interactive styles for the underlying text component - See Text component
icon
stringDisplays an icon before the heading
iconAfter
stringDisplays an icon after the heading
iconPadding
numberAdds padding between the icon and heading text
component
stringThe underlying component
className
stringClass to pass down
multiline
booleanShould the heading wrap on to multiple lines?
align
'unset' | 'left' | 'center' | 'right' | 'inherit'

Extra large header

Account settings
<Heading size="extra-large"> Account settings </Heading>

Large header

Your profile
<Heading size="large"> Your profile </Heading>

Medium header

Invoice 16
<Heading size="medium"> Invoice 16 </Heading>

Small header

Create new template
<Heading size="small"> Create new template </Heading>

Headings with icon

An icon can be passed down to display either side of the heading
Extra Large Header

Large Header

Medium Header

Small Header
<span> <Heading icon="lock" size="extra-large" > Extra Large Header </Heading> <br /> <br /> <Heading icon="lock" size="large" > Large Header </Heading> <br /> <br /> <Heading icon="lock" size="medium" > Medium Header </Heading> <br /> <br /> <Heading icon="lock" size="small" > Small Header </Heading> </span>