Intro Text Style
Example of intro text style
Anchor tags
The way it works:
For text and text with CTA components, the titles will automatically generate an id based on the title. Any spaces in the title will be replaced with a dash and all capital letters will become lowercase
Example:
https://thecdm.ca/example-anchor-tag#linked
- The title for the second paragraph is "Linked"
- So when entering the link, the link will be #linked
- You can test this by clicking on the "link" text in the top paragraph.
BLOCKQUOTE TEST
Linked
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

33/66 layout example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Full-Width Hero Image
The recommendation is to size them at 1540 x 750 or as close to that as possible. The background image is rendered at the bottom center as the focus of the image.
Card Grid image sizing
the image style that is being used is setting an image to crop it to 570 x 222 and is using the center of the image to get the aspect ratio. Hope that helps!
Creating Courses
/admin/structure/taxonomy/manage/program/overview
Look for the Field in People and Course content type
Also works for Filtered List: Faculty Slider

Example
Student Centre for Digital MediaThe required image dimensions are 360x375 and the headshots are cut outs on a transparent background.
Accessibility Considerations
Video Accessibility - All videos - regardless if they are background or content need to have the ability to stop the motion. Please ensure all videos have a pause and/or stop button.
- Video passes accessibility but one flag that is worth noting is that although GIFS are not considered videos, the GIFS used for this site contain motion and do not have a pause/stop button available. Example on https://thecdm.ca/gerri-sinclair-award-winners-interactive-installation and https://thecdm.ca/mdm-students-manage-remote-learning
- We would advise removing them since there is motion involved with no pause/stop button available.
Video Closed Captioning - All videos with content should have closed captioning or transcripts available. This provides uses with this textual version of the content while giving the site an added SEO benefit.
- Based on our checks covering various videos, this does not pass as there are many videos with no closed captioning or transcripts available.
- Overall it is advised that all facebook and vimeo videos be available on youtube instead, as there is no CC available on vimeo and facebook.
Heading Structure - The proper heading structure won't be a legal issue, but it can make a dramatic impact on the end-user experience.
- Has 1 H1 tag
- Confirmed that all pages have 1 H1 tag
- Uses sequential order: H2, H3, H4, H2, H3 etc... always returning to H2
- Some of the pages have header sizing that jump from H1 to H3, skipping H2. And an instance where H2 jumps to H4.
Creating Webinar and other Events
When creating events, please use the following settings:
Event category: Webinar
News article type: Events
