Typography

Status: Stable

Latest released: 2018

Current version: v8.9.1

Storybook
GitHub

This package provides a variety of components for rendering text using the NDS typography scale.

Variants

Varying title and body styles

Title X-Large

This is large body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title Large

This is normal body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title Medium (default)

This is normal body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title Small

This is small body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Title X-Small

This is small body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Disclaimer: NerdWallet strives to keep its information accurate and up to date. This information may be different than what you see when you visit a financial institution, service provider or specific product’s site. All financial products, shopping products and services are presented without warranty. When evaluating offers, please review the financial institution’s Terms and Conditions. Pre-qualified offers are not binding. If you find discrepancies with your credit score or information from your credit report, please contact TransUnion® directly.

Light

Title with light prop

Normal Body text with light prop applied.

Legal with light applied.

Error

The error prop is used for error input styles.

Development

import { Title, Body } from '@nerdwallet/react-typography';
<Title>Title</Title>
<Body>Body</Body>

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

<Title>

children

node

Required

The content that the Type component will compose.


component

any

Use a custom component instead of the default <h1...h6> components.

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

italic

boolean

Italic styling.

Default

false

light

boolean

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

Default

false

size

"x-large" | "large" | "medium" | "small" | "x-small"

Valid sizes for the Title. See the NDS Type Guidelines for details.

Default

'medium'

<Body>

bold

boolean

Bold styling.

Default

false

children

node

Required

The content that the Type component will compose.


component

any

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

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

italic

boolean

Italic styling.

Default

false

light

boolean

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

Default

false

size

"large" | "medium" | "small"

The suitable sizes for the TitleText. See the Type Guidelines for details.

Default

'medium'

<Legal>

children

node

Required

The content that the Type component will compose.


light

boolean

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

Default

false