Common design patterns for Canada.ca

This section contains common design patterns to be used across various templates from this Specification.

For navigation patterns at the destination level of the site, see the In-page navigation section.

Common pattern name When to use this pattern Type of pattern Working example – In a Canada.ca page Web Experience Toolkit
Buttons Use to encourage a person to take action Interaction   WET: Buttons
Carousels Use to promote multiple different activities, initiatives, programs, and services Page element; Multimedia Theme page template WET: Carousels – use style 2
Charts and graphs Use as visualization techniques for communicating data or statistics Multimedia   WET: Charts and graphs
Collapsible content Use to hide secondary content until requested Interaction   WET: Details/summary polyfill (expandable/collapsible content)
Contact information Use to present contact information on Canada.ca page Page element Institutional contact template  
Context-specific features Use to promote activities, initiatives, programs, and services Page element; Multimedia Theme template  
Contextual alerts Use to present important new information that needs to appear in a pre-existing context Multimedia   WET: Alerts
Contributors Use to link to institutions or organizations that support the content on the page Page element Topic template  
Data tables Use to communicate data Multimedia   WET: Tables
Disclaimer overlay Use to display privacy statements and similar forms of disclaimer Interaction   WET: Lightbox
Download links Use to reference and link to non-HTML files Multimedia Component examples  
Icons Use as symbols to communicate actions or states Multimedia   WET: Icons
Images Use to complement or enhance text Multimedia   WET: Images
Institutional byline Use to link to the institution responsible for the content Page element Content page  
Interactive questions Use to present a sequence of simple questions that leads to answer needed to continue or complete task Interaction   WET: Field flow
Latest news Use to feature the most recent news items Page element Institutional profile template  
More information for Use to connect to a related government-wide audience Page element Topic template  
Most requested Use to feature top tasks related to the page it is on Page element Topic template  
Multimedia (video and audio) Use to complement or enhance text Multimedia   WET: Multimedia Player
Promotional feature banner Use to promote government-wide and institution-specific activities, initiatives, programs, and services. Multimedia    
Related links Use to list links to content related to the page Page element    
Services and information Use to present sets of links with accompanying descriptions Page element Topic template  
Social media channels block (follow box) Use to allow people to follow official Government of Canada social media accounts from various social media platforms Page element Topic template  
Social media feeds widget Use to embed the latest posts from official Government of Canada social media accounts Page element; Multimedia Stay connected  
What we are doing Use to link to content that provides background or explanations of GC activities in support of creating or improving public policy Page element Topic template  

Buttons

Buttons are clickable objects intended to encourage a person to take action.

When to use this pattern

Use the button pattern to execute actions or commands that will change the system state at the front or back end, for example “Add comment,” “Submit,” “Send.”

Use buttons when:

  • helping a person into or through a transaction such as “Feedback”
  • invoking functionality, for example “Share this page”
  • providing a persistent set of UI controls across a series of pages, for example “previous”, “next”, or “back to table of contents”

Do not use buttons when:

  • an ordinary text link will do the job just as well, like when providing a single, simple link to another page

Buttons are used to activate system controls, or to draw attention to prominent actions on the page. Limit their use accordingly, to prevent their visual impact from being worn by overuse.

How to use this pattern

  • Use a high-contrast button colour for primary actions, and aim to have only one primary action per page
  • Only use primary action buttons when they truly represent the primary action on the page
    • for example, never use it for “more information” or “see our FAQs”
  • When possible, avoid using a secondary action
    • if a secondary action is required, use background colour that provides lower contrast than the primary action
  • On forms, avoid including unrelated buttons at the bottom of the page such as “Share this page”
  • Retain adequate space around buttons. Do not place them in line with text
  • The default alignment is flush left
  • Use only WET button styles

Working example

Example

Figure 1. Buttons pattern
Screenshot illustrating the button pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Carousels

Responsive carousels are in-page components used to promote multiple different activities, initiatives, programs, and services within the same content space.

When to use this pattern

  • Use this component to promote timely, current activities and initiatives
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • Responsive carousels are a set of 2 to 4 rotating slides that refresh on page load, with user-controls to rotate through the slides and to toggle to auto-rotation
  • The default controls for stepping through the slides are thumbnails for large screens and forward/back buttons, including an “Item X of X” message for small screens
  • When auto-play is activated, the default slide for the start of auto-rotation is slide one
  • The default timing for auto-rotation is 9 seconds per slide
  • The default style for transitioning between slides is horizontal sliding transition, starting from the right edge
  • Carousels may be implemented at various sizes, ranging from a single column to the full width of the screen
  • Each slide is made up of a combination of text and imagery, with the option to add a button link
  • Both text and imagery must be linked, but all links in the carousel slide must point to the same destination
  • Any call to action must be described in the hyperlink text or button link
  • A maximum of 65 characters is allowed for all of the text on a carousel slide (including link label)
  • Textual elements must be coded as HTML text—do not embed text into imagery
  • Use the defined presentation classes included in the Canada.ca WET theme
  • For image sizing details, consult the Canada.ca GitHub page

Working example

Example

Figure 2. Carousels pattern
Screenshot illustrating the full-width carousel pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Charts and graphs

Charts and graphs are visualization techniques for communicating data or statistics.

When to use this pattern

  • Use charts and graphs to communicate data more efficiently than in text or tables, when there are multiple data points to be presented
  • Do not use charts and graphs when the data set is simple enough to be presented as a table, such as when there are few data points

How to use this pattern

  • Where possible, use WET 4 charts and graphs, rather than flat images
  • Always include data points as tabular data accompanying charts or graphs
    • it is recommended to provide an expandable table with tabular data immediately underneath the figure
  • Size and place charts and graphs appropriately for the context they are in
    • they must appear connected to the related content
  • Do not place charts and graphs in line with text blocks such as in a paragraph; rather, place them in between text blocks
  • Maximize available space to enhance readability
  • Keep charts and graphs as simple as possible

Working example

Example

Figure 3. Charts and graphs pattern
Screenshot illustrating the charts and graphs pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Collapsible content

The collapsible content pattern allows secondary content to be hidden until requested. The pattern consists of a trigger link that shows or hides the collapsible content.

When to use this pattern

  • Use to prevent secondary content (that must still appear on the page) from getting in the way of the primary task
  • Use only for content that is clearly of a secondary nature (for example, when only applicable to a small minority of your audience, or additional details that are beyond the core purpose of the page)
  • Never use for content that is essential to the primary task of the page

How to use this pattern

  • The collapsed content is revealed (expanded) or hidden (collapsed) by following a trigger link
  • Label the trigger link as a call to action that sets clear expectations for what people will find when the content is expanded (for example, “View background documentation”)
  • Do not use a heading (H3, H4, etc.) as the trigger link, as some assistive technology will not recognize headings when used as trigger links
  • On initial view of the page, content must be collapsed by default
  • Limit application of this pattern on individual pages to avoid making layouts unnecessarily complex
  • Use only the WET Details/Summary component for this pattern

Working example

Examples

Figure 4. Collapsible content pattern (closed state)
Screenshot illustrating the Web Experience Toolkit (WET) details/summary widget on a page on Canada.ca. The details/summary widget is shown in its default closed state. Details on this graphic can be found in the surrounding text.
Figure 5. Collapsible content pattern (open state)
Screenshot illustrating the WET details/summary widget on a page on Canada.ca. The details/summary widget is shown in its open state. Details on this graphic can be found in the surrounding text.

Contact information

There are 2 patterns for presenting contact information on Canada.ca pages. The contact information pattern is a standardized block that presents the street or mailing address, email address and telephone numbers, while the contact links pattern presents links to contact pages.

When to use this pattern

  • Present contact information consistently in a variety of contexts
  • Provide access to multiple contact options.

How to use this pattern

  • The heading is “Contact us”
  • Do not add borders to this block
    • the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)
  • For the contact address pattern:
    • when street or mailing address information is available, place it first, followed by other contact channels
    • follow the Canada.ca Content Style Guide when writing text for this block
    • label telephone, email, TTY, etc., numbers appropriately, for example “Telephone:” for a telephone number
    • where possible, the email link must point to a web form rather than presenting a mailto link
  • For the contact links pattern:
    • use standard link styles
    • use bullets, not numbered lists
    • links point to contact pages (see the Contact us templates section)

Working example

Examples

Figure 6. Contact address pattern
Screenshot illustrating the contact address pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
Figure 7. Contact links pattern
Screenshot illustrating the contact links pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Context-specific features

Context-specific features are in-page components used to promote government activities, initiatives, programs and services.

When to use this pattern

  • Use this component to promote government activities, initiatives, programs and services that are relevant to the page on which they appear
  • Do not use this component to promote activities and initiatives that are not relevant to their context
  • Do not use this component when a person's flow must not be interrupted, as in a transactional process
  • Do not duplicate content or links from other components on the page

How to use this pattern

  • Context-specific features always comprise a link and an image, with optional header and description text
  • On navigation templates (such as theme or topic pages), use 2 or 3 features side-by-side, with each link placed above the image and the description placed underneath the image
  • On destination templates (such as generic pages), limit use to a single feature with the image placed to the left of the link and description
  • On navigation pages, always use a header. The default wording for this block is “Features.” Use more specific headings where possible to provide stronger context for a person
  • On destination pages, use of a header is optional. When using a header, always use a specific wording to provide context
  • Position context-specific features after the main content of the page, but before the footer section
  • Use a maximum of 40 characters for the hyperlink text
  • If the image is linked, it must point to the same destination as the text link
  • Do not use the images to display text
    • text on feature images may be difficult to read on a small screen
    • images may instead focus on photography and illustration
    • incidental snippets of text, such as text appearing on photographed objects, wordmarks in logos, #hashtags, etc., are acceptable
  • Keep the description text short and concise
    • 1 or 2 lines is ideal
    • do not exceed 3 lines of text (which works out to approximately 145 characters with spaces)
  • The description link text and header must be different
    • do not repeat multi-word phrases in any of the header, link or description text
  • Use the defined presentation classes included in the Canada.ca WET theme
  • For image sizing details, consult the Canada.ca GitHub page

Working example

Destination page example with a single feature

Figure 8. Promotional feature tiles pattern
Screenshot illustrating a the context-specific feature pattern with  a single heading, image, link and description on Canada.ca. Details on this graphic can be found in the surrounding text.

Navigation page example with three features

Figure 9. Promotional feature tiles pattern
Screenshot illustrating the context-specific features pattern with a group of 3 sets of links, images and descriptions placed under a single heading on Canada.ca. Details on this graphic can be found in the surrounding text.

Contextual alerts

Alerts are notice boxes for important new information that needs to appear in a pre-existing context.

When to use this pattern

Use contextual alerts to:

  • bring a person’s attention to an important change at the page or subsection level like service or site outage, recent changes to a process or service
  • provide feedback in response to a user-action, for example confirm success, notify a person of errors

Do not use contextual alerts:

  • to provide information about a normal step in a process or task; or
  • to simply add emphasis to content

How to use this pattern

  • Place the alert in the appropriate context, according to the following specifications:
    • if the alert applies to the entire site, place it at the top of the page above the main heading
    • for an alert that applies strictly to the page, place it underneath the page heading
    • when the alert applies to only a subsection of the page, place it at the most appropriate place within that subsection like underneath the subsection heading, or between 2 paragraphs
  • Style the alert based on the significance of the content of the alert, using the following scheme:
    • blue—for informational content, such as relevant information or helpful tips
    • green—to convey success, such as to confirm a submission or the completion of a task
    • yellow—for warnings, such as system outages or problems
    • red—to notify a person of errors, such as an invalid submission of data in a form
  • Use only WET alert styles
  • written for a grade 6-8 reading level

Working example

Example

Figure 10. Contextual alerts pattern
Screenshot illustrating the contextual alert pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Contributors

When to use this pattern

Links to institutions or organizations that support the content on the page.

How to use this pattern

  • Lists supporting institutions and provides links to their respective institutional profiles (or organization profiles or Partnering and collaborative arrangement profiles, as applicable)
  • Link text is the institutions’ applied title
  • Label the heading “Contributors”

Working example

Example

Figure 11. Contributors pattern
Screenshot illustrating the contributors pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Data tables

Data tables are a means for efficiently communicating data in rows and columns.

When to use this pattern

  • Use data tables to present data
  • Do not use data tables to force layout for text

How to use this pattern

  • Use defined presentation classes for tables included in WET
  • Ensure each column treats only one data facet
  • Where possible, use WET 4 tables to enable sorting and filtering controls
    • this is recommended when there are more than 12 rows
  • Add optional pagination controls for any table with more than 12 rows
  • Never include tabular data as an image

Working example

Example

Figure 12. Data tables pattern
Screenshot illustrating the data table pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Disclaimer overlay

The disclaimer overlay pattern ensures that terms of use, privacy statements and similar forms of disclaimer are available where required, but do not obstruct access to the main content of the page. It consists of a trigger link that activates a dismissible overlay where the disclaimer text appears.

When to use this pattern

  • Use where disclaimers (privacy statements, terms of use, etc.) are required, to avoid linking away from the current page
  • Never use for content that is essential to completing the primary task of the page

How to use this pattern

  • Label the trigger link with “Terms and conditions,” “Privacy statement,” or similar
  • When triggered, the overlay displays the disclaimer content in a secondary window (modal dialogue)
  • Disclaimer overlays must only include one action, which is to close them – this action is enabled by a clickable “X” in the upper right corner and a button labeled “Close” at the bottom of the overlay
  • Closing the overlay returns a person to the page containing the link that was used to activate it
  • Until the overlay is dismissed, the window under the disclaimer overlay is inert; people cannot interact with content outside of the overlay window (to avoid issues with assistive technology interpreting what is displayed)
  • Use only WET Centred popup (Lightbox) for this pattern

Working example

Example

Figure 13. Disclaimer overlay pattern
Screenshot illustrating the Web Experience Toolkit (WET) centered overlay pop-up, being used to display disclaimers and legal information on Canada.ca. Details on this graphic can be found in the surrounding text.

Download links are used for referencing and linking to non-HTML files on Canada.ca web pages.

When to use this pattern

  • Only use this pattern for non-HTML files like PDFs and Excel documents that already have an HTML equivalent
  • Do not use this pattern when linking to HTML pages

How to use this pattern

  • Include a thumbnail or generic image indicating that this link is to a non-HTML resource
  • Include the name of the non-HTML file as a text link
  • Include file type and file size information in parentheses
  • Do not place the download links block in line with text blocks, for example within a paragraph; instead, place it in between text blocks
  • The default alignment is flush left

Working example

Example

Figure 14. Download links pattern
Screenshot illustrating the download link pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Icons

Icons are symbols for communicating actions or states on Canada.ca.

When to use this pattern

Use the following icons when assisting people with site functionality:

  • buttons
  • alerts
  • form fields
  • external or email links
  • links to non-HTML files like a PDF or Excel files

Do not use icons:

  • to add decoration to navigation labels or headings
  • to style links internal to Canada.ca
  • to add emphasis to text

How to use this pattern

  • Do not use 2 icons in the same context
  • Ensure icons are always accompanied by a text label
  • Place an icon in line with its associated text label
  • Only use the defined icon sets included with WET

Working example

Example

Figure 15. Icons pattern
Screenshot illustrating the icon pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Images

Images are visual content that complements or enhances text, including photographs, graphics, drawings, or diagrams.

When to use this pattern

  • Avoid unnecessary decoration on Canada.ca – only use imagery when it provides more information than can be provided through text alone
  • Refer to the Canada.ca Content Style Guide for details on when to use images
  • Do not use images as stand-alone clickable elements providing navigation or functionality
  • Images must be clickable when accompanied by text links, but are secondary to the links

How to use this pattern

  • Size and place images appropriately for the context they are in
    • images must appear connected to the content, and complement it
  • Do not place images in line with text blocks, for example within a paragraph; instead, place them in between text blocks
  • Where images include people, they should reflect Canada’s diverse population
  • Images must appear square or rectangular; round or oval images may not be used
  • Where captions and attributions are required, place them immediately under the image they refer to
  • Images must only be clickable when accompanied by a text link to the same destination.
    • in such cases, the default position for text links is immediately above the image
  • Align links, captions or attributions with the left edge of the image they refer to
  • Do not use images or videos copied from other websites

Licensing

  • Institutions are responsible for the proper use of images purchased through a licensing agreement
    • if the image is licensed only to one institution, it can only be used by that institution on Canada.ca
    • read the licensing agreement carefully for any other restrictions on the use of purchased images
  • Verify that you have the appropriate rights to publish images on Canada.ca. Specifically:
    • get a signed release from a person (or legal guardian) before you publish any image of him or her
    • have documentation showing you have the appropriate rights to publish licensed (or rights-managed) images
  • Images that are no longer licensed for use by an institution must be removed from Canada.ca
  • Purchase the highest-resolution available for an image, to be able to use the image in any size

Working example

Example

Figure 16. Images pattern
Screenshot illustrating the image pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Institutional byline

The institutional byline provides people with a link to the institution or institutions responsible for the content.

When to use this pattern

  • Use only on destination pages such as service initiation or generic pages; do not use on navigation pages like themes, topic pages, institutional/organizational profiles
  • Use only once on the page to provide a link to the institution, organization or similar entity responsible for the content

How to use this pattern

  • The link to the institution or organization is introduced by the word “From:”
  • Only links pointing to institutional profile pages, organizational profile pages, or partnering/collaborative arrangement profile pages are permitted
  • Only one institution or organization should appear in the institutional byline
  • The link label must be the same as the name that appears on the institutional or organizational profile page being linked to
  • Position the institutional byline directly underneath the page title, aligned to the left
  • Use standard paragraph and link styles
  • Do not place this block in line with other text blocks or layout elements; it stands alone

Working example

Example

Figure 17. Institutional byline pattern
Screenshot illustrating the institutional byline pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Interactive questions

The interactive questions pattern is used to present people with a sequence of simple questions that leads to the specific answer they need to continue with or complete their task. The interactive questions pattern can be used to help people understand eligibility criteria, applicability of rules, or compliance requirements that depend on specific situations or conditions.

When to use this pattern

  • Use to guide people to an appropriate answer by asking them a series of questions

How to use this pattern

  • Use defined presentation classes for the field flow interface included in WET

Introducing interactive questions

  • The heading for this pattern must express the goal of the set of interactive questions
    • for example, “Find out if you can renew your passport online”
  • Optionally provide an overview of the results people can expect from completing the interactive questionnaire
  • Optionally provide brief instructions above the questions

Presenting questions

  • Keep the number of questions to a minimum (no more than 7 per sequence)
  • Each question must be written to a person reading it (use “you” and “your”)
  • Present choices or options immediately after each question, ensuring they are written as possible answers to the question above
  • When presenting choices, use standard form controls like radio buttons, checkboxes, and drop-down menus; ensure you cover off all possible choices
  • Where possible, pre-select the most common or optimal choice

Grouping questions

  • Present questions one at a time to keep focus on the current question; keep each subsequent question on the same page in the same place as the previous question
  • Always place questions in context (for example, on the eligibility page within the Service Initiation template)

Moving through the sequence of questions

  • Always use buttons for navigating though the sequence of questions (buttons labeled “continue” or “next” to trigger the next question or the answer)
  • Ensure people are able to go back to undo or change an earlier selection, via buttons or links (such as a link labeled “change your selection”)
  • Any buttons used for navigating through the questions must be labeled appropriately for the context (for example, “Continue” might make sense in one situation, but a clearer choice in another might be, “Find out if you’re eligible”)
  • When interactive questions are combined with the multi-page navigation pattern (such as in a service initiation template), avoid using “next” to avoid confusion between the 2 types of buttons

Presenting answers

  • Always summarize the choices people have made and ensure they can go back to undo or change an earlier selection
  • Explain the answer clearly and simply
  • Provide links to the next action that people should take based on the answer they are given

Working example

Example

Figure 18. Interactive questions pattern
Screenshot illustrating a demonstration of the interactive questions pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Latest news

When to use this pattern

  • Features the most recent news items posted by the institution, organization or entity

How to use this pattern

  • It features the most recent news items posted by the entity
  • The heading is labelled “Latest”
  • 2 of the featured news items must include an image, a headline hyperlink, additional information and a description text:
    • can include promotional content, and be prioritized at the institution’s discretion
    • keep description text short and concise
    • if more than 2 images are required, images may be displayed in carousel format
    • if using the carousel format refer to Carousels in Common design patterns
  • The types of news products that must be listed as text-only are limited to only those available through news.gc.ca:
    • media advisories
    • backgrounders
    • news releases
    • speeches
    • statements
  • Consult the Canada.ca GitHub page for details on image sizing

Working example

Examples

Figure 19. Latest news pattern: 2 images
Screenshot illustrating the latest news pattern with 2 images on Canada.ca. Details on this graphic can be found in the surrounding text.
Figure 20. Latest news pattern: carousel
Screenshot illustrating the latest news pattern with carousel on Canada.ca. Details on this graphic can be found in the surrounding text.

More information for

When to use this pattern

  • It is used to connect to a related government-wide audience page or to an audience topic page

How to use this pattern

  • It is used to connect the topic page to a related government-wide audience page or to an audience topic page. Government-wide audiences are:
    • Indigenous peoples
    • youth
    • veterans
  • For more details on Government of Canada audiences go to Audience pages
  • Label the heading “More information for”

Working example

Example

Figure 21. More information for pattern
Screenshot illustrating the more information for pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Most requested

When to use this pattern

  • Features top tasks related to the page it is on
  • For example, on a topic page or organizational profile it will list the top tasks related to that topic or organization, based on metrics and user-research

How to use this pattern

  • It lists top tasks specific to the page it is on based on page-view metrics and user research
  • Ideally, keep it to a maximum of 3 links, as people generally don't click on links beyond the first 3
  • A maximum of 7 links is allowed
  • Items can only link to destination content, or related topic links that do not already appear on the page
  • Link titles may not consist of program or publication names, unless these are meaningful to their target audience
  • Label the heading “Most requested”

Working example

Example

Figure 22. Most requested for pattern
Screenshot illustrating the most requested pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Multimedia (video and audio)

Multimedia is time-based media of a visual or auditory nature that complements or enhances text, including video clips and audio recordings.

When to use this pattern

How to use this pattern

  • Size and place multimedia appropriately for the context it is in. Embedded multimedia must appear connected to the content, and complement it
  • Do not place multimedia in line with text blocks, for example within a paragraph; place them in between text blocks instead
  • Where multimedia includes people, it should reflect Canada’s diverse population
  • Embedded multimedia must appear square or rectangular
  • Use only the WET multimedia player, which provides accessible playback controls
  • Always include descriptive transcripts accompanying multimedia content – place the link to the transcript immediately under the multimedia
  • The link must point to a separate page for longer transcripts or open a details-summary element for shorter transcripts
  • Where additional captions and attributions are required, place them immediately under the link to the transcript for the multimedia that they refer to
  • Align links, captions or attributions with the left edge of the embedded multimedia that they refer to
  • Avoid using multimedia from sources outside the Government of Canada

Licensing

  • Institutions are responsible for the proper use of multimedia purchased through a licensing agreement
  • If the multimedia is licensed only to one institution, it can only be used by that institution on Canada.ca
  • Read the licensing agreement carefully for any other restrictions on the use of purchased multimedia
  • Verify that you have the appropriate rights to publish multimedia on Canada.ca, specifically:
    • get a signed release from a person (or legal guardian) before you publish any representation of him or her
    • have documentation showing you have the appropriate rights to publish licensed (or rights-managed) multimedia
  • Multimedia that is no longer licensed for use by an institution must be removed from Canada.ca

Working example

Example

Figure 23. Multimedia player pattern
Screenshot illustrating the multimedia player pattern embedded on a generic page on Canada.ca. Details on this graphic can be found in the surrounding text.

1: WET media player

Mandatory

The video and audio player components of the Web Experience Toolkit have been developed and tested to meet Canada.ca coding and accessibility standards. No other multimedia players are permitted on Canada.ca.

2: Transcript

Mandatory

All video and audio posted to Canada.ca must include a written transcript immediately following the WET player.

Shorter transcripts should be placed on the same page following the player, while longer transcripts can be hidden inside a details/summary element or placed on a separate page. When placing the transcript on a separate page, a link must appear in this spot which leads to the page containing the transcript.

3: Captions or descriptions

Optional

Captions, descriptions or attributions associated with multimedia content must be placed after the link to the transcript, left-aligned to the edge of the WET player.

Promotional feature banner

Promotional feature banners are in-page components used to promote government-wide and institution-specific activities, initiatives, programs, and services.

When to use this pattern

  • Use this component to promote timely, current activities and initiatives
  • Only use this component on navigation or landing pages; do not use with destination content
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • Promotional feature banners are full-width, narrow-height components that comprise text, imagery, and links
  • A maximum of 65 characters is allowed for all text (including link label)
  • Both text and imagery must be linked, but all links in the feature banner must point to the same destination; alternatively, the entire container must operate as a single linked area
  • Textual elements must be coded as HTML text—do not embed text into imagery
  • To ensure responsiveness at varying screen sizes, do not use a single static image for this component
  • Use the defined presentation classes included in the Canada.ca WET theme
  • For image sizing details, consult the Canada.ca GitHub page

Example

Figure 24. Promotional feature banner pattern
Screenshot illustrating the promotional feature banner pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

The related links pattern is a list of links to content that is related to the page on which it appears

When to use this pattern

  • Use this pattern to provide links to content that is directly relevant to the content on the current page
  • Do not use the related links pattern when a person’s flow must not be interrupted such as in a transactional process

How to use this pattern

  • Position the list of links after the main content of the page, but before the footer section
    • a consistent location at the bottom of the content area helps a person recognize the function of this pattern
  • The default heading is “Related links”
    • use more specific headings where possible to provide stronger context for a person
  • Do not add borders to this block
    • the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)
  • Use standard link styles
  • Use bullets, not numbered lists

Example

Figure 25. Related links pattern
Screenshot illustrating the related links pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Services and information

Services and information is a pattern for presenting sets of links with accompanying descriptions (also known as doormat). Each link with its description provides an accurate and concise description of what a person will find on the destination page. Together, these sets of links and descriptions provide clear and distinct choices for people trying to complete their task.

When to use this pattern

  • Use this pattern to provide links to topics or destination content related to the page it is on
  • Use when the primary purpose of the page is to provide clear choices to navigate to tasks

How to use this pattern

Content requirements

  • Content for each link and description pairing is written for a grade 6-8 reading level
  • Keep punctuation simple
  • Use popular keywords that the target audience will likely know and use; base choices on research and evidence
  • Don’t use acronyms or abbreviations unless most people know these better than the long-form equivalent
  • See the Canada.ca Content Style Guide for more information on how to write content for this pattern

Link requirements

  • Link text must make sense within the context of the page
    • It does not need to exactly match the destination page title
    • It does not need to be unique across Canada.ca
    • It must be descriptive, unique within the page, and clearly distinguishable from the other links on the page
    • Don’t end linked text with punctuation (for example, “How do you apply for funding?”)
    • The linked text must speak to a person (for example, “Apply for funding”)
  • The optimal character limit for links is 45 characters (with spaces) for both official languages, but can extend to 75 characters (with spaces)
  • Use only standard link styles as defined in the Web Experience Toolkit (WET)

Link descriptions

  • The link description complements the link it accompanies to provide greater detail and clarity about the scope of the link itself
    • Recommended style is to list keywords or keyword phrases separated by commas; full sentences are not required
    • Don’t use introductory phrases such as “Includes…”, “Information on…” or “Learn more about…”
    • Don’t include links
    • Don’t include promotional messaging
  • The character limit for link descriptions is 120 characters (with spaces) in both official languages
  • Drop-down menus are permitted in place of a link description in specific circumstances:
    • When used to provide access to a large number of items at the same level (for example, lists of countries or species)
    • When the destination page consists primarily of a list of links, and so can be completely replaced by the drop-down menu
  • Use only standard presentation styles as defined in WET

Grouping sets of links with accompanying descriptions

The following styles may be used:

  • Demand-based
    • Prioritization is based on demand (for example, based on web metrics), with higher demand links appearing ahead of lower demand ones
  • Sequential
    • Use sequential, numbered doormats when links must be followed in a step-by-step order (for example, confirming eligibility, registering and then charging for GST/HST)
    • Use to allow people to skip over optional/non-applicable steps or steps they have previously completed
  • Subheadings
    • Use to group links and descriptions that are very similar, in cases where it wouldn’t make sense to move the group into a sub-topic page
    • Use to avoid information overload; ideally no more than 9 links with descriptions per subheading
  • Combinations of the above, as appropriate; however, limit application to avoid overly complex sets of links and descriptions

In all cases, priority sequencing is as follows:

  • In a single column layout, the priority sequencing is top to bottom
  • In using across multiple columns, the priority sequencing is from left to right, then top to bottom

Working example

Examples

Figure 26. Doormat links in 2 columns pattern
Screenshot illustrating a set of doormat links in 2 columns on Canada.ca. Details on this graphic can be found in the surrounding text.
Figure 27. Doormat links in single column pattern
Screenshot illustrating a set of doormat links in a single column on Canada.ca. Details on this graphic can be found in the surrounding text.
Figure 28. Sequential doormat links in single column pattern
Screenshot showing a set of sequential doormat links in a single column. Details on this graphic can be found in the surrounding text.
Figure 29. Doormat links in 2 columns grouped with headings pattern
Screenshot showing a set of doormat links in 2 columns, grouped with headings on Canada.ca. Details on this graphic can be found in the surrounding text.

Social media channels block (follow box)

The social media channels block (“follow box”) is an in-page component that allows people to follow official Government of Canada social media accounts from various social media platforms.

When to use this pattern

  • Use the follow box on pages where official GC social media accounts are relevant to the current context
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • The social media channels follow box is made up of the heading “Follow” and icons linking to official GC social media accounts or RSS feeds that are relevant to the page
  • Accounts referred to in the follow box must be fully compliant with the Directive on the Management of Communications
  • Display a maximum of 7 icons aligned in a horizontal row, using the standard icon set available in the Canada.ca WET theme
  • Use only one icon per social media platform; if there is more than one account from a single platform
    • make them available via a clickable drop-down menu
    • populate the drop-down menu with up to 8 text links, using the names of the accounts as labels
    • if more than 8 links are required, include a “view all” link as the final item in the list; this link must point to the relevant section of the Canada.ca social media gallery, where all relevant accounts will be listed
  • Position the follow box so that it does not interfere with the primary content of the page
  • Emphasize the box shape of this component by using a background colour that is darker than the surrounding page area’s background colour
  • Use the defined presentation classes included in the Canada.ca WET theme

Working example

Example

Figure 30. Social media channels block (follow box) pattern
Screenshot illustrating the social media channels block (follow box) pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Social media feeds widget

The social media feeds widget is an in-page component that allows the latest posts from official Government of Canada social media accounts to be embedded on Canada.ca pages

When to use this pattern

  • Use the social media feeds widget on pages where official GC social media accounts are relevant to the current context
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • The social media feeds widget consists of a heading with panels for up to 3 social media accounts, each featuring a feed of recent posts
  • The default heading for this widget is “Stay connected”
  • Each feed panel includes
    • a heading that indicates which social media platform the account’s feed is drawn from, for example Facebook or YouTube
    • a feed of the recent posts from that account, arranged in reverse chronological order
    • the 3 most recent posts as the default setting, with a link to the account from which the feed is drawn to allow people to see more
  • Use the defined presentation classes included in the Canada.ca WET theme

Working example

Example

Figure 31. Social media feeds widget pattern
Screenshot illustrating the social media feeds widget pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

What we are doing

What we are doing is a pattern that presents links to content that provides background or explanations of GC activities in support of creating or improving public policy.

When to use this pattern

  • Use this pattern to provide relevant links to content that falls within the program and policy development user-need category
  • Use when the primary purpose of the page is to provide navigation choices

How to use this pattern

Content requirements

  • Label the heading “What we are doing”
  • Organize links by content type; label subheadings only using content type names (see Content types for Canada.ca)
  • Provide links to only the following content types:
    • from the Research, statistics and data category:
      • assessments
      • datasets
      • research
      • statistics
      • surveys
    • from the Consultations and engagement category:
      • consultations
    • from the News, promotions and public awareness category:
      • backgrounders
      • news releases
      • speeches
      • statements
    • from the Corporate information category:
      • program results
    • from the Government-wide reporting category:
      • audits
  • With the permitted types above, only include links to content that provides a view into the work that the government is doing to evaluate, improve or change programs, policies and services; for example, only a news release that announces a new funding program (whereas a news release that announces funding being awarded under and existing program would not be included here)
  • Only include links that are relevant to the page on which this pattern appears
  • Never provide links to content types that fall under the following content type categories:
    • services, like forms or service initiation (instead, place links to this content under services and information or most requested)
    • contact us, such as emergency contact or find an office (instead, place links to this content under the appropriate contact page or pattern, or most requested, if a high-demand task)
    • policy and guidance (instead, place links to this content under services and information, most requested or corporate information)
    • treaties, laws and regulations (instead, place links to this content on the transparency page under corporate information, services and information or most requested, if a high-demand task)
    • navigation and administration like navigation pages, website terms and conditions

Presentation requirements

  • When there are more than 3 subheadings, continue on a second row
  • A minimum of 2 links per subheading is required
  • A maximum of 4 links per subheading is allowed
  • When the number of links exceeds 4, provide a link to “All related [content type name]”

Working example

Example

Figure 32. What we are doing pattern
Screenshot illustrating the what we are doing pattern on Canada.ca. Details on this graphic can be found in the surrounding text.
Report a problem or mistake on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, contact us.

Date modified: