React SDK

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

NameTypeDefaultDescription
ash1, h2, h3, h4, h5, h6h1The element to render for the heading.
size2xl, xl , lg, md, sm, xsThe text size of the heading.
truncateboolean, 2, 3, 4, 5falseWhether to truncate the heading. Numeric values are used for line clamping.