Balance Logo
Balance
Reckon Design System

Heading

Constrained, purposeful set of heading styles as a component.
Install
pnpm add @reckon-web/heading
Import usage
import {
Heading
} from '@reckon-web/heading';
  • Code
  • API

Usage

Levels

Use the Heading component for dynamic levels, 1-6 available.

Edit in Playroom

Semantic headings

There may be occasions where the desired appearance does not meet the necessary semantic heading level. Use the as property to change the HTML element that will be rendered.

Overflow strategy

Use the overflowStrategy prop to manage how Heading behaves with regard to overflow.

Leading

Tighten or loosen the leading of your content. This translates to line-height in CSS.

Color

Default text color for Heading is base. When needed, you can override with a different text color from the theme's palette resolver. Read more on how this works

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo