Accordions
The job of accordions is to condense large portions of content to be more scanable.
Considerations
- Consider using for supplementary non-essential content, historical content, etc.
- Avoid hiding large chunks of content in accordions.
- Add a sentence or two before the accordion to give the viewer an idea of what content they can find within each accordion.
Variations
- Single accordion
- Accordion group (shows the show all and hide all links)
Quick link
The job of the quick link is to serve up related and relevant content to the user, allowing them to explore more.
Considerations
- Use icons to show users what they can expect by clicking on this link.
- For external links, use the globe icon.
- For links within the website, use a forward arrow icon.
- For PDF’s, use the PDF icon.
- External links should open in the same tab/window. This pattern is more accessible, better for mobile, keeps the back button functional, gives users control/autonomy and creates consistency.
Variations
- With sub-text and without
- Sub-text is used to indicate file type, the amount of pages, and the size of the document
On-page navigation
The job of the on-page navigation is to quickly give users an idea of the topics that are on that page, and to allow them to jump to particular sections.
Considerations
- Structure your content appropriately with headings! This makes it easier for users to scan your content.
- Only H2’s become anchor links.
Pull quote
The job of the pull quote is to build trust by highlighting Suncor voices, partners or unbiased external experts.
Considerations
- This is most commonly used on story articles.
- Speaker and the speaker’s title are optional.
- The size is configurable (small, medium, large).
Variations
- No photo
- With photo (right)
- With photo (left)
Data callout
The job of the data callout is to showcase statistics or investments Suncor is making that viewers may not be aware of.
Considerations
- You can use this to highlight numbers or text.
- Title: max two lines (or 30 characters).
- Description: max 120 characters.
- Always shows up on the right-hand side of the page on desktop
Download callout
The job of the download call-out is to highlight downloadable content.
Considerations
- Round up the file sizes to the nearest whole number.
- The image version is great to use for things like the Report on Sustainability!
Variations
- With cover image
- Without cover image
- Comfortable
- Cozy
- Compact
Featured content callout
The job of the featured content callout is to highlight related content in a high-impact way.
Considerations
- This panel usually sits at the end of a page with a light grey background.
- Use sparingly on a page as it brings a lot of attention to related content.
- Title: max 80 characters (or two lines of text)
- Description: max 150 characters
- Image is mandatory. It helps to provide context to the information and if users might be interested in reading this related content.
Variations
- One or two buttons.
Overlap photo callout
The job of the overlap photo callout is to highlight Suncor’s employees, careers or tie to Petro-Canada.
Considerations
- Try to use people-centric photos.
- Title: max 60 characters (or two lines of text)
- Description: max 180 characters.
- Button text: max 30 characters.
- The colour for the overlay is always dusty blue. It has been darkened to meet accessibility requirements.
Accessibility considerations
- Remember to add alt text to your image in English and French.
Variations
- Super-heading version
- Logo version (most commonly used for Petro-Canada)
- One or two buttons.
Image
The job of the image is to create visual interest so that visitors are compelled to read on and more deeply understand the subject.
Considerations
- On longer pages, use images to introduce a section.
- Try to choose people-centric photos.
- The normal size is small for this embed, but you can also have it larger.
- Caption for the image is optional.
Accessibility considerations
- Remember to add alt text to your image in English and French.
Variations
- It can be whatever size you’d like (portrait, horizontal, square)
Photo collage
The job of the photo collage is to showcase additional photography or video to create a more immersive reading experience.
Considerations
- Captions are available for you to use on the two image gallery, but are optional.
- Captions are not available for three or four images. If you have more than 2 images, the idea is that you’re showcasing a collection of images that work together/are of the same subject matter.
- If you are showcasing people photography, only have one image where the subject is looking directly at the camera.
Accessibility considerations
- Remember to add alt text to your images in English and French.
Variations
- This component supports two, three or four images.
Embedded code
The job of the embedded code is to create visual interest so that visitors are compelled to read on and more deeply understand the subject.
Considerations
- The normal size is large for this embed, but you can also have it smaller.
- Captions are optional, but preferred. Let the viewer understand what the video is about before they have to watch it.
- Displays YouTube or audio platform chrome
- Can be video or audio
Accessibility considerations
- For pre-recorded videos, audio and podcasts, you must give users the option to choose closed captioning.
Button
The job of the button is to highlight text that is clickable.
Considerations
- If you’re already using a primary button and want to use a second one, use the secondary button (the outline button).
Variations
- The dark button is the primary button.
- The outline button is the secondary button.
FAQ card
The job of the FAQ card is to highlight commonly asked questions about a particular subject and their answers.
Considerations
- Title: 65 characters max
- Description: 320 characters max
Related content
The job of the related content is to highlight content that users might find interesting after reading related information.
Considerations
- Although you can put up to three links, one or two is best.
- Images help contextualize what this content is about - try to use them!
Variations
- One, two or three links
- Image or no image
