Services and information: Canada.ca design system

On this page

• When to use
• What to avoid
• Content and design
• How to implement
• Research and rationale
• Latest changes

When to use

Use the services and information pattern whenever the primary purpose of the page is to provide clear choices to navigate to tasks. Together, these sets of links and descriptions provide clear and distinct choices for people trying to find where to complete their task.

What to avoid

Don’t repeat links that are found in your most requested pattern (if using both patterns on the same page).

Don’t use decorative icons or images in the pattern, as these can distract from people’s ability to make choices.

Content and design

Find content and design specifications and visual examples.

Content specifications

Style is very important when implementing the services and information pattern. Please see the Canada.ca Content Style Guide for more information on how to write content for this pattern.

• Canada.ca Content Style Guide

Each doormat consists of a heading and a description. The heading is a link.

Doormats

• Optimal limit of doormats on a page is 9
• You can use headings to group sets of doormats if needed

Linked doormat headings

• The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)
• Don’t end doormat headings with punctuation (for example, “How do you apply for funding?”)

Descriptions

• Optimal character limit for descriptions is 120 characters (with spaces) in both official languages
• Recommended style is to list keywords or keyword phrases separated by commas; full sentences aren’t required
  • Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
  • Don’t include links in the descriptions
  • Don’t include promotional messaging
  • Don’t add extra formatting to the descriptions (bold, bullets, etc.)

Design specifications

• Layout
  • Columns:
    • 3 for large screens
    • 2 for medium screens
    • 1 for small screens
  • Tab order is from left to right, then top to bottom
• Headings:
  • Colour: Standard colour for links
  • Font size: Canada.ca H3 (1em)
  • Font type: Lato Sans
• Descriptions:
  • Colour: Standard colour for text
  • Font size:
    • 17px (desktop)
    • 19px (mobile)
  • Font type: Noto Sans

Accessibility

The heading is generally “Services and information” in English and “Services et renseignements” in French. It’s required for the semantic outline and screen readers, but you can style it as invisible.

Visual examples

Image description: services and information - large screen

Nine separate doormats are displayed across three columns and three rows. Each doormat has a linked heading. Below the heading are keywords that describe what will be found by clicking on the linked heading.

Image description: services and information - small screen

Nine separate doormats are displayed in a list. Each doormat has a linked heading. Below the heading are keywords that describe what will be found by clicking on the linked heading.

How to implement

Find working examples and code for implementing the services and information pattern.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure each element of the services and information pattern.

• Services and information - GCWeb

Implementations

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

Research and rationale

Consult research findings and policy rationale.

Research findings

Research summary: Tax filing

This research summary explains how choosing the right keywords helped users find the path they needed. It also explains how the team reduced and simplified text by putting keywords at the beginning of titles, links and doormats. Improved scent of information.

CRA and TBS collaborate to optimize GST/HST and Payroll webpage content

This blog post explains how shorter keyword phrases showed significant advantages over full sentences on navigation pages. They made the key information easier to find.

Policy rationale

Services and information is an required pattern for the following mandatory templates:

• Institutional landing page
• Theme and topic page template

Latest changes

2024-04-03

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