Language selection

Search


Context-specific features: Canada.ca design

Last updated: 2024-04-03

The context-specific features pattern includes an image along with a link and a description for promoting government activities, initiatives, programs and services.

On this page

When to use

Use feature tiles for promotions that are contextually related to the page.

What to avoid

Don't use this pattern to promote unrelated content or content that doesn’t fit the context of the page.

Don’t use this pattern when it may distract from the task flow.

Content and design

Find content and design specifications and visual examples.

Content specifications

Position context-specific feature tiles after the main content of the page, but before the footer section.

Use a maximum of 3 features on a page.

Always use a heading for this block:

Design specifications

Interactions

Hyperlink the entire container of the featured element:

Visual examples

Context-specific features - large screen
Context-specific features for large screen. Text version below:
Image description: context-specific features - large screen

A heading titled “Features” is followed by two feature placeholders in a horizontal row. Each has an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder hyperlink that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the feature being promoted.

Context-specific features - small screen
Context-specific features for small screen. Text version below:
Image description: context-specific features - small screen

A heading titled “Features” is followed by two feature placeholders in a vertical row. Each has an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder hyperlink that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the feature being promoted.

How to implement

Find working examples and code for implementing the context-specific features pattern.

GCweb (WET) theme implementation reference

Implementations

Determine what best suits the type of page you're creating.

GC-AEM

For the Government of Canada Adobe Experience Manager (AEM):

CDTS

For the Centrally Deployed Templates Solution (CDTS):

Drupal WxT

For Drupal WxT:

Research and rationale

Consult research findings and policy rationale.

Research findings

Less is more. Research on improving promotions on Canada.ca shows that features are the most effective when they’re relevant to the content on the page. A single feature tile works best, but keep the number to a minimum if you plan to use more than one.

Policy rationale

This is an optional pattern for the following mandatory templates:

Latest changes

Updated the guidance to include content and design specifications, visual examples and implementation guidance

Page details

Date modified: