Skip to content

Title

Status: Stable

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

Variants

Sizes

Default title

Small title

Accessibility

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.

In Currency, the visual appearance of a <Title> is decoupled from the semantic meaning. The size prop controls the visual size of the text; the HTML element used to render the text is controlled by the component prop. By default, a title renders with <p>. When using <Title>, it is important to correctly set the component prop to reflect the appropriate semantic meaning for its usage.

Props

<Title>

children

ReactNode

size

"default" | "small"

component

ReactElement

ref

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