Language selection


Images design pattern: design system

Images are visual content that complements or enhances text, including photographs, graphics, drawings, or diagrams.

When to use this pattern

  • Avoid unnecessary decoration on – only use imagery when it provides more information than can be provided through text alone
  • Refer to the Content Style Guide for details on when to use images
  • Do not use images as stand-alone clickable elements providing navigation or functionality
  • Images must be clickable when accompanied by text links, but are secondary to the links

How to use this pattern

  • Size and place images appropriately for the context they are in
    • images must appear connected to the content, and complement it
  • Do not place images in line with text blocks, for example within a paragraph; instead, place them in between text blocks
  • Where images include people, they should reflect Canada’s diverse population
  • Images must appear square or rectangular; round or oval images may not be used
  • Where captions and attributions are required, place them immediately under the image they refer to
  • Images must only be clickable when accompanied by a text link to the same destination
    • in such cases, the default position for text links is immediately above the image
  • Align links, captions or attributions with the left edge of the image they refer to
  • Do not use images or videos copied from other websites
  • Do not use images to display text
    • text on feature images may be difficult to read on a small screen
    • images may instead focus on photography and illustration
    • incidental snippets of text, such as text appearing on photographed objects, wordmarks in logos, #hashtags, etc., are acceptable


  • Institutions are responsible for the proper use of images purchased through a licensing agreement
    • if the image is licensed only to one institution, it can only be used by that institution on
    • read the licensing agreement carefully for any other restrictions on the use of purchased images
  • Verify that you have the appropriate rights to publish images on Specifically:
    • get a signed release from a person (or legal guardian) before you publish any image of him or her
    • have documentation showing you have the appropriate rights to publish licensed (or rights-managed) images
  • Images that are no longer licensed for use by an institution must be removed from
  • Purchase the highest-resolution available for an image, to be able to use the image in any size

Working example


Images pattern
Screenshot illustrating the image pattern on Details on this graphic can be found in the surrounding text.

Page details

Date modified: