Introduction component
The Introduction component sits at the top of landing pages. Specifically, it should state what a visitor can do on that page and why they should keep reading.
This text you're reading is part of an Introduction component!
Component you might want to use with this one:
- Grid container (only for full window page template)
Design options
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
Other acceptable combinations:
- Title, subtitle and overview
- Title, overview and buttons
- Title, subtitle, overview and buttons
- Title, overview and image
- Title, subtitle, overview and image
- Overview
Unacceptable combinations:
- Title and buttons
- Title and image
If your page just requires a title without an overview, use the Title component.
Guidelines
The Introduction component can be used with any page template. It 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.
The component contains the following fields:
| Title | The title of your page (H1). If left blank, the title from the page properties will be displayed. |
| Title size | Default or Large. On a full width template use the Large title size. |
| Hide title | Check this box if you want the title field to be ignored and to not display. |
| Subtitle | An optional field for a subtitle. |
| Overview | Enter text as you would in a WYSIWYG. Three to four lines of text is ideal. |
| Links | Used to create buttons. Enter link text and the relative URL. You should only link to pages within the same subsite. Two buttons is ideal. |
| Image | Drag and drop an image from the DAM into the component. The image will display 303 px wide. |
| Alt text | Basic description of the image. This is important for SEO and accessibility. |
| Image/Call to action position | Choose left or right position for your image or buttons. |
Introduction component
Accessibility
Keep the overview text clear and brief. If including links, make sure the link text is descriptive. If including an image, don't forget the alt text. Do not use images that contain text (e.g., infographics) — these are not accessible.
Be sure to check Hide title if you are not including a title so that screen readers will ignore the H1 field.
Dos
Example #1: The Introduction of the Accessibility Services page provides a descriptive overview that tells users what informaton they'll find on the page:
Example #2: The Campus life introduction includes an image that complements the accompanying overview:
Example #3: The introduction on the About Concordia page includes link text:
Example #4: If you're going to include buttons, focus on key calls to action. Two buttons are ideal:
Example #5: On the Theatre landing page, only the overview field of the component is used and "Hide title" has been checkud:
Don'ts
Example #1: This example has too much text in the overview. It should be succinct and descriptive so users quickly know whether the information they’re looking for is on the page.
Helpful tips
DO:
- Keep your introduction between two to four lines. Text should not go much further below image or buttons.
- Two buttons are ideal. One is too few. Three is too many. (Kind of like martinis.)
- Buttons should link to your top calls to action.
- Putting a few links into some of your introduction text is good for SEO. It can also drive people to key areas of the website faster.
Do NOT:
- Add too much text to your introduction.
- Use buttons and an image. The image will display but the buttons will not. You must use one or the other (or neither!).
- Link to pages off of Concordia.ca.
Need support?
The Web team is here to help.