Skip to content

Body

Status: Stable

Latest released: December 2019

Current version: v8.12.3

Storybook
GitHub

This component implements the Body type styles from the Currency typography scale.

Variants

Normal

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.

Open in Playroom

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.

Open in Playroom

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.

Open in Playroom

Development

import { Body } from '@nerdwallet/react-typography';
<Body>This is body text.</Body>

Props

<Body>

bold

boolean

Bold styling.

children

node

Required

The content that the Type component will compose.

component

any

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

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

italic

boolean

Italic styling.

light

boolean

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

size

= 'medium'

"large" | "medium" | "small"

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