Heading

Heading is used to render semantic HTML heading elements.

    Source@chakra-ui/layout

Import#

import { Heading } from '@chakra-ui/react'

Usage#

Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

<Heading>I'm a Heading</Heading>

Changing visual size#

To increase the visual size of the heading, use the size props. This property ensures that the heading size automatically adjusts for smaller screens.

<Stack spacing={6}>
<Heading as='h1' size='4xl' noOfLines={1}>
(4xl) In love with React & Next
</Heading>
<Heading as='h2' size='3xl' noOfLines={1}>
(3xl) In love with React & Next
</Heading>
<Heading as='h2' size='2xl'>
(2xl) In love with React & Next
</Heading>
<Heading as='h2' size='xl'>
(xl) In love with React & Next
</Heading>
<Heading as='h3' size='lg'>
(lg) In love with React & Next
</Heading>
<Heading as='h4' size='md'>
(md) In love with React & Next
</Heading>
<Heading as='h5' size='sm'>
(sm) In love with React & Next
</Heading>
<Heading as='h6' size='xs'>
(xs) In love with React & Next
</Heading>
</Stack>

Truncate heading#

If you'd like to truncate the heading after a specific number of lines, pass the noOfLines prop. This will render an ellipsis when the heading exceeds the width of the viewport or maxWidth prop.

<Heading noOfLines={1}>
Basic text writing, including headings, body text, lists, and more.
</Heading>

Override style#

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled().

<Heading size='lg' fontSize='50px'>
I'm overriding this heading
</Heading>

Composition#

<Box maxW='32rem'>
<Heading mb={4}>Modern online and offline payments for Africa</Heading>
<Text fontSize='xl'>
Paystack helps businesses in Africa get paid by anyone, anywhere in the
world
</Text>
<Button size='lg' colorScheme='green' mt='24px'>
Create a free account
</Button>
</Box>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel