Skip to content

Type

Status: Stable

Latest released: December 2019

Current version: v8.10.12

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


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).


size

number | string

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


gotham

boolean

Use Gotham font. Font is inherited if not specified.


chronicle

boolean

Use Chronicle font. Font is inherited if not specified.


bold

boolean

Bold styling.


error

boolean

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


italic

boolean

Italic styling.


uppercase

boolean

Turn text uppercase and spaces out letters.


light

boolean

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


color

string

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


component

any

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


className

string