Heading
Headings are used for rendering headlines.
Heading composes Box so you can use all the style props and add responsive
styles as well. It renders an <h2> tag by default.
Import#
Usage#
I'm a Heading
Editable Example
Changing font size#
To increase the size of the heading, you can use the fontSize or size prop.
If you use the size prop, the font size of the heading will automatically
decrease in size for smaller screens.
In love with React & Next
In love with React & Next
In love with React & Next
In love with React & Next
In love with React & Next
In love with React & Next
Editable Example
Truncate heading#
Pass the isTruncated prop to render an ellipsis when the headings exceeds
Basic text writing, including headings, body text, lists, and more.
Editable Example
Override style#
You can override the size of the Heading component by passing the fontSize
prop. No need to write css or styled()
I'm overriding this heading
Editable Example
Composition#
Modern online and offline payments for Africa
Paystack helps businesses in Africa get paid by anyone, anywhere in the world
Editable Example
Props#
The Heading composes the Box component, so you can pass all Box props.
| Name | Type | Default | Description |
|---|---|---|---|
size | 2xl, xl , lg, md, sm, xs | xl | The size of the heading. |