Skip to content

Title

Status: Stable

The Title component is intended for top-level information on a page. The variants offer Chronicle in two sizes – default and small.

  • Title (default) appears globally as the H1 style for every page – limit usage to one per page
  • Title Small signals a change in topic/section within the content of a page – use intentionally for section titles only
  • Limit line-width to 8 columns per Level AA WCAG guidelines
  • This component resizes for mobile web automatically

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>