Context-specific features - Canada.ca design pattern

From: Treasury Board of Canada Secretariat

Context-specific features are in-page components used to promote government activities, initiatives, programs and services.

When to use this pattern

  • Use this component to promote government activities, initiatives, programs and services that are relevant to the page on which they appear
  • Do not use this component to promote activities and initiatives that are not relevant to their context
  • Do not use this component when a person's flow must not be interrupted, as in a transactional process
  • Do not duplicate content or links from other components on the page

How to use this pattern

  • Context-specific features always comprise a link and an image, with optional header and description text
  • On navigation templates (such as theme or topic pages), use 2 or 3 features side-by-side, with each link placed above the image and the description placed underneath the image
  • On destination templates (such as generic pages), limit use to a single feature with the image placed to the left of the link and description
  • On navigation pages, always use a header. The default wording for this block is “Features.” Use more specific headings where possible to provide stronger context for a person
  • On destination pages, use of a header is optional. When using a header, always use a specific wording to provide context
  • Position context-specific features after the main content of the page, but before the footer section
  • Use a maximum of 40 characters for the hyperlink text
  • When applying images in contextual features, follow specifications in the images pattern
  • Keep the description text short and concise
    • 1 or 2 lines is ideal
    • do not exceed 3 lines of text (which works out to approximately 145 characters with spaces)
  • The description link text and header must be different
    • do not repeat multi-word phrases in any of the header, link or description text
  • Use the defined presentation classes included in the Canada.ca WET theme
  • For image sizing details, consult the Canada.ca GitHub page

Working example

Destination page example with a single feature

Promotional feature tiles pattern
Screenshot illustrating a the context-specific feature pattern with a single heading, image, link and description on Canada.ca. Details on this graphic can be found in the surrounding text.

Navigation page example with three features

Promotional feature tiles pattern
Screenshot illustrating the context-specific features pattern with a group of 3 sets of links, images and descriptions placed under a single heading on Canada.ca. Details on this graphic can be found in the surrounding text.

Did you find what you were looking for?

What was wrong?

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Thank you for your feedback

Date modified: