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