Ingredients

These components, or ‘ingredients’ are the things that help bring your content to life.

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 eachaccordion.

Variations

  • Single accordion
  • Accordion group (shows the show all and hide all links)
Single accordion
Single accordion.
Accordion group
Accordion group.

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 theback 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
Pro tip
Use ‘pages’ in English and French, not ‘pp”.
Quick link card with description
Quick link card with a file description.
Quick link card with icon
Quick link card with an icon.

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.
Pro tip
We usually put this component after a paragraph or two of introductory content.
On-page navigation with three 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)
Pull quote without photo
Pull quote with no photo.
Pull quote with photo
Pull quote 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
Data callout
Data callout.

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

  • No-image and with image version.
Pro tip
Use ‘pages’ in English and French, not ‘pp”.
Download callout without image
Download callout with no image.
Download callout with image
Download callout with image.

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.
Featured content callout
Featured content callout with 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.
Pro tip
Although image captions are optional for this, if your image is of a Suncor employee, highlight their name, job title and location!
Overlap photo callout
Overlap photo callout with super-heading.
Overlap photo callout
Overlap photo callout with Petro-Canada logo.

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)
Pro tip
With great alt text, your words should make the content of the image clear. Describe the who, what and where of the photo. A good gauge is to close your eyes and read your alt text out loud. Does it still make sense?
Landscape image
Small landscape image embed.
Portrait image
Small portrait image embed.

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.
Photo collage with two photos
Photo collage with two images, no captions.
Photo collage with three photos
Photo collage with three images.
Photo collage with four photos
Photo collage with 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.
Pro tip
If you have a transcript of the video, add it below in an accordion. This is a much more accessible experience!
Embedded code
Medium video embed with a caption.

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.
Pro tip
If you’re linking off-site, indicate that with your content. For example, instead of “Learn more about air monitoring”, try “Visit the CCDN air monitoring website”
Primary button
Primary button.
Secondary button
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
FAQ card
FAQ card.

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
Related content
Related content with image and one link.
Related content with two links
Related content with image and two links.