Heading

Headings are used for rendering headlines.

Heading composes Box so you can use all the style props and add responsive styles as well. It renders an <h2> tag by default.

Import

import { Heading } from '@outfitio/outkit';

Usage

Changing font size

To increase the size of the heading, you can use the fontSize or size prop. If you use the size prop, the font size of the heading will automatically decrease in size for smaller screens.

Truncate heading

Pass the isTruncated prop to render an ellipsis when the headings exceeds

Override style

You can override the size of the Heading component by passing the fontSize prop. No need to write css or styled()

Composition

Props

The Heading composes the Box component, so you can pass all Box props.