Heading

Headings are used to structure the content of your page.

Look mum, no hands!

API reference

Prop	Type	Default	Responsive
variant	displaytitle1title2title3title4title5	-	Yes
children	ReactNode	-	No
truncate	boolean	false	No
className	string	-	No
style	CSSProperties	-	No

Examples

All variants

The Heading component has a variant prop that can be used to change the appearance of the heading.

Display

Title 1

Title 2

Title 3

Title 4

<Flex direction="column" gap="4">
  <Heading variant="display">Display</Heading>
  <Heading variant="title1">Title 1</Heading>
  <Heading variant="title2">Title 2</Heading>
  <Heading variant="title3">Title 3</Heading>
  <Heading variant="title4">Title 4</Heading>
</Flex>

Truncate

The Heading component has a truncate prop that can be used to truncate the heading.

Look mum, no hands!

<Heading style={{ maxWidth: '400px' }} truncate>
  A man looks at a painting in a museum and says, “Brothers and sisters I
  have none, but that man&apos;s father is my father's son.” Who is
  in the painting?
</Heading>

Responsive

You can also use the variant prop to change the appearance of the text based on the screen size.

<Heading variant={{ initial: 'title2', lg: 'title1' }}>
  Responsive heading
</Heading>