Home page mandatory template: Canada.ca design system

Mandatory

The home page is the initial page of Canada.ca, where people can access all of the information and services that are available from the Government of Canada.

• the home page surfaces the top tasks from across government
• it links to all themes and government-wide audiences
• it links to key corporate information
• it allows the promotion of key programs, initiatives and activities

On this page

• When to use this template
• How to use this template
• Working examples

When to use this template

The home page template is used only once on Canada.ca.

How to use this template

1: Site title and byline

Mandatory

Identifies the site as the Government of Canada website

• Content

  • consists of a title, followed by short byline
  • site title: Canada.ca
  • byline: The official website of the Government of Canada
• Presentation

  • the site title and byline appear in a dark blue box
  • the site title is presented as an H1, with a red horizontal rule underneath
  • the byline appears immediately below the site title

2: Home page banner image

Mandatory

Promotes relevant and timely information about GC priorities, initiatives, activities, news and events

• Content

  • images must be photographic (no illustration or abstract imagery)
  • choose images that show seasonal details (e.g. snow in winter, flowers in spring)
  • avoid images of people or faces as these are distracting
• Presentation

  • the banner image appears across the full width of the page, underneath the site header and behind the box containing the site title and headline

3: Home page feature

Mandatory

Promotes relevant and timely information about GC priorities, initiatives, activities, news and events

• Content

  • PCO controls the content in this section
  • there are 4 featured links, only 1 of which is displayed at a time
  • use a call to action for the link text
  • limit link text to 65 characters
• Presentation

  • the home page feature appears in an overlay across the bottom portion of the home page banner image
  • each time the home page loads, 1 of 4 featured links will be displayed to visitors at random
  • in exceptional situations such as an important government policy announcement (for example, the federal budget), eliminate random rotation and use only 1 featured link for all visitors
  • when only 1 featured link is being used for all visitors, the home page banner image may be changed to one that complements the link being featured

4: Government-wide top tasks

Mandatory

Links for government-wide top tasks based on page-view metrics and user research

• Content

  • includes the 8 top tasks from across the Government of Canada based on page-view metrics and user research
• Presentation

  • appears below the home page feature
  • links are presented in four columns of two links each

5: Theme links and descriptions

Mandatory

Links and descriptions for the Canada.ca themes

• Content

  • presents links and descriptions for all 15 Canada.ca themes
  • use the Services and information pattern
• Presentation

  • appears immediately below government-wide top tasks

6: Government-wide audiences

Mandatory

Links and descriptions for government-wide audience pages

• Content

  • presents links to the to government-wide audiences:
    • Indigenous peoples
    • veterans
    • youth
  • heading label: "Focus on"
  • use the Services and information pattern
• Presentation

  • appears immediately below theme links and descriptions

7: Your government

Mandatory

Links for key GC-wide corporate information

• Content

  • presents 8 links in 2 columns:
    • Contact us
    • Prime Minister
    • About government
    • Working for the government
    • News
    • Departments and agencies
    • Open government and data
    • Treaties, laws and regulations
  • heading label: "Your government"
• Presentation

  • appears below the Government-wide audiences section
  • links are placed in two columns of four links each
  • on large screens, an image that complements this section appears to the right of the links
  • on smaller screens, the image does not appear

8: Government initiatives

Mandatory

Promotes government-wide priorities

• Content

  • heading is labelled "Government initiatives"
  • consists of a set of 2 features
  • use the Context-specific features pattern
• Presentation

  • appears below Your Government

Working examples

• English working example
• French working example