Skip to content

Body

Status: Stable

Latest released: December 2019

Current version: v8.10.8

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.

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.

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.

Development

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

Props

<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'