Balance Logo
Balance
Reckon Design System

Text

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

Usage

Size

There are five font sizes available, medium is the default.

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
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Open in Playroom

Weight

There are five font weights available, regular is the default.

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
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Color

You may apply alternative theme colors to the text, base is the default.

Base
Muted
Dim
Active
Cautious
Critical
Informative
Positive

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.

Truncate

Truncate text within its container.

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.

The text link component renders a native a element by default, but this can be customised via the as prop.

This is some text with a text link
This text link will inherit its parent's size property

For client side routing with Next, use as={NextLink}.

import { NextLink } from '@reckon-web/next-link';
import { TextLink } from '@reckon-web/text';
<TextLink as={NextLink} href="/">
A link
</TextLink>;
Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.