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