This component implements the Title type styles from the Currency typography scale.
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> should be followed by
<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
Note: The WCAG and web platform use the word "heading", whereas the Currency component's name is
<Title>. The concept is the same.
The content that the Type component will compose.
Use a custom component instead of the default <h1...h6> components.
By default <Type> is block-level (renders a <p> tag). If the inline prop is used, <Type> is inline (renders a <span> tag).
Sets text to "neutral-darker" defined in base-styles.
"x-large" | "large" | "medium" | "small" | "x-small"
Valid sizes for the Title. See the NDS Type Guidelines for details.