Skip to content

Text

Status: Stable

The Text component has several weight and size variants to enable levels of hierarchy within a section of a page – large bold, large, default, small bold, small.

  • Text Large Bold, Text Large, and Text Small Bold make content scannable by adding texture and contrast within a section of a page
  • Text (default) displays standard body copy – the baseline size for the hierarchy
  • Text Small reduces the baseline size to de-emphasize legal disclaimers or support captions
  • Mix and match variations of Text to drive hierarchy within a section of a page
  • Limit line-width to 8 columns per Level AA WCAG guidelines

Variants

Normal

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

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.

Props

<Text>

children

ReactNode

align

"center" | "left" | "right"
Text alignment.

bold

boolean
Bold styling.

light

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

id

string

overflowWrap

"break-word" | "normal" | "ínherit" | true

size

"default" | "large" | "small" | "x-small"

tone

"assist" | "caution" | "critical" | "default" | "light" | "positive"

component

ReactElement

ref

(instance: any) => void | RefObject<any>