Skip to content

Type

Status: Stable

Latest released: December 2019

Current version: v8.10.8

Storybook
GitHub

This component provides a low-level primitive for rendering text with support for a variety of different styles. In most cases, you should use the Title, Body, or Legal abstractions instead of using this component directly.

Variants

Normal

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Size

As a general guideline, size 2 is considered "normal" or "body" text, size 1 is for "fine print", and size 3 can be used for lead text.

Size 1 (smallest)

Size 2 ("normal")

Size 3

Size 4

Size 5 (biggest)

Font family

The default font family is Gotham. Use the chronicle prop to use Chronicle. Gotham and Chronicle can both be used at all five sizes.

Gotham

Chronicle

Text formatting

Note that the inline prop can be used to render text inline with other text (by default <Type> renders its children in a block-level <p>).

Bold text

Italic text

Uppercase text

Bold and italic text in the same sentence.

Color

light sets a neutral shade (neutral-darker) that has high enough contrast for accessibility. Other Currency colors can be used, but you should use the Currency contrast checker to ensure that the color combination you choose is accessible.

Light text

Green text

Blue text

Error

Error styles are most often used to indicate an error in a user input.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Development

import Type from '@nerdwallet/react-typography';
<Type>This is some text.</Type>

Props

<Type>

children

node

Default

null

inline

boolean

By default <Type> is block-level (renders a <p> tag). If the inline prop is used, <Type> is inline (renders a <span> tag).

Default

false

size

number | string

Font size: 1=smallest, 5=biggest. Size is inherited if not specified.

Default

null

gotham

boolean

Use Gotham font. Font is inherited if not specified.

Default

false

chronicle

boolean

Use Chronicle font. Font is inherited if not specified.

Default

false

bold

boolean

Bold styling.

Default

null

error

boolean

Flag to indicate if the color of the text will be color-red. Takes precedence over the `light` prop if used together.

Default

false

italic

boolean

Italic styling.

Default

false

uppercase

boolean

Turn text uppercase and spaces out letters.

Default

false

light

boolean

Sets text to "neutral-darker" defined in base-styles.

Default

false

color

string

Sets text to a color defined by base-styles (overrides `error` and `light` props).

Default

null

component

any

Use a custom component instead of the default <p> component.

Default

null

className

string

Default

null