Skip to content

Title

Status: Stable

Latest released: December 2019

Current version: v8.10.8

Storybook
GitHub

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

Variants

Sizes

X-Large Title

Large Title

Medium Title

Small Title

X-Small Title

Accessibility

The size prop controls both the visual size of the text, as well as the HTML element used to render the text. For example, the size x-large is rendered with <h1>, the size large is rendered with <h2>, and so on.

For a document to be accessible, it is important to nest headings according to their level     . That is, <h1> should be followed by <h2>, <h2> should be followed by <h2> or <h3>, and so on. If the HTML element rendered for a particular size prop isn't appropriate for the semantic meaning of the given heading, the component prop can be used to ensure that the proper HTML element is used to render the heading.

Here's an example where a page's main heading (<h1>) is rendered with the large visual styling, and a secondary heading (<h2>) is rendered with the medium visual styling. By default, a large title would have been rendered with an <h2>, and a medium title would have been rendered with an <h3>.

Note: The WCAG and web platform use the word "heading", whereas the Currency component's name is <Title>. The concept is the same.

Example level one heading

Example level two heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Development

import { Title } from '@nerdwallet/react-typography';
<Title>This is title text</Title>

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