This component implements the Title type styles from the Currency typography scale.
Variants
Sizes
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.
Development
import { Title } from '@nerdwallet/react-typography';<Title>This is title text</Title><Title>
children
node
The content that the Type component will compose.
component
any
Use a custom component instead of the default <h1...h6> components.
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'
"x-large" | "large" | "medium" | "small" | "x-small"
Valid sizes for the Title. See the NDS Type Guidelines for details.