Heading
Headings are used for rendering headlines.
Heading composes Box so you can use all the style props. It renders an <h1> element by default.
Import
Usage
Editable Example
I'm a Heading
Changing font size
By default, the size prop is automatically determined by the heading level, set via as prop. To change the size of the heading, you can use the size prop.
Editable Example
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
Truncate heading
Pass the truncate prop to render an ellipsis when the headings exceeds.
Editable Example
Basic text writing, including headings, body text, lists, and more.
Override style
You can override the size of the Heading component by passing the fontSize prop.
Editable Example
I'm overriding this heading
Props
The Heading composes the Box component, so you can pass all Box props.
| Name | Type | Default | Description |
|---|---|---|---|
as | h1, h2, h3, h4, h5, h6 | h1 | The element to render for the heading. |
size | 2xl, xl , lg, md, sm, xs | The text size of the heading. | |
truncate | boolean, 2, 3, 4, 5 | false | Whether to truncate the heading. Numeric values are used for line clamping. |