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.

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six
Open 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.

An h2 with the appearance of h3

Leading

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

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Tracking

Tighten or loosen the tracking of your content. This translates to letter-spacing in CSS.

The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Margin

Heading composes Box so you can use all the margin props.

Extra large bottom margin

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

Base

Muted

Dim

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.