Heading

Heading is used to render semantic HTML heading elements.

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.

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.

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.

Override style#

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

Composition#

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel