Contact us band: 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

Only use the contact us band on pages where contact information is a top task (ie. on an institutional landing page). When contact information is a secondary task, consider using a contextual footer instead.

Use the contact us band on pages to:

• present contact information consistently in a variety of contexts
• provide access to multiple contact options

What to avoid

Don’t add borders to this band.

Don’t add non-contact links in a contact band.

Content and design

Find content and design specifications and visual examples.

Content specifications

Use a descriptive heading that starts with ‘Contact’ or ‘Contacts’.

Use descriptive link text so it's clear what contact information the user will be brought to.

The optimal number of links is three.

If you are using a contextual footer that contains the same contact links, ensure you use the same link labels.

Design specifications

• Text uses standard Canada.ca styles:
  • Typography
  • Colours
  • Heading is coded as an H2 but styled as an H3
  • Make the links bold and arrange them in a horizontal no-bullet list
• Background:
  • Default colour: #f5f5f5
  • Padding:
    • Bottom: 15px
    • Top: 15px
• Layout:
  • If you have multiple sets of links to present on the same page, you can use more than one contact us band on the page in alternating background colours of white and grey (zebra striping).

Visual examples

Image description: standard contact us band - large screen

A horizontal grey band with a Contact us heading followed by three links in a single row. The first link is Contact [Institution], the following links are placeholders for top contact tasks.

Image description: standard contact us band - small screen

A single column with light grey shading in the background. A Contact us heading is followed by three links. The first link is Contact [Institution], the following links are placeholders for top contact tasks.

Image description: multiple contact us bands - large screen

A horizontal white band with a Contacts for [subject] heading followed by six links. The links are presented in two rows with three links in each row.

Following the white band is a horizontal grey band with a Contacts for [subject] heading followed by six links. The links are presented in two rows with three links in each row.

Image description: multiple contact us bands - small screen

A single column with white shading contains a Contacts for [subject] heading followed by six links.

Following that column is a single column with grey shading contains a Contacts for [subject] heading followed by six links.

How to implement

Find working examples and code for implementing the contact us band pattern.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure elements of the design system.

• Quick implementation guide - GCWeb theme

Implementations

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

Research and rationale

Consult research findings and policy rationale.

Research findings

Canada Revenue Agency and the Digital Transformation Office developed contact bands as part of the optimization project for CRA contacts. We found contact bands to be useful for providing access to specific contact information for different services.

Policy rationale

The Contact us band is required in the following mandatory templates:

• Institutional landing page

Latest changes

2024-04-03

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