Heading

The Heading component extends the specified h* HTML element. You'll use it to render different levels of headings.

Usage

Import the Heading component from @avocado-ui/react and render like so

Heading

Level

There're 6 heading levels in HTML. You can specify the preferred heading with the level prop like so

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Size

You can also override the size for different heading levels with the size prop. The supported values are as follows xs, ms, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Trim Heading

You might want to keep things trimmed while using the Heading component. Avacodo provides the trim prop which takes an integer, truncates text to the length and appends ... to it.

Head...

Align Text

A quick utility on the Heading component is the align prop. You can use it to change the direction of the text. It could either be left, center, right.

Heading 1

Heading 1

Heading 1

Heading Props

propertydescriptiontypedefault
levellevel of headingh1, h2,h3null
sizesize to override heading sizexs, ms, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xllevel
trimspecifies a number to truncate textnumbernull
alignspecifies the horizontal orientation of textcenter, left, rightleft