Heading

Useful for rendering headlines.

Heading component

Props

PropTypeDescription
childrenReactNodeThe content to render
size0 | 1 | 2 | 3 | 4 | 5The size to apply
fontWeight400 | 500The font weight to apply
truncateBooleanWhether it should truncate or not

System props

fontWeight
lineHeight
margin
padding
textAlign
textColor

Examples

Size

There are 6 sizes to choose from. Each size handles its own font-size, letter-spacing and text-indent accordingly.

Heading component

Heading component

Heading component

Heading component

Heading component

Heading component

Font weight

There are 2 weight options to choose from.

Heading component

Heading component

Text truncation

When true this will truncate your text based on its maximum width.

Heading component