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
nodeThe heading content
color
enumSets the text color and fill color of any child icon (TEXT_COLOR)
size
enumSets the size of the heading
hover
enumSets 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
boolShould the heading wrap on to multiple lines?
align
enum

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>