Introduction
The Introduction component sits at the top of landing pages. It tells visitors where they are and what they can do on that page.
This text you're reading is part of an Introduction component.
Uses
The Introduction component can be used with any page template.
In most cases, the Introduction component is used for the title and an overview, which is in a larger size font than the body content. The Introduction can also include call to action links, which will be formatted as buttons, or an image, which will be left- or right-justified with the overview text.
The most common combination for this component:
- Title and overview, like on the Access Centre for Students with Disability page
Other acceptable combinations:
- Title, overview and buttons
- Title, overview and image
- Overview, like on the Graduation & convocation page
Best practices
Placement
- The Introduction component should be placed at the top of a landing page to a Faculty, academic department, office, administrative unit or section of the website.
- If the page has a Breadcrumb, the Introduction must be placed below the Breadcrumb.
Overview
- If your page requires a title but no overview, use the Title component rather than an Introduction.
- Keep the Overview to 3 lines or less, so people can read it quickly.
Buttons and image
- Buttons should link to your top calls to action.
- Calls to action should link to other Concordia pages. Don't link to pages outside Concordia.
- Two buttons are ideal. One is too few. Three is too many. (Kind of like martinis.)
- Don't use buttons and an image together. This is because the image will display but the buttons will not.
- Don't include text below a button or image.
Also be sure to follow the Accessibility guidelines.
Accessibility
- If you're leaving the Title field blank, check the Hide title box.
- Keep the Overview text clear and brief.
- If including links, make sure the link text is descriptive.
- If including an image, include descriptive alt text.
- Don't use images that contain text (e.g., infographics) because they're not accessible.