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
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>

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>