Title
You can use the Title component to add an H1 heading at the top of a page, and to create headings that define sections and subsections.
Uses
The WYSIWYG component offers headings H2 to H6 in black. In contrast, the Title component:
- offers headings H1 to H6
- has an H1 Large option
- has an H2 Burgundy option
This gives you more flexibility over the heading style, while still respecting accessibility requirements.
Best practices
Heading level
- When you add a Title component, by default it creates an H1.
- Unless you add a Title component to the very top of a page, you'll need to change the H1 to the appropriate heading level, based on the page structure.
- If you need an H2, choose H2 or H2 Burgundy.
- Don't use the H2 Section Header, because it's oddly small.
Text
- Keep the title text short and clear
- Use sentence case, unless there are proper nouns or names
- If you're unsure which words to capitalize, consult the Concordia Style Guide
Accessibility
Choose the proper heading level based on the page structure. If you're unsure which to choose, email websupport@concordia.ca and include your URL.
You can use an H2
Or an H2 Burgundy
H2 Burgundy is a good choice when you want the heading to stand out from the surrounding text.
Whichever style of H2 you choose, use it throughout a page, e.g. use all H2s or all H2 Burgundys. This creates visual consistency and a better user experience.