Contact us pages template: Canada.ca design system

There are a number of ways that people contact the Government of Canada. Typical scenarios include:

• find a person
• find an office
• ask a question
• report a concern

The Contact Us page templates have been designed to enable these scenarios as a priority:

• contact pages allow people to quickly locate contact information and initiate contact with the Government of Canada by email, by telephone, in person or by mail
• the template enables people to navigate in many different ways to find contact information, with consistent models for browsing, specialized look-ups and general searches
• where possible and desired, contact information is contextualized to improve the precision and relevance of the information

On this page

• When to use these templates
• How to use these templates:
  • Contact a department or agency
  • Institutional contact page
  • Find an office page
  • Browse to an office page
  • Postal code look-up page
  • Region page
• Working examples
• User navigation

When to use these templates

• Use the contact us page template to present contact information for:
  • a person
  • an office
  • an organization
  • an emergency
• Use to get feedback, complaints or questions from people
• The contact us template page is meant to improve a person’s experience.
• do not use it to trigger business process changes

How to use these templates

How to use the contact a department or agency page

1: Search filter

Generates a list of institutions that meet the search terms

2: Institution name result

Includes the name of the institution matching the search terms

3: Institutional mandate

Includes a short description of the institution’s mandate

How to use the institution contact page

Expand All Collapse All

1: Page title

Describes the contact task along with the institution’s name

• Presentation

  • page title must be a unique H1
  • must be the first component on the page

2: Institutional byline

Provides a link to the institution, organization or partnering/collaborative arrangement entity responsible for the content of the page

• Content

  • must provide a link to a profile for the institution responsible for the content
• Presentation

  • use the Institutional byline pattern

3: Institutional mandate

Provides 1 or 2 sentences that describe the institution’s mandate

• Content

  • provides a brief, plain language overview of how the institution serves the public
  • keep the text short and concise
  • written for a grade 6-8 reading level
• Presentation

  • institutional mandate appears directly below the page title

4: Institution social media channels

Features institution-specific social media channels

• Content

  • use the Social media channels block (follow box) pattern

5: Contact task

Provides the name and details of the contact task

• Content

  • it may be repeated to allow for multiple contact tasks
  • use the Contact information pattern
• Presentation

  • appears below the institution social media channels

How to use the find an office page

1: Search filter

Generates a list of institutions that meet the search terms

2: Institution name result

Includes the name of the institution matching the search terms

3: Institutional mandate

Includes a short description of the institution’s mandate

How to use the browse to an office page

Expand All Collapse All

1: Page title

Describes the contact task along with the institution’s name

• Presentation

  • page title must be a unique H1
  • must be the first component on the page

2: Institutional byline

Provides a link to the institution, organization or partnering/collaborative arrangement entity responsible for the content of the page

• Content

  • must provide a link to a profile for the institution responsible for the content
• Presentation

  • use the Institutional byline pattern

3: Institutional mandate

Provides 1 or 2 sentences that describe the institution’s mandate

• Content

  • provides a brief, plain language overview of how the institution serves the public
  • keep the text short and concise
  • written for a grade 6-8 reading level
• Presentation

  • appears directly below the page title

4: Location name

Provides the location name

• Content

  • it provides the location name
• Presentation

  • appears below the institutional mandate

5: Location details

Provides the contact details for the related location

• Content

  • provides the contact details for the related location
• Presentation

  • appears below the location name

How to use the postal code look-up page

Expand All Collapse All

1: Page title

Describes the contact task along with the institution’s name

• Presentation

  • page title must be a unique H1
  • must be the first component on the page

2: Institutional byline

Provides a link to the institution, organization or partnering/collaborative arrangement entity responsible for the content of the page

• Content

  • provide a link to a profile for the institution responsible for the content
• Presentation

  • use the Institutional byline pattern

3: Institutional mandate

Provides 1 or 2 sentences that describe the institution’s mandate

• Content

  • provides a brief, plain language overview of how the institution serves the public
  • keep text short and concise
  • written for a grade 6-8 reading level
• Presentation

  • appears directly below the page title

4: Location name

Provides the location name

• Content

  • provides the location name
• Presentation

  • appears below the institutional mandate

5: Location details

Provides the contact details for the related location

• Content

  • provides the contact details for the related location
• Presentation

  • appears below the location name

How to use the region page

Expand All Collapse All

1: Region name

Provides the institution name and its regional location

• Content

  • the applied title of the institution must be used
• Presentation

  • the region name must be a unique H1
  • must be the first component on the page

2: Institutional byline

Provides a link to the institution, organization or partnering/collaborative arrangement entity responsible for the content of the page

• Content

  • must provide a link to a profile for the institution responsible for the content
• Presentation

  • use the Institutional byline pattern

3: Region image

Supports and enhances key messages related to the region page

• Content

  • where images include people, they should reflect Canada’s diverse population
• Presentation

  • the region image appears below the region name
  • the image is not hyperlinked
  • no text may be embedded in the image
  • image sizing:
    • width: 520px
    • height: 200px
    • ratio: ~0.385 w to h

4: Region map

Provides a map with the service locations in the region

• Content

  • provides a map with the service locations
• Presentation

  • appears beside the region image and above the region description

5: Region description

Describes the services and information that can be accessed in this region

• Content

  • provides an overview of the information and services that may be accessed from this page
  • keep the text short and concise
  • written for a grade 6-8 reading level
• Presentation

  • appears below the region image

6: Regional social media channels

Features region-specific social media channels

• Content

  • use the Social media channels block (follow box) pattern

7: Latest news

Features current news items related to the region

• Content

  • features the 5 most recent news items posted by the institution
  • 2 of the featured news items must include an image, a headline hyperlink, additional information and a description text:
    • keep description text short and concise
    • content prioritization is discretionary
    • if more than 2 images are required, images may be displayed in carousel format:
      • a maximum of 40 characters for the hyperlink text is allowed
  • the types of news products that must be listed as text-only are limited to those available through news.gc.ca:
    • media advisories
    • backgrounders
    • news releases
    • speeches
    • statements
• Presentation

  • latest news items related to the region appear below the region description
  • go to the Canada.ca GitHub page for image sizing details

8: Address

Provides address information for this region

• Content

  • go to mailing addresses section of the Canada.ca Style Guide for content guidance and format
• Presentation

  • appears below the latest news block

9: Service hours

Provides the contact details for the related location

• Content

  • service hours are specified as a range based on the date and time, separated by a colon
  • the days of the week are spelled out in full
  • go to the dates and times section of the Canada.ca Content Style Guide for content guidance
• Presentation

  • appears to the right of the address information

10: Service listing

Contains a list of services that are available from this location

• Content

  • keep the text short and concise

Working examples

• English working example (on GitHub)
• French working example (on GitHub)

User navigation

In situations where people wish to initiate contact with the Government of Canada from Canada.ca, common user navigation helps people complete the related task. The “Contact us” page accessible from the home page allows people to perform the following tasks:

• contact a representative
  • find an individual by name
  • find an individual by function or role
  • contact an organization
  • contact a program or service
• contact a member of Parliament
• find an office
  • find an embassy or consulate
  • search by postal code
  • find on a map
  • find by program or service
• ask a question
  • request information (specific)
  • request information (general)
• submit information
  • provide feedback
  • submit a document
  • leave a message
  • subscribe to a mailing list
• report a problem
  • make a complaint
  • report a concern
  • report an incident or accident
  • report a wrongdoing
  • report a website issue
• emergency assistance
  • call search and rescue (Coast Guard)
  • contact an embassy or consulate
  • contact the RCMP