Heading
The Heading
component is used for rendering headlines. It renders an <h1>
element by default.
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
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.
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. |