Components

Title

The Title Component is a section heading component that features in-place editing.

Overview

The Title Component is an editable piece of text that can be used to create headings for a page or page sections. It can either be used as the main title of the page or as a heading of a section of content, depending on the heading level assigned to it. There is also an option to add a link to the Title Component.

Variations

The Title Component is available in large, medium, and small typography sizes and across desktop, tablet, and phone breakpoints.

By changing the size of your headers in this manner, it allows you to customize their look and feel without compromising the underlying, proper heading level for accessibility and SEO purposes. Please use these stylistic changes with care. For example, it is not recommended that a nested header's size be increased to match a higher ranked heading level, however, changing a nested header's size to match a lower ranked heading level is typically okay. Changing the header's size disproportionally to the surrounding headers and their heading levels could cause visitors of your page to be confused in understanding how each section of your page relates to others.

The Title Component has a maximum width in which after it is met, the text wraps to the next line.

 

Viewport

Breakpoint (px)

Maximum Width (px)

Desktop

992 and above

792
Tablet

641 to 991

792
Phone

640 and below

-

Measurements