From 4e316a33baca2edd58e1247cc16d4609c0c2015f Mon Sep 17 00:00:00 2001 From: Peter Crane Date: Wed, 25 Oct 2023 11:00:27 -0400 Subject: [PATCH 1/2] Delete old pages (underscore) --- common-design-patterns/_buttons.html | 436 --------------------------- 1 file changed, 436 deletions(-) delete mode 100644 common-design-patterns/_buttons.html diff --git a/common-design-patterns/_buttons.html b/common-design-patterns/_buttons.html deleted file mode 100644 index ddba97b3e2..0000000000 --- a/common-design-patterns/_buttons.html +++ /dev/null @@ -1,436 +0,0 @@ ---- ---- - - - - - -Buttons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
-
-

Buttons: Canada.ca design system

-
-
-
    -
  • Last updated: 2022-09-23
    • -
-
-
-
-

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

-
- - - -
-
-

On this page

- -
-
-

When to use

-

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 “Sign in”
    • -
  • 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”
    • -
-
-
-

What to avoid

-

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.

-

Use buttons to activate system controls, or to draw attention to primary actions on the page. Limit their use to prevent their visual impact from being reduced by overuse.

-
-
-

How to implement

-

Use the right type of button:

-
    -
  1. Supertask
    2. -
  2. Primary
    3. -
  3. Secondary
    4. -
  4. Danger
    5. -
  5. Link
    6. -
  6. Sign in
    7. -
-

1. Supertask button

-

When to use: Use a supertask button to launch the main task or next step that people are trying to complete from a specific page, such as:

-
    -
  • apply for a program or service
    • -
  • launch a calculator
    • -
  • start a wizard
    • -
  • find a clinic
    • -
-

You can also use it on the Institutional landing page, when there is evidence that a particular top task (a supertask) is clearly the most important.

-

What to avoid: Don’t use a supertask button to promote something that is not the primary task people are looking for on that page. For promotions, use Context-specific features or Promotional feature banner.

-

Don't use supertask buttons more than once on a page.

-
- -
-
- Code - 
<button class="btn btn-call-to-action">Calculate how much you can get</button>
-
-

2. Primary button

-

When to use: Use primary buttons for actions someone is likely to take on that page, such as the next or submit buttons in a form.

-

What to avoid: Don't use more than one primary button on a page.

-
- -
-
- Code - 
<button class="btn btn-primary">Submit</button>
-
-

3. Secondary button

-

When to use: Use secondary buttons for alternative, less important or less likely to be used options, such as the 'previous' button in a form.

-
- -
-
- Code - 
<button class="btn btn-default">Previous</button>
-
-

4. Danger button

-

When to use: Use danger buttons to bring attention to an action that might have consequences, such as deleting a form or leaving an authenticated application.

-

What to avoid: Don't use danger buttons unless they are absolutely needed.

-
- -
-
- Code - 
<button class="btn btn-danger">Erase form</button>
-
- -

When to use: Use link buttons for infrequently used options, such as for restarting a wizard or calculator. Link buttons have a slightly larger target area than regular links.

-
- -
-
- Code - 
<button class="btn btn-link">Restart calculator</button>
-
-

6. Contextual Sign in button

-

When to use: The contextual Sign in button is an optional element of the Global header. Use it on pages where signing in to an account is an important task. Use the label "Sign in".

- -
-
A square blue sign-in button at the top right of the screen
-
-

Customizing buttons

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionDescriptionHow to use
Full widthMake a button occupy the full width of its column.Add the class btn-block to button.
Grouped buttonsGroup buttons side by side for controls such as a toggle.Surround the grouped buttons with a div with the class btn-group.
Change sizingResize buttons if you need to improve visibility of a call to action or to save space in designs such as a toggle.Apply the following classes to the button: -
    -
  • Large: btn-lg
    • -
  • Small: btn-sm
    • -
  • Extra small: btn-xs
    • -
Disable buttonGrey out a button so it can't be clicked on. Generally, try to remove the button instead of disabling it.Add the class disabled to button.
-
-

Research and blog posts

- -
-

Latest changes

-
-
-
- -
-
Expanded Sign in button guidance
-
- -
-
Added a new beta version of a contextual Sign in button
-
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- - -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - From 64c61bfa2012b1f6eb15e78d292d745d73037d27 Mon Sep 17 00:00:00 2001 From: prycrane Date: Wed, 25 Oct 2023 11:29:01 -0400 Subject: [PATCH 2/2] go --- _continuous-improvement.html | 305 ---- _designing-content.html | 387 ----- _gcweb-managers-signup.html | 170 --- alerts/_alerts-contact.html | 245 ---- alerts/_alerts-ilp.html | 389 ----- alerts/_alerts-sit.html | 113 -- alerts/_alerts-stable-ip.html | 388 ----- alerts/_alerts.html | 110 -- coded-layout/_generic-destination-basic.mdx | 63 - coded-layout/_generic-destination-byline.mdx | 78 - coded-layout/_generic-destination-sit1.mdx | 87 -- coded-layout/_generic-destination-sit2.mdx | 87 -- coded-layout/_generic-destination-sit3.mdx | 87 -- coded-layout/_generic-destination-tab.mdx | 115 -- coded-layout/_generic-destination-toc.mdx | 109 -- .../_institutional_landing_page_guidance.mdx | 808 ---------- coded-layout/_ministerial-profile-pages.mdx | 619 -------- coded-layout/_theme_topic_guidance.mdx | 561 ------- coded-layout/_transparency_guidance.mdx | 317 ---- common-design-patterns/_canada-dot-ca.html | 301 ---- common-design-patterns/_carousels.html | 361 ----- common-design-patterns/_charts-graphs.html | 358 ----- .../_checkboxes-radio-buttons.html | 950 ------------ .../_collapsible-content.html | 462 ------ .../_contact-information.html | 383 ----- .../_contextual-alerts.html | 453 ------ common-design-patterns/_contributors.html | 331 ----- common-design-patterns/_date-modified.html | 360 ----- .../_disclaimer-overlay.html | 337 ----- common-design-patterns/_doc-template-en.html | 377 ----- common-design-patterns/_download-links.html | 303 ---- common-design-patterns/_feature-banner.html | 334 ----- common-design-patterns/_feature-tiles.html | 331 ----- .../_global-header-workshop.html | 376 ----- common-design-patterns/_icons.html | 345 ----- common-design-patterns/_images.html | 374 ----- common-design-patterns/_in-page-toc.html | 339 ----- .../_institutional-byline.html | 329 ----- .../_interactive-questions.html | 384 ----- common-design-patterns/_labels.html | 408 ------ common-design-patterns/_latest-news.html | 426 ------ common-design-patterns/_more-information.html | 337 ----- common-design-patterns/_most-requested.html | 303 ---- common-design-patterns/_multimedia.html | 339 ----- .../_ordered-multipage.html | 347 ----- .../_privacy-disclaimer.html | 396 ----- common-design-patterns/_related-links.html | 344 ----- common-design-patterns/_report-problem.html | 540 ------- .../_services-information.html | 394 ----- common-design-patterns/_share-page.html | 380 ----- .../_site-footer-content.html | 310 ---- .../_social-media-channels.html | 313 ---- .../_social-media-feeds.html | 310 ---- .../_subway-navigation-new.html | 582 -------- common-design-patterns/_subway-navigation.mdx | 664 --------- common-design-patterns/_tabbed-interface.html | 338 ----- common-design-patterns/_tables.html | 460 ------ .../_what-we-are-doing.html | 393 ----- common-design-patterns/fragments/_basic.mdx | 8 - .../fragments/_gc-subway-index.mdx | 70 - .../fragments/_gc-subway-page.mdx | 112 -- community/_contribution-process.html | 221 --- community/_landing.html | 201 --- continuous-improvement/_choosing.html | 365 ----- continuous-improvement/_designing.html | 456 ------ continuous-improvement/_monitoring.html | 323 ---- continuous-improvement/_research.html | 636 -------- continuous-improvement/_team.html | 494 ------- crisis/_alerts.html | 278 ---- crisis/_content.html | 456 ------ events/_Canada-ca-fall-update-2019.html | 139 -- ...a-ca-spring-update-2019-questionnaire.html | 138 -- events/_Canada-ca-spring-update-2019.html | 134 -- ...a.ca-Update-Authorization-and-Release.html | 56 - guidance/_structured-data.html | 855 ----------- layout/_contact-aside-demo.html | 409 ------ layout/_contact-aside-rationale.html | 219 --- layout/_contact-aside.html | 234 --- layout/_service-contact-demo.html | 409 ------ layout/_service-contact-rationale.html | 219 --- layout/_service-contact.html | 234 --- .../demos/contact-aside/wet4/_link-list.html | 0 .../demos/contact-aside/wet4/_mail-only.html | 0 .../demos/contact-aside/wet4/_phone-mail.html | 0 .../demos/contact-aside/wet4/_phone-only.html | 119 -- .../wet4/_multi-channel-audience.html | 322 ---- .../service-contact/wet4/_multi-channel.html | 0 layout/demos/service-contact/wet4/_phone.html | 119 -- mandatory-templates/_audience-pages.html | 535 ------- .../_department-agencies-page.html | 432 ------ mandatory-templates/_home-page.html | 595 -------- .../_institutional-profile-pages.html | 1301 ----------------- .../_ministerial-profile-pages.html | 404 ----- mandatory-templates/_news-pages-2.html | 874 ----------- mandatory-templates/_news-pages.html | 939 ------------ .../_organizational-profile-pages.html | 881 ----------- mandatory-templates/_search-page.html | 601 -------- mandatory-templates/_theme-topic.html | 1140 --------------- recommended-templates/_campaign-pages.html | 681 --------- .../_collection-landing-pages.html | 471 ------ .../_consultations-page.html | 501 ------- recommended-templates/_contact-us-pages.html | 1004 ------------- .../_generic-destination.html | 355 ----- .../_guidance-legislation-pages.html | 740 ---------- ...l-service-performance-reporting-pages.html | 494 ------- .../_laws-regulations-pages.html | 790 ---------- recommended-templates/_pages-index.html | 887 ----------- ...llaborative-arrangement-profile-pages.html | 547 ------- .../_program-description-pages.html | 382 ----- .../_promotional-events-pages.html | 408 ------ .../_service-initiation-pages.html | 619 -------- recommended-templates/_transparency.html | 387 ----- redirect-test/icons.md | 45 - styles/_colours.html | 179 --- styles/_layouts.html | 228 --- styles/_typography.html | 251 ---- survey/_about.html | 369 ----- survey/_analytics.html | 341 ----- survey/_clusters.html | 784 ---------- survey/_take-action.html | 344 ----- survey/_tasks-covid.html | 208 --- survey/_tasks-cra.html | 208 --- survey/_tasks.html | 208 --- 123 files changed, 46769 deletions(-) delete mode 100644 _continuous-improvement.html delete mode 100644 _designing-content.html delete mode 100644 _gcweb-managers-signup.html delete mode 100644 alerts/_alerts-contact.html delete mode 100644 alerts/_alerts-ilp.html delete mode 100644 alerts/_alerts-sit.html delete mode 100644 alerts/_alerts-stable-ip.html delete mode 100644 alerts/_alerts.html delete mode 100644 coded-layout/_generic-destination-basic.mdx delete mode 100644 coded-layout/_generic-destination-byline.mdx delete mode 100644 coded-layout/_generic-destination-sit1.mdx delete mode 100644 coded-layout/_generic-destination-sit2.mdx delete mode 100644 coded-layout/_generic-destination-sit3.mdx delete mode 100644 coded-layout/_generic-destination-tab.mdx delete mode 100644 coded-layout/_generic-destination-toc.mdx delete mode 100644 coded-layout/_institutional_landing_page_guidance.mdx delete mode 100644 coded-layout/_ministerial-profile-pages.mdx delete mode 100644 coded-layout/_theme_topic_guidance.mdx delete mode 100644 coded-layout/_transparency_guidance.mdx delete mode 100644 common-design-patterns/_canada-dot-ca.html delete mode 100644 common-design-patterns/_carousels.html delete mode 100644 common-design-patterns/_charts-graphs.html delete mode 100644 common-design-patterns/_checkboxes-radio-buttons.html delete mode 100644 common-design-patterns/_collapsible-content.html delete mode 100644 common-design-patterns/_contact-information.html delete mode 100644 common-design-patterns/_contextual-alerts.html delete mode 100644 common-design-patterns/_contributors.html delete mode 100644 common-design-patterns/_date-modified.html delete mode 100644 common-design-patterns/_disclaimer-overlay.html delete mode 100644 common-design-patterns/_doc-template-en.html delete mode 100644 common-design-patterns/_download-links.html delete mode 100644 common-design-patterns/_feature-banner.html delete mode 100644 common-design-patterns/_feature-tiles.html delete mode 100644 common-design-patterns/_global-header-workshop.html delete mode 100644 common-design-patterns/_icons.html delete mode 100644 common-design-patterns/_images.html delete mode 100644 common-design-patterns/_in-page-toc.html delete mode 100644 common-design-patterns/_institutional-byline.html delete mode 100644 common-design-patterns/_interactive-questions.html delete mode 100644 common-design-patterns/_labels.html delete mode 100644 common-design-patterns/_latest-news.html delete mode 100644 common-design-patterns/_more-information.html delete mode 100644 common-design-patterns/_most-requested.html delete mode 100644 common-design-patterns/_multimedia.html delete mode 100644 common-design-patterns/_ordered-multipage.html delete mode 100644 common-design-patterns/_privacy-disclaimer.html delete mode 100644 common-design-patterns/_related-links.html delete mode 100644 common-design-patterns/_report-problem.html delete mode 100644 common-design-patterns/_services-information.html delete mode 100644 common-design-patterns/_share-page.html delete mode 100644 common-design-patterns/_site-footer-content.html delete mode 100644 common-design-patterns/_social-media-channels.html delete mode 100644 common-design-patterns/_social-media-feeds.html delete mode 100644 common-design-patterns/_subway-navigation-new.html delete mode 100644 common-design-patterns/_subway-navigation.mdx delete mode 100644 common-design-patterns/_tabbed-interface.html delete mode 100644 common-design-patterns/_tables.html delete mode 100644 common-design-patterns/_what-we-are-doing.html delete mode 100644 common-design-patterns/fragments/_basic.mdx delete mode 100644 common-design-patterns/fragments/_gc-subway-index.mdx delete mode 100644 common-design-patterns/fragments/_gc-subway-page.mdx delete mode 100644 community/_contribution-process.html delete mode 100644 community/_landing.html delete mode 100644 continuous-improvement/_choosing.html delete mode 100644 continuous-improvement/_designing.html delete mode 100644 continuous-improvement/_monitoring.html delete mode 100644 continuous-improvement/_research.html delete mode 100644 continuous-improvement/_team.html delete mode 100644 crisis/_alerts.html delete mode 100644 crisis/_content.html delete mode 100644 events/_Canada-ca-fall-update-2019.html delete mode 100644 events/_Canada-ca-spring-update-2019-questionnaire.html delete mode 100644 events/_Canada-ca-spring-update-2019.html delete mode 100644 events/_Canada.ca-Update-Authorization-and-Release.html delete mode 100644 guidance/_structured-data.html delete mode 100644 layout/_contact-aside-demo.html delete mode 100644 layout/_contact-aside-rationale.html delete mode 100644 layout/_contact-aside.html delete mode 100644 layout/_service-contact-demo.html delete mode 100644 layout/_service-contact-rationale.html delete mode 100644 layout/_service-contact.html delete mode 100644 layout/demos/contact-aside/wet4/_link-list.html delete mode 100644 layout/demos/contact-aside/wet4/_mail-only.html delete mode 100644 layout/demos/contact-aside/wet4/_phone-mail.html delete mode 100644 layout/demos/contact-aside/wet4/_phone-only.html delete mode 100644 layout/demos/service-contact/wet4/_multi-channel-audience.html delete mode 100644 layout/demos/service-contact/wet4/_multi-channel.html delete mode 100644 layout/demos/service-contact/wet4/_phone.html delete mode 100644 mandatory-templates/_audience-pages.html delete mode 100644 mandatory-templates/_department-agencies-page.html delete mode 100644 mandatory-templates/_home-page.html delete mode 100644 mandatory-templates/_institutional-profile-pages.html delete mode 100644 mandatory-templates/_ministerial-profile-pages.html delete mode 100644 mandatory-templates/_news-pages-2.html delete mode 100644 mandatory-templates/_news-pages.html delete mode 100644 mandatory-templates/_organizational-profile-pages.html delete mode 100644 mandatory-templates/_search-page.html delete mode 100644 mandatory-templates/_theme-topic.html delete mode 100644 recommended-templates/_campaign-pages.html delete mode 100644 recommended-templates/_collection-landing-pages.html delete mode 100644 recommended-templates/_consultations-page.html delete mode 100644 recommended-templates/_contact-us-pages.html delete mode 100644 recommended-templates/_generic-destination.html delete mode 100644 recommended-templates/_guidance-legislation-pages.html delete mode 100644 recommended-templates/_institutional-service-performance-reporting-pages.html delete mode 100644 recommended-templates/_laws-regulations-pages.html delete mode 100644 recommended-templates/_pages-index.html delete mode 100644 recommended-templates/_partnering-collaborative-arrangement-profile-pages.html delete mode 100644 recommended-templates/_program-description-pages.html delete mode 100644 recommended-templates/_promotional-events-pages.html delete mode 100644 recommended-templates/_service-initiation-pages.html delete mode 100644 recommended-templates/_transparency.html delete mode 100644 redirect-test/icons.md delete mode 100644 styles/_colours.html delete mode 100644 styles/_layouts.html delete mode 100644 styles/_typography.html delete mode 100644 survey/_about.html delete mode 100644 survey/_analytics.html delete mode 100644 survey/_clusters.html delete mode 100644 survey/_take-action.html delete mode 100644 survey/_tasks-covid.html delete mode 100644 survey/_tasks-cra.html delete mode 100644 survey/_tasks.html diff --git a/_continuous-improvement.html b/_continuous-improvement.html deleted file mode 100644 index 3cf26765de..0000000000 --- a/_continuous-improvement.html +++ /dev/null @@ -1,305 +0,0 @@ ---- ---- - - - - - - Continuous improvement of the Government of Canada web content - Intro - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Continuous improvement of web content

- - - -

Continuously improving web content is essential to ensure people get what they need from their government. - - -

- - -
- -

Services and information

- -
-
-
-

Choosing what to improve

-

Use a task-based approach, top tasks, improving the right thing

-
-
-
-
-

Organizing and preparing your team

-

Establish your team, set up your governance structure, plan for efficient approvals

-
-
-
-
-

Research and prototyping

-

Process, initiation, discovery, baseline testing, prototyping, comparison testing

-
-
-
-
-

Designing content

-

Focus on task success, foster trust, build in accessibility and inclusivity, help people find, understand and use the content

-
- -
- - -
-
-

Monitoring and measuring success

-

Establish performance indicators, GC Task success survey, continuous improvement

-
-
-
- -
- - - - - -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
- -
-
Date modified:
-
-
-
- -
- {% include footer-en.html %} - - - - - - - diff --git a/_designing-content.html b/_designing-content.html deleted file mode 100644 index cb5ed9833a..0000000000 --- a/_designing-content.html +++ /dev/null @@ -1,387 +0,0 @@ ---- ---- - - - - - - Designing content on Canada.ca - Canada.ca - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Designing content for Canada.ca

- -

When you design content for Canada.ca, you design for people. The goal is to help people get what they need from the government.

- - -
- - -
-

On this page

- -
- -
- - -

Focus on the task

- -

First, determine the task at hand: what is it that users are trying to do when they get to the page or set of webpages?

- -

Tasks can be things like:

- -
    -
  • apply for a benefit
    • -
  • get a copy of an official document
    • -
  • check the weather
    • -
  • look for jobs
    • -
  • find out if a business name is available
    • -
- -

One question should drive all design decisions: does it help people succeed in completing the task?

- - - - - -

Design for trust

- -

Using a consistent look throughout the Government of Canada web presence is crucial to building a trustworthy experience for people. People need to know they'll find information they can trust.

- -

Use the mandatory elements of the Canada.ca design system to implement this trusted brand.

- -

The mandatory elements you need to follow are:

- -
    -
  • Canada.ca domain
    • -
  • mandatory styles (typography, colours and layouts)
    • -
  • standard header and footer
    • -
  • a handful of high-level mandatory templates to establish a consistent institutional presence and the Canada.ca topic tree
    • -
- -

Once you've applied this uniform brand, you can still use creativity within the body of the page to come up with the best design to help people complete their tasks.

- - - - - - -

Design for findability

-

People can’t succeed at a task if they can’t find where to initiate it.

-

To improve findability, you can work on:

-
    -
  • navigation
    • -
  • internal and external search
    • -
- -

Navigation

- -

Some people will navigate to their task on the Canada.ca site. To support this, making a clear path for people's tasks is crucial. That means planning your navigation structure and taking time to understand what labels will work best for your audience.

- - - -

Internal and external search

-

Some people will search on Canada.ca or external search engines.

-

Using the right keywords and organizing your content properly can help improve search results. Adding structured data can also be a useful technique.

- - - -

Design for comprehension

- -

Once people find the page they need, they have to be able to understand what they read. The way we write and the words we use make an enormous difference.

- - - -

Design for usability

-

Use patterns and layouts that will make it easy for people to complete their tasks. This could be simple text, a filterable table, a button, an interactive checklist or other patterns.

- -

If you can't find an existing pattern or template in the library that does everything you need, you can get creative as long as you respect the mandatory elements of the design system. If your solution works well, we may add it to the Canada.ca design system for others to use when they have similar needs.

- -

Do usability testing to make sure your design really does help people complete their tasks.

- - - -

Design for accessibility and inclusivity

- -

Accessibility and inclusivity have to be at the forefront of your design. Just like translation, accessibility and inclusivity are non-negotiable.

- -

Make sure your design is accessible as you develop it, not as an after-thought.

- -

The Standard on Web Accessibility requires all GC web pages to meet level AA of the Web Content Accessibility Guidelines (WCAG ) 2.0 requirements.

-

But this is only the minimum standard: if possible, shoot for AAA and WCAG 2.1 requirements.

- - - -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- - -
- -
-
Date modified:
-
-
-
- -
- {% include footer-en.html %} - - - - - - - - - - - diff --git a/_gcweb-managers-signup.html b/_gcweb-managers-signup.html deleted file mode 100644 index 14eae416ed..0000000000 --- a/_gcweb-managers-signup.html +++ /dev/null @@ -1,170 +0,0 @@ ---- ---- - - - - - - - Sign up for the GC Web managers mailing list - Canada.ca - - - - - - - - - - - - -
-
- - - -
- -

Sign up for the GC Web managers mailing list

- - - -
-
-
-
* indicates required
-
- - - -
-
- - - -
-
- - - -
-
- Email Format -
    -
    • -
    • -
-
-
- - -
- - -
-
-
-
- - - -
-
- - -
- {% include footer-en.html %} - - - - - - diff --git a/alerts/_alerts-contact.html b/alerts/_alerts-contact.html deleted file mode 100644 index 899572ac61..0000000000 --- a/alerts/_alerts-contact.html +++ /dev/null @@ -1,245 +0,0 @@ ---- ---- - - - - - - - Alerts - Contact page - Canada.ca - - - - - - - - - - - - -
-
- - - -
- - -
-

Alerts - Contact page

- - -
-

Limited service availability -

-

Due to the coronavirus (COVID-19) outbreak, you may experience longer than normal wait times on our phone lines. The automated phone lines are available. If possible, use the online self-service options. -

-

Check service status updates -

-
- - - -
-
-

Most requested

-
-
-
-

Issues with payments to the CRA

-
-
-
-
-

Get in-person tax help

-
-
-
-
-

Change address or details

-
-
-
-
-

Direct deposit and banking

-
-
-
-
-

Report a scam

-
-
-
-
-

Represent a client

-
-
-
- -
- -
-
- -
-
-
- -
-
-

Find a mailing address

-

Find the mailing addresses for your region.

- Find an address
-
-

-

-
- -
-
-
- -
-
-
-

Contacts for personal taxes

-
-
-
-

Issues with My Account

-
-
-
-
-

Get a Notice of Assessment

-
-
-
-
-

Get a GST/HST credit payment

-
-
-
-
-

Get a proof of income (option 'C')

-
-
-
-
-

Check your tax refund status

-
-
-
-
-

Canada child benefit payments

-
-
-
- -
-
- - -
-
-
-
-
-

Contacts for business taxes

-
-
-
-

Issues with My Business Account

-
-
-
-
-

Get an access code (business)

-
-
-
-
-

Charging GST/HST

-
-
-
-
-

EFILE Helpdesk

-
-
-
-
-

Check my instalment balance

-
-
-
-
-

Get a business number (register)

-
-
-
- - -
- - -
- - -
-
- - -
-
-
- - -
- - {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-ilp.html b/alerts/_alerts-ilp.html deleted file mode 100644 index ef47d2f5bc..0000000000 --- a/alerts/_alerts-ilp.html +++ /dev/null @@ -1,389 +0,0 @@ ---- ---- - - - - - - - Alerts - Insitutional landing page - Canada.ca - - - - - - - - - - - - - - - -
-
- - - - - -
- - - -
-
-
-

Limited service availability -

-

Some of our telephone and online services are affected by the outbreak of coronavirus (COVID-19). -

-

Check service status updates -

-
-
-
- -
-
-
-
-

[Institution name]

-

Short description of the institution’s mandate.

- Super task button [optional] -
-
-
-
-
-
-
-
-
-

Featured

- Featured link [optional] -
-
-
-
-
-
-
-
-

Most requested

- -
-
-
-
-
-
-
-

Services and information

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-

[Hyperlink text]

-

- Use action verbs, or simply list keywords to summarize of the - information or tasks that can be accomplished on the page it - links to. -

-
-
-
-
-
-
-
-
-
-
-

Contact us

- -
-

Contact [Institution]

-
-
-

[Top contact task 2]

-
-
-

[Top contact task 3]

-
-
-
-
-
-

About the [Institution]

-
-
-
-

- Mandate -

-
-
-
-
-

- Organizational structure -

-
-
-
-
-

- Transparency -

-
-
-
-
-

- Job opportunities -

-
-
-
-
-

- Reports -

-
-
-
-
-

- Compliance -

-
-
-
-
-

- Enforcement notifications -

-
-
-
-
-

- Institutional link -

-
-
-
-
-

- Institutional link -

-
-
-
-
-

- More: - About the [Institution] -

-
-
-
-
-
-
-

Minister

-

[(Honourable) first and last name]
- Minister's official title

-

[(Honourable) first and last name]
- Minister's official title

-

[(Honourable) first and last name]
- Minister's official title

-
-
-

Follow us

- -
-
-
-
-
- -
-
-
-

News

- - -

More: [Institution] news

-
-
-

Features

-
-
- -
- # -

[Featured hyperlink text]

-

Brief description of the feature being promoted.

-
- -
-
- -
- # -

[Featured hyperlink text]

-

Brief description of the feature being promoted.

-
- -
-
-
-
-
- -
-
-
- - -
- - {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-sit.html b/alerts/_alerts-sit.html deleted file mode 100644 index ba2c06726f..0000000000 --- a/alerts/_alerts-sit.html +++ /dev/null @@ -1,113 +0,0 @@ ---- ---- - - - - - - - Alerts - Service initiation page - Canada.ca - - - - - - - - - - - - - -
-
- - - -
- -

Alerts - Service initiation

- -
-
- -
-
-
-
-
-

Limited service availability -

-

This service is affected by the outbreak of coronavirus (COVID-19). -

-

Check service status updates -

-
-

1. [Step / section page name]

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et a adipisci nostrum optio dolorum sint ipsa facilis nisi quisquam laboriosam.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium odio adipisci ad neque distinctio quod molestias, molestiae accusamus quo aspernatur expedita blanditiis quam! Esse cum modi atque, beatae aliquam, dolor.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aliquid hic numquam obcaecati ea, laborum accusamus culpa atque voluptate distinctio et omnis! Alias, beatae, tenetur.

-
-

[Sub heading]

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti cupiditate voluptatem praesentium, facilis corporis magni esse reiciendis distinctio. Vitae totam iste porro, esse facere obcaecati? Laborum earum minus harum enim.

-
-
-

[Sub heading]

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic minima magni nesciunt nam. Facilis perferendis, adipisci voluptates, enim illo perspiciatis molestias itaque iste qui distinctio asperiores quidem voluptatum sunt.

-
- -
- -
-
- - -
- {% include footer-en.html %} - - - - diff --git a/alerts/_alerts-stable-ip.html b/alerts/_alerts-stable-ip.html deleted file mode 100644 index ebebe35025..0000000000 --- a/alerts/_alerts-stable-ip.html +++ /dev/null @@ -1,388 +0,0 @@ ---- ---- - - - - - - - Alerts - Service initiation page - Canada.ca - - - - - - - - - - - - -
-
- - - -
- -

Alerts - stable Insitutional profile template

- -
-
-
-

Limited service availability -

-

Due to the coronavirus (COVID-19) outbreak, you may experience longer than normal wait times on our phone lines. - The automated phone lines are available. If possible, use the online self-service options. -

-

Check service status updates -

-
-
-
-

The Canadian Food Inspection Agency is dedicated to safeguarding food, animals and plants, which enhances the - health and well-being of Canada's people, environment and economy.

-
-
-
-
-
-

Follow:

- -
- -
-
-
-
-
-

Latest

-
-
-
- -
- - - Coronavirus disease (COVID-19) - -

Outbreak update

-
- - -
- - - Help keep African swine fever out of Canada - - -

Learn about African swine fever and how to protect Canadian pigs.

-
-
-
-
-
    -
    -
-

All recalls -

-
-
-
-
-
-
-

- Most requested -

- -
-
-
-

Services and information

-
-
-
-

Food recalls

-

Warnings and allergy alerts.

-
-
-
-
-

Travelling with pets, - food or plants

-

Rules for travelling with a pet or bringing food or plants to Canada.

-
-
-
-
-

Importing food, plants or - animals

-

Permits, notices, support and online services.

-
-
-
-
-

Exporting food, plants or - animals

-

Licences, certificates, guidance, notices, and online services.

-
-
-
-
-

Food label requirements

-

Claims and statements, standards of identity, grades, notices to industry, reading labels.

-
-
-
-
-

Food safety for industry

-

Standards and guidelines, investigation and response, testing bulletins, report a concern.

-
-
-
-
-

Food licences

-

How to apply, timelines, licence registry.

-
-
-
-
-

Inspection and enforcement -

-

Guidance, investigations, enforcement action and data, compliance. -

-
-
-
-
-

Plant health

-

Plant pests and invasive species, fertilizer, soil, grains and field crops, seeds, cannabis, forestry, - and horticulture.

-
-
-
-
-

Animal health

-

Biosecurity, humane transport, animal welfare, disease and surveillance, feed, veterinary biologics.

-
-
-
-
-

Plant varieties

-

How to register, registered and cancelled varieties, Plant Breeders' Rights, plants with novel traits, - potato varieties.

-
-
-
-
-

Preventive controls

-

Rules and best practices for people, property and processes.

-
-
-
-
-

Organic products

-

Standards, claims, sampling, testing, logos, labels.

-
-
- -
-
-
-
-

- Contact us -

- -
-
-
-
- -
-

Corporate information

-
-
- -
-
-
-
-

Minister

- -
- -
The Honourable Patty Hajdu
-
- -

Minister of Health

-
-
-

Management

- -
- -
Dr. Siddika Mithani
-
- -

CFIA President

-
-
- -
-
-
-
-
-
-

Features

-
-
- -
-
International Year of Plant Health 2020
- -

Learn what it is, and how you can get involved.

-
- -
- -
- -
-
Get the latest, in real time

- -

Subscribe today for food safety, plant and animal health information.

-
- -
- -
- -
-
CFIA from every angle

- -

Learn about what we do and how we do it.

-
- -
-
-
- - -
-
- - -
- {% include footer-en.html %} - - - - - - diff --git a/alerts/_alerts.html b/alerts/_alerts.html deleted file mode 100644 index 21f6769eb2..0000000000 --- a/alerts/_alerts.html +++ /dev/null @@ -1,110 +0,0 @@ ---- ---- - - - - - - - Alerts - Canada.ca - - - - - - - - - - - - -
-
- - - -
- -

Alerts

-
- - -
-

Limited service availability -

-

This service is affected by the outbreak of coronavirus (COVID-19). -

-

Check service status updates -

-
-
-

Limited service availability -

-

Due to the coronavirus (COVID-19) outbreak, some of our offices may be closed and you may experience longer than normal wait times on our phone lines. If it is possible, use the online self-service options. -

-

Check service status updates -

-
-
-

Limited service availability -

-

Some of our telephone and online service is affected by the outbreak of coronavirus (COVID-19). -

-

Check service status updates -

-
- - -
- - - -
-
- - -
- {% include footer-en.html %} - - - - - - diff --git a/coded-layout/_generic-destination-basic.mdx b/coded-layout/_generic-destination-basic.mdx deleted file mode 100644 index fb56c556d7..0000000000 --- a/coded-layout/_generic-destination-basic.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-base.html -date: null -dateModified: '2019-11-28' -description: null -title: 'Basic page ' ---- - -

- - Back to main template page - -

- - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- - - - -

- Components used in this layout -

- - - - - - - - diff --git a/coded-layout/_generic-destination-byline.mdx b/coded-layout/_generic-destination-byline.mdx deleted file mode 100644 index 5f70e02233..0000000000 --- a/coded-layout/_generic-destination-byline.mdx +++ /dev/null @@ -1,78 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-institution.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with institutional byline ---- - -

- - Back to main template page - -

- - -

- - From: - - Treasury Board of Canada Secretariat - - -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- - - - -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_generic-destination-sit1.mdx b/coded-layout/_generic-destination-sit1.mdx deleted file mode 100644 index 8f4dea8ba9..0000000000 --- a/coded-layout/_generic-destination-sit1.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit1.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 1 ---- - -

- - Back to main template page - -

- - -
-
- -
-
- -

- First page -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- - - - -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_generic-destination-sit2.mdx b/coded-layout/_generic-destination-sit2.mdx deleted file mode 100644 index 8e6c78885c..0000000000 --- a/coded-layout/_generic-destination-sit2.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit2.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 2 ---- - -

- - Back to main template page - -

- - -
-
- -
-
- -

- Second page -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- - - - -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_generic-destination-sit3.mdx b/coded-layout/_generic-destination-sit3.mdx deleted file mode 100644 index 2f17e4d615..0000000000 --- a/coded-layout/_generic-destination-sit3.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-sit3.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with ordered navigation - Page 3 ---- - -

- - Back to main template page - -

- - -
-
- -
-
- -

- Third page -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- - - - -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_generic-destination-tab.mdx b/coded-layout/_generic-destination-tab.mdx deleted file mode 100644 index 42274ce022..0000000000 --- a/coded-layout/_generic-destination-tab.mdx +++ /dev/null @@ -1,115 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-onglet.html -date: null -dateModified: '2019-11-28' -description: null -title: Basic page with tabbed interface ---- - -

- - Back to main template page - -

- - -
-
-
- - Tab label 1 - -

- Section heading for first tab -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-
-
- - Tab label 2 - -

- Section heading for second tab -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-
-
- - Tab label 3 - -

- Section heading for third tab -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-

- Sub-section heading -

-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

-
-
-
- - - - -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_generic-destination-toc.mdx b/coded-layout/_generic-destination-toc.mdx deleted file mode 100644 index 9baf61a640..0000000000 --- a/coded-layout/_generic-destination-toc.mdx +++ /dev/null @@ -1,109 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/generique-toc.html -date: null -dateModified: null -description: null -title: Basic page with in-page table of contents ---- - -

- - Back to main template page - -

- - -

- This is an optional intro text before the table of contents. -

- -
-

- On this page -

- -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Section 1 -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Sub-section heading -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Section 2 -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Section 3 -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo urna. -

- -

- Components used in this layout -

- - - - - - - - - diff --git a/coded-layout/_institutional_landing_page_guidance.mdx b/coded-layout/_institutional_landing_page_guidance.mdx deleted file mode 100644 index 38e93e9e7e..0000000000 --- a/coded-layout/_institutional_landing_page_guidance.mdx +++ /dev/null @@ -1,808 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/accueil-institution-directives.html -breadcrumbs: [] -date: null -dateModified: '2021-10-07' -description: null -title: '[Institution name]' ---- - -
-
-
-
- - - Guidance: - - breadcrumb - - - -

- - Mandatory - -

-

- The breadcrumb is: - - Canada.ca - - . -

-
-
-
-
- -
-
-
-
-

- Short description of the institution’s mandate. -

- - Super task button [optional] - -
-
-
-
-
-
-
- -

- Guidance: title, image and super task button -

- - - -

- Title -

-

- - Mandatory - -

-

- Use the applied title of the institution, as specified in the - - Registry of Applied Titles - - . -

-

- Use the legal title if the applied title is not available. -

-

- Do not use acronyms or abbreviations. -

-

- Image -

-

- - Optional - -

-

- The 1200x726 space behind the H1 can be used for a banner or image. The image does not have to take up the whole space and can be customised as needed. -

-

- The image and H1 should be visually distinct from the - - Canada.ca homepage - - to prevent confusion between institutional landing pages and Canada.ca. -

-

- If you don't use an image, the background should be white. -

-

- - Variation: - - The class - - bg-hide-sm - - hides the image on tablet, - - bg-hide-xs - - hides the image on mobile and - - bg-right - - positions the image on the right. -

-

- Super task button -

-

- - Optional - -

-

- Only include a super task button if there is a specific task that has at least a third of the clickthrough on the institution's home page. This is intended mainly for signing into an account. -

-
-
-
-
-
- -
-
-

- Featured link -

- - Featured link [optional] - -
-
-
- - - Guidance: - - featured link - - - -

- - Optional - -

-

- The featured link is a short, descriptive link that your institution needs to feature prominently. It should be used to bring attention to warnings or notices. -

-

- Don't include images in this section. -

-

- The "Featured" heading in this section should have the - - wb-inv - - class, so it is not visible, but still present for the semantic outline and screen readers. -

-
-
-
-
-
- -
-
-
-
-

- Most requested -

-
-
- -
-
-
-
-
- - - Guidance: - - Most requested - - - -

- - Optional - -

-

- Features institution-specific top tasks. -

-

- This component provides shortcuts to the institution's top tasks. However, if all of the institution's top tasks are already included as direct links under Services and information, do not duplicate them here. In that case, you can choose not to include this component. -

-

- - Variations: - - Replace the - - colcount-md-2 - - class with - - colcount-md-1 - - to make it 1 column instead of 2. -

-
-
-
-
-
- -
-
-
-

- Services and information -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-

- - [Hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to. -

-
-
-
-
-
-
-
-
- - - Guidance: - - Services and information - - - -

- - Mandatory - -

-

- Lists the institution-specific topics or top tasks. -

-

- The "Services and information" heading in this section should have the - - wb-inv - - class, so it is not visible, but is still present for the semantic outline and for screen readers. -

-

- - Variations: - - Any variations of the - - Services and information - - pattern can be used in this section. -

-
-
-
-
-
- -
-
- -
-
-
-

- Contact us -

- -
-
-
-

- About the [Institution] -

- -
-
-
-

- Minister -

-

- - [(Honourable) first and last name] - -
- - Minister's official title - -

-

- - [(Honourable) first and last name] - -
- - Minister's official title - -

-

- - [(Honourable) first and last name] - -
- - Minister's official title - -

-
-
-

- Follow us -

- -
-
-
-
-
-
-
- -

- Guidance: Contact us, About the institution, Ministers, and Follow us -

- - - -

- Contact us -

-

- - Optional - -

-

- If there is a main contact page for you institution, put it as the first link. -

-

- You can include links to specific contact tasks in this section. -

-

- About the institution -

-

- - Mandatory - -

-

- Provides links to content from an institution that falls under the - - Corporate information - - and - - Program and policy development - - categories. -

-

- The first 2 links are mandatory: Mandate and Transparency. -

-

- Other links in this section can include: -

-
    -
  • - Programs -
    • -
  • - Consultations -
    • -
  • - Organizational structure -
    • -
  • - Reports -
    • -
  • - Job opportunities -
    • -
  • - any other link that goes to content that falls under Corporate information or Program and policy development -
    • -
-

- Minister or Institutional head -

-

- - Mandatory - -

-

- Links to an institution’s minister(s), including associate minister(s), or its institutional head. -

-

- Text is linked to the appropriate ministerial profile page (see - - Ministerial profile pages - - ). The hyperlink text is the minister or institutional head’s honorific (“The Honourable”) and first and last name. -

-

- Text under the link is the minister or institutional head’s official title. -

-

- Use the appropriate heading: -

-
    -
  • - Minister -
    • -
  • - Parliamentary secretary -
    • -
  • - Associate minister -
    • -
  • - Ombudsman -
    • -
  • - Management -
    • -
-

- Follow us -

-

- - Optional - -

-

- The new icons are optional. -

-

- Follow the - - Social media channels - - guidance. -

-
-
-
-
-
-
- - -
-
-
-

- News -

- -

- More: - - [Institution] news - -

-
-
-

- Features -

-
-
-
- -

- - [Feature hyperlink text] - -

-

- Brief description of the feature being promoted. -

-
-
-
-
- -

- - [Feature hyperlink text] - -

-

- Brief description of the feature being promoted. -

-
-
-
-
-
-
-
-
- - - Guidance: - - News and Features - - - -

- - Optional - -

-

- Use the beta version of the - - Latest news pattern - - . -

-
-
-
-
- - diff --git a/coded-layout/_ministerial-profile-pages.mdx b/coded-layout/_ministerial-profile-pages.mdx deleted file mode 100644 index 58f61166c0..0000000000 --- a/coded-layout/_ministerial-profile-pages.mdx +++ /dev/null @@ -1,619 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/pages-profil-ministres-directives.html -breadcrumbs: -- link: https://www.canada.ca/en/government/ministers.html - title: Ministers and Parliamentary Secretaries -- link: '#' - title: '[Institutional landing page]' -date: null -dateModified: '2021-09-27' -description: null -title: The Honourable [Minister name], MP ---- - -
-
-
-
- - - Guidance: - - Breadcrumb - - - -
-

- Breadcrumb -

-

- - Mandatory - -

-

- For ministers and parliamentary secretaries, the breadcrumb is: -
- - Canada.ca - - > - - Ministers and Parliamentary Secretaries - -

-
-
-
-
-
- -
-
-
-
- - - Guidance: - - Breadcrumb - - - -
-

- Breadcrumb -

-

- - Mandatory - -

-

- For heads of organizations, the breadcrumb trail should link back to the institutional landing - page. -

-
-
-
-
-
- -
- - - - - Parliamentary - secretary - - - - - - - Head of - institution - - - - - - - Minister - - -
-

- [Parliamentary secretary’s name] -

-

- [Head of institution or organization's name] -

-
-
-
-
- - - Guidance: - - Minister’s name and picture - - - -

- - Mandatory - -

-

- Minister's name -

-
    -
  • - Follow mandatory text format: The Honourable [minister’s first and last names], MP -
    • -
  • - Use a unique H1 for the minister’s name -
    • -
-

- - Mandatory - -

-

- Minister's picture -

-
    -
  • - Use the minister’s approved headshot -
    • -
  • - Insert at the top of the page, to the left of the biographical overview -
    • -
  • - Link to a high-resolution image of the minister -
    • -
  • - Do no embed any text in the image -
    • -
-
-
-
-
-
-
-
-
- - - Guidance: - - Name and picture - - - -

- - Mandatory - -

-

- Name -

-
    -
  • - Follow mandatory text format: [first and last names] -
    • -
  • - Use a unique H1 for the name -
    • -
-

- - Optional - -

-

- Picture -

-

- Presents a high-quality image. -

-
-
-
-
-
-

- -

-
-
-

- - Minister of - - [Portfolio name one] - - and - - [Portfolio name - two] - - - - -

-

- Represents the riding of - - [Riding name] - -

- -
-
-
-
- - - Guidance: - - Ministerial role(s) and riding - - - -

- - Mandatory - -

-
    -
  • - List the official role(s) of the minister, with links to lead institutional profile, riding - information, mandate letter, briefing book, and ministerial appointments where applicable -
    • -
  • - Hyperlink the name of the riding to the appropriate riding page from - - www.parl.gc.ca - -
    • -
-
-
-
-
-
-
-

- - [Official title of the head] - -

-
-
-

- - Parliamentary secretary to the - - [Minister of portfolio name] - - -

-
-
-
-
- - - Guidance: - - Parliamentary secretary’s role(s) - - - -

- - Mandatory - -

-

- Lists the official role(s) of the parliamentary secretary, with link(s) to related ministerial - profile. -

-
    -
  • - Follow mandatory text format: Parliamentary Secretary to the Minister of [insert - portfolio name] -
    • -
  • - Hyperlink the supported minister to the appropriate ministerial profile page -
    • -
-
-
-
-
-
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

-
-
-
-
- - - Guidance: - - Biographical overview - - - -

- - Mandatory - -

-

- Provides background information about the minister. -

- -
-
-
-
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

-
-
-
-
- - - Guidance: - - Biographical overview - - - -

- - Mandatory - -

-

- Provides background information about the parliamentary secretary. -

- -
-
-
-
-
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore amet ducimus nihil, voluptate quibusdam? - Excepturi in aspernatur rem ipsam aperiam voluptates fugit officiis culpa, ratione, et maxime impedit. -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique ex commodi autem laudantium aliquam id, - voluptate possimus quod illo velit vero, at dolorum sequi ipsam culpa fugit, molestias quaerat vitae. -

-
-
-
-
- - - Guidance: - - Biographical overview - - - -

- - Mandatory - -

-

- Provides background information about the head of institution. -

-
    -
  • - Keep the text short and concise -
    • -
-
-
-
-
-
-
-

- Contact information -

-

- House of Commons -
- Ottawa, Ontario K1A 0A6 -
- - Telephone: - - 123-456-7890 -
- - Fax: - - 123-456-7890 -
- - Email: - - - [first.last@canada.ca] - - - -

-
-
-
-
- - - Guidance: - - Contact information - - - -

- - Mandatory - -

-
    -
  • - Includes email address, mailing address, telephone number and fax number -
    • -
  • - Hyperink the email address -
    • -
  • - Format numbers as follows: -
      -
    • - the heading “Telephone:” precedes the telephone number -
      • -
    • - the heading “Fax:” precedes the fax number -
      • -
    • - telephone and fax numbers use the format 123-456-7890 -
      • -
    -
    • -
-
-
-
-
-
-
-
-
-

- Features [optional] -

-
-
-

- - [Feature hyperlink text] - -

- -

- Brief description of the feature being promoted. -

-
-
-

- - [Feature hyperlink text] - -

- -

- Brief description of the feature being promoted. -

-
-
-

- - [Feature hyperlink text] - -

- -

- Brief description of the feature being promoted. -

-
-
-
-
-
-
- - - Guidance: - - Features - - - -

- - Optional - -

-

- The design of this section is flexible. You can modify it to suit your needs. This could include items - like news and media gallery. -

-

- If you use features, follow the - - Context-specific - features - - guidance. -

-
-
-
-
- - diff --git a/coded-layout/_theme_topic_guidance.mdx b/coded-layout/_theme_topic_guidance.mdx deleted file mode 100644 index 88ab35e6f2..0000000000 --- a/coded-layout/_theme_topic_guidance.mdx +++ /dev/null @@ -1,561 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/theme-sujet_directives.html -breadcrumbs: -- link: '#' - title: '[Theme]' -- link: '#' - title: '[Topic]' -date: null -dateModified: '2020-06-30' -description: null -title: '[Theme - Topic title]' ---- - -
-
-
-
- - - Guidance: - - breadcrumb - - - -
-

- Breadcrumb -

-

- - Mandatory - -

-

- The breadcrumb should be relevant to your contents IA, such as: -
- - Canada.ca - - > - - [Theme] - - > - - [Topic] - -

-

- Breadcrumbs may be shortened versions of your architecture, such as: -
- - Canada.ca - - > - - Jobs - - and the workplace - - -

-
-
-
-
-
- -
-
-
-
-

- 1-2 sentences that describe the topics and top tasks that can be accessed on this page. - -

-
- -
-
-
- -
-
-
-
- - - Guidance: - - title and image - - - -
-

- Title -

-

- - Mandatory - -

-

- The page title should be descriptive and unique but brief. -

-

- Do not use acronyms or abbreviations. -

-
-
-

- Image -

-

- - Optional - -

-

- The 825x200 space beside the H1 can be used for a banner or image. Image is hidden on mobile view. -

-
-
-
-
-
- - -
-
-
-
-

- Most requested -

-
-
- -
-
-
-
-
-
-
- - - Guidance: - - Most requested - - - -

- - Optional - -

-

- Features theme or topic specific top tasks. -

-

- This component provides shortcuts to the theme or topic top tasks. However, if all of the topic's top tasks are already included as direct links under Services and information, do not duplicate them here. In that case, you can choose not to include this component. -

-

- - Variations: - - Replace the - - colcount-md-2 - - class with - - colcount-md-1 - - if you only have 2-3 most requested items. -

-
-
-
-
-
- -
-
-
-

- Services and information -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-

- - [Topic hyperlink text] - -

-

- Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to -

-
-
-
-
-
- - - Guidance: - - Services and information - - - -

- - Mandatory - -

-

- Lists the sub-topics and destination content related to the current theme or topic. -

-

- The "Services and information" heading in this section should have the - - wb-inv - - class, so it is not visible, but is still present for the semantic outline and for screen readers. -

-

- - Variations: - - Any variations of the - - Services and information - - pattern can be used in this section. -

-
-
-
- - - - - Without social media - - - - - - - With social media - - -
-
-
- - -
-
-
-
-

- Feature -

- -
-
- [Feature hyperlink text] -
-
- -
-
-

- Brief description of the feature being promoted. -

-
-
- -
-
-
-

- On social media -

- -
-
-
-
-
-
- - - Guidance: - - Feature and social media - - - -

- Feature -

-

- - Optional - -

-

- The design of this section is flexible. You can modify it to suit your needs. -

-

- A feature should be contextual to the content on the page. -

-

- Social media -

-

- - Optional - -

-

- The design of this section is flexible. You can modify it to suit your needs. -

-

- Show the name of the account. If there is more than one account per type, use a popup and show people the options to choose from. -

-

- Remove the - - followus-vertical - - class to display the social accounts inline. You may remove the name of the account in this - layout. -

-

- The new icons are optional. -

-
-
-
-
-
- - -
-
-

- Contributors -

-
-
-
-

- From: -

-
-
- -
-
-
-
-
-
-
- - - Guidance: - - Contributors - - - -

- - Optional - -

-

- Provides a link to the institutional landing pages of the departments and/or agencies responsible for content in this theme or topic. -

-
-
-
-
- - diff --git a/coded-layout/_transparency_guidance.mdx b/coded-layout/_transparency_guidance.mdx deleted file mode 100644 index 78790436d9..0000000000 --- a/coded-layout/_transparency_guidance.mdx +++ /dev/null @@ -1,317 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/mise-en-page/transparence_directives.html -breadcrumbs: -- link: '#' - title: '[Breadcrumb]' -date: null -dateModified: '2020-01-24' -description: null -title: 'Transparency: [Institution]' ---- - - -
-

- Proactive disclosure of information, made public so that Canadians and Parliament are better able to hold the Government and public sector officials to account. -

-
-
-
- - - Guidance: - - Page title and introduction - - - -
-

- Title -

-

- Use the applied title of the institution, as specified in the - - Registry of Applied Titles - - . -

-

- Use the legal title if the applied title is not available. -

-

- Do not use acronyms or abbreviations. -

-
-
-

- Introduction text -

-

- Use the suggested introduction text or adjust it to your situation. -

-

- Keep the introduction text short. -

-
-
-
-
-
-
-
-
-

- - Mandate letter from the Prime Minister - -

-

- Commitments and top priorities identified by the government -

-
-
-
-
-

- - Departmental plan - -

-

- Performance goals for the coming fiscal year -

-
-
-
-
-

- - Departmental results report - -

-

- Performance targets met for the 2017-18 fiscal year -

-
-
-
-
-
-
-

- - Travel and hospitality expenses - -

-

- Disclosure of expenditures on Travel, Hospitality and Conferences -

-
-
-
-
-

- - Government contracts awarded - -

-

- Disclosure of contracts over $10,000 -

-
-
-
-
-

- - Grants and contributions - -

-

- Disclosure of transfers of money, goods, services or assets to individuals, organizations or other levels of government -

-
-
-
-
-
-
-

- - Disclosure of serious wrongdoing in the workplace - -

-

- Disclosure of wrongdoing found to have been committed -

-
-
-
-
-

- - Reclassification of public service positions - -

-

- Disclosure of government positions that have been reclassified. -

-
-
-
-
-

- - Quarterly financial reports - -

-

- Quarterly spending at a departmental level -

-
-
-
-
-
-
-

- - Audits and evaluations - -

-

- Annual reports of audit and evaluations for programs and services at [institution] -

-
-
-
-
-

- - Consultations - -

-

- Public consultations and reports on completed consultations -

-
-
-
-
-

- - Briefing documents - -

-

- Briefing notes prepared for the President, Secretary and senior managers -

-
-
-
-
-
-
- - - Guidance: - - Services and information - - - -
-

- Adjust the items in this section to your needs. -

-

- Use the - - Services and information - - pattern. -

-
-
-
-
-
-
-
-
-
-

- Didn’t find what you were looking for -

-

- Access to Information and Privacy ( - - ATIP - - ) requests: -

- -
-
-
-
-
-
- - - Guidance: - - - ATIP - - requests - - - -
-

- Link the "Make an - - ATIP - - request" button to the page where people can make - - ATIP - - requests about your institution. -

-

- Link "Find previous - - ATIP - - requests" to the Open Government portal. You can link to a pre-filtered list for your organization. -

-
-
-
-
-
-
- - diff --git a/common-design-patterns/_canada-dot-ca.html b/common-design-patterns/_canada-dot-ca.html deleted file mode 100644 index 1a3d18bac7..0000000000 --- a/common-design-patterns/_canada-dot-ca.html +++ /dev/null @@ -1,301 +0,0 @@ ---- ---- - - - - - - Canada.ca domain - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Canada.ca domain - Canada.ca design pattern

-

From: Treasury Board of Canada Secretariat

-

Mandatory

-
-

The Canada.ca domain is the primary domain for the Government of Canada's public-facing web presence.

-
-

On this page

- -
-
-

When to use

-

Use the Canada.ca domain for all public-facing Government of Canada web pages, to ensure consistency and enhance trust. This includes websites or services that are intended for people outside government but require a login to access.

-

Two approaches can be used:

- -
-
-

What to avoid

-

Do not use the Canada.ca domain for collaborative sites where the Government of Canada is not the main partner.

-
-
-

How to implement

-

For details on writing Canada.ca URLs, go to URL model.

-
-
-

Discussion

-

Discuss the pattern in github issues

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_carousels.html b/common-design-patterns/_carousels.html deleted file mode 100644 index 7831083b87..0000000000 --- a/common-design-patterns/_carousels.html +++ /dev/null @@ -1,361 +0,0 @@ ---- ---- - - - - - - -Carousels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Carousels - Canada.ca design pattern

- - - - -
- -
- -

Responsive carousels are in-page components used to display multiple different items within the same content space.

-
- -

When to use this pattern

-

Use this component for situations such as image or video galleries.

- -
-
- -

What to avoid

-

Don't use this component:

-
    -
  • to promote activities and initiatives
    • -
  • when a person’s flow must not be interrupted, as in a transactional process
    • -
  • when it would duplicate content from other 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
    • -
-
- -
-

Latest changes

-

2020-10-30: clarified when to use carousels and when not to use them

-
- -
-

Working example

- -
-
-
-

Example

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_charts-graphs.html b/common-design-patterns/_charts-graphs.html deleted file mode 100644 index cfb39c95a8..0000000000 --- a/common-design-patterns/_charts-graphs.html +++ /dev/null @@ -1,358 +0,0 @@ ---- ---- - - - - - - -Charts and graphs - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Charts and graphs - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

-
-
-
-
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.
-
-
-
- - - -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
- - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_checkboxes-radio-buttons.html b/common-design-patterns/_checkboxes-radio-buttons.html deleted file mode 100644 index d385587b14..0000000000 --- a/common-design-patterns/_checkboxes-radio-buttons.html +++ /dev/null @@ -1,950 +0,0 @@ ---- ---- - - - - - -Checkboxes and radio buttons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
- -
- -

Checkboxes and radio buttons: Canada.ca design system

-
-
-
    -
  • Last updated: 2021-06-02
    • -
-
-
-
-

Checkboxes and radio buttons are form controls. They help people select an answer to a question or confirm completion.

-

Large checkboxes and radio buttons are easier to select and use, particularly on mobile devices.

- -
-

On this page

- -
-
-

When to use

-

Checkboxes and radio buttons should be used in interactive questions, like in application forms or wizards:

- -
-
-

What to avoid

-

Don't use checkboxes or radio buttons to present options that are not easily comparable. In these cases, use the Services and information (doormat) pattern:

- -

For a stand alone question with few options and a manageable amount of content per option that does not require separate pages, use expand/collapse or tabs instead:

- -
-
-

How to implement

-

Large checkboxes

-

When to use: Large checkboxes are the recommended checkbox pattern. In particular, large checkboxes should be used when one or more selections can be made to answer a question.

-

What to avoid: Don't use the large checkboxes when building a checklist with items that break across multiple lines or when only a single item can be checked. For these situations, use tickboxes instead.

-
-

Large checkboxes target with explicit labels

-
-
-
- Choose your condiments: -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-
-
- Code -
- HTML - 
<fieldset class="gc-chckbxrdio">
-	<legend>Choose your condiments:</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="checkbox">
-			<input type="checkbox" id="cond1">
-			<label for="cond1">Ketchup</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond2">
-			<label for="cond2">Relish</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond3">
-			<label for="cond3">Mustard</label>
-		</li>
-	</ul>
-</fieldset>
-
-
- CSS - 
.gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
-
-
-

Large disabled checkboxes target with explicit labels

-
-
-
- Choose your condiments: -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-
-
- Code -
- HTML - 
<fieldset class="gc-chckbxrdio">
-	<legend>Choose your condiments:;</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="checkbox">
-			<input type="checkbox" id="cond4" disabled>
-			<label for="cond1">Ketchup</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond5">
-			<label for="cond2">Relish</label>
-		</li>
-		<li class="checkbox">
-			<input type="checkbox" id="cond6" disabled>
-			<label for="cond3">Mustard</label>
-		</li>
-	</ul>
-</fieldset>
-
-
- CSS - 
.gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
-
-
-
-
-

Tickboxes (smaller checkboxes)

-

When to use: Only use tickboxes when there is a single item that can be checked, such as for confirmations.

-

What to avoid: Don't use tickboxes for answers to questions or in checklists. For these situations, use the large checkboxes instead:

- -

Consider using a button instead of tickbox, particularly in cases where it is the primary action or next step on the page:

- -

Single smaller checkbox target with explicit label in an inline form

-
-
-
-
- - -
-
- - -
-
- - -
- -
-
-
-
- Code -
- HTML - 
<form class="form-inline" method="get" action="#">
-	<div class="form-group">
-		<label class="wb-inv" for="exampleInputEmail2">Email address</label>
-		<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email" />
-	</div>
-	<div class="form-group">
-		<label class="wb-inv" for="exampleInputPassword2">Password</label>
-		<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password" />
-	</div>
-	<div class="checkbox gc-chckbxrdio">
-		<input id="remember2" type="checkbox" />
-		<label for="remember2">Remember me</label>
-	</div>
-	<button type="submit" class="btn btn-default">Sign in</button>
-</form>
-
-
- CSS - 
.gc-chckbxrdio label {
-  cursor: pointer;
-  display: block;
-  font-size: 20px;
-}
-
-.gc-chckbxrdio legend {
-  float: none;
-  font-size: 22px;
-  font-weight: 700;
-  margin-bottom: 15px;
-  margin-top: 0;
-}
-
-.gc-chckbxrdio input[type="checkbox"] {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-.gc-chckbxrdio input[type="checkbox"][disabled] + label {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label {
-  display: inline-block;
-  line-height: 2;
-  margin-left: 36px;
-  width: auto;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label::before {
-  border: 4px solid #fff;
-  -webkit-box-shadow: 0 0 0 2px #000;
-          box-shadow: 0 0 0 2px #000;
-  content: "";
-  display: inline-block;
-  height: 36px;
-  left: 0;
-  position: absolute;
-  top: 2px;
-  width: 36px;
-}
-
-.gc-chckbxrdio input[type="checkbox"] + label:hover::before {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-  background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-
-.gc-chckbxrdio input[type="checkbox"]:focus + label::before {
-  -webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-          box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label,
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label + ul {
-  font-size: 17px;
-  min-height: 23px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"] + label::before {
-  height: 24px;
-  left: 6px;
-  top: 4px;
-  width: 24px;
-}
-
-.gc-chckbxrdio.checkbox input[type="checkbox"]:checked + label::after {
-  border-width: 0 3px 3px 0;
-  height: 16px;
-  left: 14px;
-  top: 6px;
-  width: 9px;
-}
-
-.gc-chckbxrdio input[type="checkbox"]:checked + label::after {
-  border-color: #333;
-  border-style: solid;
-  border-width: 0 5px 5px 0;
-  content: "";
-  display: inline-block;
-  height: 26px;
-  left: 12px;
-  position: absolute;
-  top: 4px;
-  -webkit-transform: rotate(45deg);
-          transform: rotate(45deg);
-  width: 13px;
-}
-
-.gc-chckbxrdio.form-inline .label-inline {
-  padding-right: 20px;
-}
-
-.gc-chckbxrdio.form-inline .label-inline label {
-  padding-left: 10px;
-}
-
-
-
-
-

Radio buttons

-

Large radio buttons target with explicit labels

-

When to use: Use radio buttons when only one selection can be made in a list.

-
-
-
- Which is your favorite pet? -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-
-
- Code -
- HTML - 
<fieldset class="gc-chckbxrdio">
-	<legend>Which is your favorite pet?</legend>
-	<ul class="list-unstyled lst-spcd-2">
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-1">
-			<label for="animal-1">Dog</label>
-		</li>
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-2">
-			<label for="animal-2">Cat</label>
-		</li>
-		<li class="radio">
-			<input type="radio" name="animal" id="animal-3">
-			<label for="animal-3">Rat</label>
-		</li>
-	</ul>
-</fieldset>
-
-
- CSS - 

-
-
-
-
-

Large radio buttons target with explicit labels in an inline form

-
-
-
- Choose an option: -
- - -
-
- - -
-
- - -
-
-
-
-
- Code -
- HTML - 
<fieldset class="gc-chckbxrdio form-inline">
-	<legend>Choose an option</legend>
-	<div class="label-inline">
-		<input id="inlineRadio1" type="radio" name="optradio">
-		<label for="inlineRadio1">Option 1</label>
-	</div>
-	<div class="label-inline">
-		<input id="inlineRadio2" type="radio" name="optradio">
-		<label for="inlineRadio2">Option 2</label>
-	</div>
-	<div class="label-inline">
-		<input id="inlineRadio3" type="radio" name="optradio">
-		<label for="inlineRadio3">Option 3</label>
-	</div>
-</fieldset>
-
-
- CSS - 
.provisional.gc-chckbxrdio label {
-	cursor: pointer;
-	display: block;
-	font-size: 20px;
-}
-.provisional.gc-chckbxrdio legend {
-	float: none;
-	font-size: 22px;
-	font-weight: 700;
-	margin-bottom: 15px;
-	margin-top: 0;
-}
-.provisional.gc-chckbxrdio input[type="radio"] {
-	border: 0;
-	clip: rect(0 0 0 0);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}
-.provisional.gc-chckbxrdio input[type="radio"][disabled] + label {
-	cursor: not-allowed;
-	opacity: .5;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label {
-	display: inline-block;
-	line-height: 2;
-	margin-left: 36px;
-	width: auto;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label::before {
-	border: 4px solid #fff;
-	-webkit-box-shadow: 0 0 0 2px #000;
-	box-shadow: 0 0 0 2px #000;
-	content: "";
-	display: inline-block;
-	height: 36px;
-	left: 0;
-	position: absolute;
-	top: 2px;
-	width: 36px;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label:hover::before {
-	background-image: -webkit-gradient(linear, left top, left bottom, from(#e6e5e5), color-stop(50%, white));
-	background-image: linear-gradient(to bottom, #e6e5e5, white 50%);
-}
-.provisional.gc-chckbxrdio input[type="radio"]:focus + label::before {
-	-webkit-box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-	box-shadow: 0 0 0 2px #000, 0 0 8px 4px #3b99fc;
-}
-.provisional.gc-chckbxrdio input[type="radio"] + label::before {
-	border-radius: 50%;
-}
-.provisional.gc-chckbxrdio input[type="radio"]:checked + label::before {
-	background: #444;
-}
-.provisional.gc-chckbxrdio.form-inline .label-inline {
-	padding-right: 20px;
-}
-.provisional.gc-chckbxrdio.form-inline .label-inline label {
-	padding-left: 10px;
-}
-
-
-
-
-

Configuration options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionDescriptionHow to configure
Large input targetsDesign for large checkbox and radio buttons.Add the gc-chckbxrdio class to the fieldset or the container element surrounding the checkbox/radio-button inputs.
TickboxesSmall checkboxes when there is a single item that can be checked, such as for confirmations.The class gc-chckbxrdio and the class checkbox have to be enabled on the container element surrounding the targeted checkbox.
Disabled state Disabled inputs will not be clickable. Visual indications include greying out the control and adding a "stop" cursor icon on hover.To toggle a disabled state, add a disabled attribute to the input field
Inline formatInline radio buttons or checkboxes will display side by side on larger screens and wrap to new lines, rather than vertically.Add the form-inline class to surrounding container of the checkboxes or radio buttons. Also add the label-inline class to each checkbox or radio button container.
-
-

Research and blog posts

-

We successfully tested the use of interactive checklists during an optimization project with the Canada Revenue Agency and to create checklists for travel restrictions due to COVID-19.

- -
-

Latest changes

-
-
Version 0.1:
- - -
-
Launched the beta version of the checkboxes and radio buttons pattern.
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_collapsible-content.html b/common-design-patterns/_collapsible-content.html deleted file mode 100644 index cbae81d268..0000000000 --- a/common-design-patterns/_collapsible-content.html +++ /dev/null @@ -1,462 +0,0 @@ ---- ---- - - - - - - -Expand/collapse - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Expand/Collapse - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -

The expand/collapse pattern (also known as accordion) allows content to be hidden until requested. The pattern consists of a trigger link that shows or hides the content.

-
-

Example:

-
- You must click on this area to expand and collapse the content -

This text is hidden until it is revealed.

-
-
-

On this page

- -
- -

When to use

-

The expand/collapse pattern can be used in 2 situations:

- -

1. Presenting a choice between mutually exclusive answers

-

Use this pattern when people need to get different answers depending on their situation and when these answers are mutually exclusive.

-

This reduces the risk of having people wrongly think they got the answer that applies to their situation.

-

2. Presenting secondary information

-

Use this pattern to prevent secondary content from interfering with the main task.

-

This can be content that applies to most people, but that only a few people may need to use (for example, a privacy statement or additional details not needed to accomplish the main task).

-

It can also be content that applies only to a minority of people (such as when there is specific information for a specific audience).

-
-
-

What to avoid

- -

Don't use this pattern if:

-
    -
  • the majority of people need the content to accomplish the main task (unless the answers are mutually exclusive)
    • -
  • people need to answer several questions to get the answer that applies to them (use interactive questions instead)
    • -
  • one of the mutually exclusive answers has multiple sub-tasks or more than one page of supporting content (use interactive questions instead)
    • -
- - -
-
-

How to implement

-

Presenting a choice between mutually exclusive answers

-
-

Determine if you are in a shared custody situation

-

Does the child spend their time:

-
    -
  • -
    - about equally between both parents -

    If the child shares their time about equally between the parents, then both parents are considered to have shared custody of that child...

    -
    -
    • -
  • -
    - mostly with you -

    If the child lives with you most of the time, you are considered to have primary custody for the purposes of the Canada child benefit...

    -
    -
    • -
  • -
    - mostly with the other parent -

    If the child lives with the other parent most of the time, the other parent is considered to have primary custody for the purposes of the Canada child benefit...

    -
    -
    • -
-
- -
-Code -
<h3>Determine if you are in a shared custody situation</h3>
-<p>Does the child spend their time:</p>
-<ul class="list-unstyled">
- <li>
-  <details>
-   <summary>about equally between both parents</summary>
-   <p>If the child shares their time about equally between the parents, then both parents are considered to have <strong>shared custody</strong> of that child...</p>
-  </details>
- </li>
- <li>
-  <details>
-   <summary>mostly with you</summary>
-   <p>If the child lives with you most of the time, you are considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
-  </details>
- </li>
- <li>
-  <details>
-   <summary>mostly with the other parent</summary>
-   <p>If the child lives with the other parent most of the time, the other parent is considered to have <strong>primary custody</strong> for the purposes of the Canada child benefit...</p>
-  </details>
- </li>
-</ul>
-
- -

Presenting secondary information

-
-

Estimate your payments

-

Use the estimator to help you plan your budget.

-

For example, you can estimate what amount you would get if:

-
    -
  • you have a new child
    • -
  • your income changes
    • -
  • you start or end shared custody
    • -
-
- See the math behind Canada child benefit payments -

How are payments calculated

-

Every month, Canada child benefit payments are adjusted based on:

-
    -
  • the number of children in your care
    • -
  • the age of your children
    • -
  • your marital status
    • -
  • your family net income from the previous year
    • -
-

...

-
-
- -
- Code - 
<h3>Estimate your payments</h3>
-<p>Use the estimator to help you plan your budget.</p>
-<p>For example, you can estimate what amount you would get if:</p>
-<ul>
- <li>you have a new child</li>
- <li>your income changes</li>
- <li>if you start or end shared custody</li>
-</ul>
-<details>
- <summary>See the math behind Canada child benefit payments</summary>
- <h3>How are payments calculated</h3>
- <p>Every month, Canada child benefit payments are adjusted based on:</p>
- <ul>
-  <li>the number of children in your care</li>
-  <li>the age of your children</li>
-  <li>your marital status</li>
-  <li>your family net income from the previous year</li>
- </ul>
- <p>...</p>
-</details>
-
-
-
-
-

Research and blog posts

-

We successfully tested the use of the expand/collapse pattern to encourage people to choose between mutually exclusive options during 2 optimization projects with the Canada Revenue Agency.

- - -

Latest changes

-

2019-11-28: guidance was changed to allow the use of expand/collapse for mutually exclusive answers.

- -

Discussion

-

Discuss the pattern in github issues

- -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_contact-information.html b/common-design-patterns/_contact-information.html deleted file mode 100644 index 89114bb664..0000000000 --- a/common-design-patterns/_contact-information.html +++ /dev/null @@ -1,383 +0,0 @@ ---- ---- - - - - - - -Contact information - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Contact information - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_contextual-alerts.html b/common-design-patterns/_contextual-alerts.html deleted file mode 100644 index bc6669dc50..0000000000 --- a/common-design-patterns/_contextual-alerts.html +++ /dev/null @@ -1,453 +0,0 @@ ---- ---- - - - - - -Contextual alerts - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
-
-

Contextual alerts: Canada.ca design system

-
-
-
    -
  • Last updated: 2022-08-24
    • -
-
-
-
-

Alerts are short, prominent notices meant to draw attention to an important message or change. They are often time-sensitive. The label, colour, and icon indicate the type of message and its urgency.

-
-
-

Alert heading

-

Alert description

-
-
-
-

On this page

- -
-
-

When to use

-

Use contextual alerts to:

-
    -
  • bring a person’s attention to an important change at the page or subsection level like a service or site outage
    • -
  • draw attention to important recent or upcoming changes to a process or service
    • -
  • provide the result of a user-action, for example, confirm success, or notify a person of an error
    • -
  • warn a person of a consequence of an action or inaction related to their task
    • -
-

To use contextual alerts during urgent service disruptions, follow these guidelines:

- -
-
-

What to avoid

-

Do not use contextual alerts:

-
    -
  • to provide information about a normal step in a process or task
    • -
  • to simply add emphasis to content
    • -
  • in cases where a warning is neither high risk nor frequently experienced
    • -
  • to create labels, use this component instead: - -
    • -
-
-
-

How to implement

-

Write alert text for a grade 6 to 8 reading level.

-

Keep alert text very brief. Provide further details in the appropriate section or page.

-

Remove alert text once the issue is resolved or enough time has passed that the information provided is no longer new.

-

Strictly limit the number of alerts on the page to avoid alert fatigue.

-

Place the alert in the appropriate context:

-
-
Applies to the entire site
-
Place it at the top of the page above the main heading
-
Applies to the page
-
Place it underneath the page heading
-
Applies to a subsection of the page
-
Place it within that subsection, generally underneath the subsection heading or between 2 paragraphs
-
-

Use the appropriate type of alert:

-
    -
  1. Danger alert
    2. -
  2. Warning alert
    3. -
  3. Info alert
    4. -
  4. Success alert
    5. -
-

1. Danger alert

-

When to use: Use the danger alert to draw attention to a situation that could place someone in danger, such as a do not travel warning. You can also use it to alert a person of a technical issue that could cause them to be unable to complete their task, such as an invalid submission of data in a form.

-
-
-

If pregnant or considering pregnancy - Notice regarding both partners

-

Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.

-
-
-
- Code - 
<section class="alert alert-danger">
-  <h3>If pregnant or considering pregnancy - Notice regarding both partners</h3>
-  <p>Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.</p>
-</section>
-
-
-
-

2. Warning alert

-

When to use: Use the warning alert to draw attention to:

-
    -
  • a possible consequence of an action or inaction, such as legal penalty that could apply
    • -
  • the date of an upcoming change to a policy or process that will affect a significant number of people, such as a change to travel requirements
    • -
-
-
-

Changes to impaired driving and cannabis-related crime laws

-

New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.

-

New penalties and how you could be afected

-
-
-
- Code - 
<section class="alert alert-warning">
- <h3>Changes to impaired driving and cannabis-related crime laws</h3>
- <p>New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.</p>
- <p><a href="https://www.canada.ca/en/immigration-refugees-citizenship/news/notices/impaired-driving-cannabis-penalties-affect-immigration-status.html">New penalties and how you could be afected</a></p>
-</section>
-
-
-
-
-

Starting April 1, 2022, pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.

-

News release

-
-
-
- Code - 
<section class="alert alert-warning">
-
-<p><strong>Starting April 1, 2022,</strong> pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.</p>
-<p><a href="https://www.canada.ca/en/public-health/news/2022/03/government-of-canada-will-remove-pre-entry-test-requirement-for-fully-vaccinated-travellers-on-april-1.html">News release</a></p>
-</section>
-
-
-
-

3. Info alert

-

When to use: Use the info alert to draw attention to a clarification of surrounding content or helpful advice, such as the number of weeks it will take to receive a refund when an application is sent by mail vs by phone.

-
-
-

Current status of the call for applications: Closed

-

Thank you for your interest in Canada Summer Jobs. Applications are now closed.

-
-
-
- Code - 
<section class="alert alert-info">
-  <h3>Current status of the call for applications: Closed</h3>
-  <p>Thank you for your interest in Canada Summer Jobs. Applications are now closed.</p>
-</section>
-
-
-
-

4. Success alert

-

When to use: Use success alert to draw attention to a successful action, such as to confirm a submission or the completion of a task.

-
-
-

Your request for publicly available data from the list of charities has been successful

-

The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.

-
-
-
- Code - 
<section class="alert alert-success">
-  <h3>Your request for publicly available data from the List of charities has been successful</h3>
-  <p>The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.</p>
-</section>
-
-
-

Research and blog posts

-

This style of alert was used successfully during a project to improve content on travel advisories:

- -

Latest changes

-
-
-
- -
-
Added an additional warning alert example that includes a date.
-
- Added link to a blog post on alert fatigue.
-
- Adjusted definition and implementation advice.
-
-
-
- -
-
Promoted the beta alert pattern to the stable alert pattern.
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_contributors.html b/common-design-patterns/_contributors.html deleted file mode 100644 index d814e848b8..0000000000 --- a/common-design-patterns/_contributors.html +++ /dev/null @@ -1,331 +0,0 @@ ---- ---- - - - - - - - Contributors - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Contributors - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_date-modified.html b/common-design-patterns/_date-modified.html deleted file mode 100644 index 535a9af618..0000000000 --- a/common-design-patterns/_date-modified.html +++ /dev/null @@ -1,360 +0,0 @@ ---- ---- - - - - - - - Date modified - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- -

Date modified: Canada.ca design - pattern

- - - - - -
- - - -

From: Treasury Board of Canada Secretariat -

-
- -
-
-
-

Mandatory on all pages

- -

The date modified component indicates how recently the content of a web page has been updated.

-
-
Date modified section
- Screenshot of a webpage: button labeled 'Report a problem on this page' appears on the left. 'Share this page' appears on the right, and 'Date modified: 2017-12-05' appears highlighted below. - -
-
-
-

Objectives

-

Use the date modified component to provide a person with the date that the content was last updated.

-
-
-

When to use the Date modified pattern

-

The Date modified pattern is mandatory on all pages. In applications, it can be replaced by a version number. For - more information, go to the Mandatory - elements of the design system.

-
-
-

When to update the Date modified

-

This component:

-
    -
  • should generally only be updated when significant content changes occur
    • -
  • should generally not be updated for corrections to typographical errors or changes to the underlying HTML code -
    • -
  • can be updated manually to signify that the content has been fully reviewed and is still valid as of that date -
    • -
-

For applications, the component can be replaced by a “Version number” if desired.

-
-
-

How to implement the Date modified

-
    -
  • This component always starts with the words “Date modified:” followed by a date.
    • -
  • The date appears using the common numeric method, for example: 2016-10-04.
    • -
  • Placement: left-aligned, below the main content area. If used in conjunction with the Report a problem pattern, - this - component appears after the button to report a problem with the page.
    • -
-
- -
- -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_disclaimer-overlay.html b/common-design-patterns/_disclaimer-overlay.html deleted file mode 100644 index 6fcc0fc61d..0000000000 --- a/common-design-patterns/_disclaimer-overlay.html +++ /dev/null @@ -1,337 +0,0 @@ ---- ---- - - - - - - -Disclaimer overlay - Canada.ca design pattern- Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Disclaimer overlay - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

-
-
-
-
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.
-
-
-
- -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_doc-template-en.html b/common-design-patterns/_doc-template-en.html deleted file mode 100644 index bf4f5aaa7d..0000000000 --- a/common-design-patterns/_doc-template-en.html +++ /dev/null @@ -1,377 +0,0 @@ ---- ---- - - - - - - [Pattern name] - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

[Pattern name]: Canada.ca design system

- -
-
-
    -
  • Beta
    • -
  • Last updated: [Date]
    • - -
-
- -
- - -

[Description of what the pattern does]

- -
-

[Optional image or coded example of the pattern so it can be visually identified quickly]

-
-
-

On this page

- -
-
-

When to use

-

[Describe when this pattern should be used]

- -
-
-

What to avoid

-

[Details of what should be avoided when using this pattern]

-
-
-

How to implement

-

[Coded examples of main variants, with optional specific When to to use and What to avoid for specific variants]

-
    -
  1. Variant 1
    2. -
  2. Variant 2
    3. -
-

1. Variant 1

-

When to use: [When to use this variant]

-

What to avoid: [What to avoid with this variant] -

-

[Coded example of variant 1]

-
-
- Code - 
<p>[Coded example of variant 1]</p>
-
-

2. Variant 2

-

When to use: [When to use this variant]

-

What to avoid: [What to avoid with this variant] -

-

[Coded example of variant 2]

-
-
- Code - 
<p>[Coded example of variant 2]</p>
-
-

Customizing [pattern] (optional)

- - - - - - - - - - - - - - - - - - - - - - - - - -
OptionDescriptionHow to use
[Option 1][Description of option 1][How to use, modify or customize option 1]
[Option 2][Description of option 2][How to use, modify or customize option 2]
[Option 3][Description of option 3][How to use, modify or customize option 3]
-
-

Research and blog posts

-

[Optional: Links to blog posts and research summaries that support the use of the pattern]

-

Latest changes

-
-
-
-
[Description of change]
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
- - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_download-links.html b/common-design-patterns/_download-links.html deleted file mode 100644 index 4415249dea..0000000000 --- a/common-design-patterns/_download-links.html +++ /dev/null @@ -1,303 +0,0 @@ ---- ---- - - - - - - -Download links - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Download links - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_feature-banner.html b/common-design-patterns/_feature-banner.html deleted file mode 100644 index f79ea18f81..0000000000 --- a/common-design-patterns/_feature-banner.html +++ /dev/null @@ -1,334 +0,0 @@ ---- ---- - - - - - - - Promotional feature banner - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Promotional feature banner - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

-
-
-
-
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.
-
-
-
- - -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_feature-tiles.html b/common-design-patterns/_feature-tiles.html deleted file mode 100644 index c22e885ead..0000000000 --- a/common-design-patterns/_feature-tiles.html +++ /dev/null @@ -1,331 +0,0 @@ ---- ---- - - - - - - -Context-specific features - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Context-specific features - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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
    • -
  • When applying images in contextual features, follow specifications in the images pattern
    • -
  • 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

-
-
-
-
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

-
-
-
-
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.
-
-
-
-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_global-header-workshop.html b/common-design-patterns/_global-header-workshop.html deleted file mode 100644 index 6a2e3ed63f..0000000000 --- a/common-design-patterns/_global-header-workshop.html +++ /dev/null @@ -1,376 +0,0 @@ ---- ---- - - - - - - Global header - Canada.ca design pattern - Canada.ca - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Global header - Canada.ca design pattern

-
-
- - -

From: Treasury Board of Canada Secretariat

-

Mandatory

- update pictures -
-
-
Global header – large screen
- Diagram of global header for large screens. Text version below: -
- Text version -

The global header has the Government of Canada signature in the top left. Under the signature is the theme and topic menu, and under the menu is the breadcrumb trail. The language toggle link is at the rop right. Under the language toggle is the site search box.

-
-
-
-
-
-
Global header – small screen
- Diagram of global header for small screens. Text version below: -
- Text version -

The global header has the Government of Canada signature in the top left. The language toggle link is at the rop right. Under the signature and the language toggle is the site search box. Under the search box is the theme and topic menu. Under the theme and topic menu is the breadcrumb trail.

-
-
-

The global header is at the top of each Government of Canada web page.

-

The header consists of the following elements:

-
    -
  • Background colour (white)
    • -
  • Government of Canada signature
    • -
  • Link to canada.ca landing page from Government of Canada signature
    • -
  • Language toggle
    • -
  • Site search box
    • -
  • Sign in button
    • -
  • Theme and topic menu
    • -
  • Key line
    • -
  • Breadcrumb trail
    • -
-
- -

How to implement

-

Elements can be configured for the type of asset you’re creating.

- -
    -
  • Standard web page: Pages where people can navigate away without losing data, triggering errors or terminating their - session.
    • -
  • Transactional page: Pages with an interaction task where people might lose data, trigger errors, or terminate their - session if they navigate away from the page.
    • -
  • Campaigns: Landing pages for external marketing or advertising campaigns. The flexibility in layout allows institutions - to match elements of their external campaign with the landing page.
    • -
  • Web application: Government of Canada Web applications that require authentication.
    • -
-

When to use

-

The global header should be on all pages from the Goverment of Canada. Some elements are optional in these situations:

-
    -
  • Transactional scenarios: Pages where people are engaged in a transactional process such that mistakenly following other links would result in errors, loss of data or accidental termination of the session.
    • -
  • Campaigns: Landing pages for external marketing or advertising campaigns. The flexibility in layout allows institutions to match elements of their external campaign with the landing page.
    • -
-

How to implement

-

If you're not on the Managed Web Service, you can implement the global header by using the Centrally Deployed Templates Solution (CDTS).

-

Follow these requirements:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Global header requirements
Header elementStandard pageCampaign pageTransactional page
Government of Canada signature (linked to Canada.ca home)MandatoryMandatoryMandatory, but link to Canada.ca home page is optional
Language toggleMandatoryMandatoryMandatory table 1 note 1
Site search boxMandatoryOptionalOptional
Theme and topic menuMandatoryOptionalOptional
Breadcrumb trailMandatoryOptionalOptional
Background colour (white)MandatoryOptionalMandatory
-

Table 1 Notes

-
-
Table 1 Note 1
-
-

Transactional web applications must be developed so that people can toggle between official languages on any given page or screen. Some legacy web applications may not have been designed this way. Such applications should be updated to allow this functionality. Until they are replaced or updated, the language toggle can be omitted if its use would result in a loss of data.

-

Return to table 1 note 1 referrer

-
-
-
-

Latest changes

-

2020-06-25: the small screen version was modified to a slimmer version

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - diff --git a/common-design-patterns/_icons.html b/common-design-patterns/_icons.html deleted file mode 100644 index 9d4c9eb1ec..0000000000 --- a/common-design-patterns/_icons.html +++ /dev/null @@ -1,345 +0,0 @@ ---- ---- - - - - - - - Icons - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Icons - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_images.html b/common-design-patterns/_images.html deleted file mode 100644 index 71e118ca90..0000000000 --- a/common-design-patterns/_images.html +++ /dev/null @@ -1,374 +0,0 @@ ---- ---- - - - - - - - Images - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Images - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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
    • -
  • Do not use 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
      • -
    -
    • -
-
-
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_in-page-toc.html b/common-design-patterns/_in-page-toc.html deleted file mode 100644 index eaec869d04..0000000000 --- a/common-design-patterns/_in-page-toc.html +++ /dev/null @@ -1,339 +0,0 @@ ---- ---- - - - - - - - In-page table of contents - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

In-page table of contents - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- - - -
-

The in-page table of contents pattern is a list of links that lead to subsections of the same page. This pattern is intended for long documents that exist as a single page.

-
-

Objective

-

Use the in-page table of contents pattern to:

-
    -
  • provide an outline for the content of a single page that has multiple subsections
    • -
  • provide an alternative method to jump to specific content on the page, without using the scroll bar
    • -
-

Use this pattern when:

-
    -
  • excessive scrolling is required to view all of the content on the page
    • -
  • the page is divided into subsections, each with its own headings
    • -
-

Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.

-
-
-

How and when to use an in-page table of contents

-
    -
  • Always position the in-page table of contents pattern at the start of the page, before the substantive content of the page begins
    • -
  • Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site
    • -
  • Present links using list elements—bullets for an unordered list, numbers for an ordered list
    • -
  • Use standard linking styles to ensure that the links present as clickable elements
    • -
  • Present the in-page table of contents aligned to the left, as a vertical list, as opposed to using a column layout
    • -
-
-
-
-
-
Figure 23. In-page table of contents pattern
- Image of in-page table of contents pattern. Details on this graphic can be found in the surrounding text.
-
-
-
-
-
-
- - -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_institutional-byline.html b/common-design-patterns/_institutional-byline.html deleted file mode 100644 index a2a58679aa..0000000000 --- a/common-design-patterns/_institutional-byline.html +++ /dev/null @@ -1,329 +0,0 @@ ---- ---- - - - - - - -Institutional byline - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Institutional byline - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_interactive-questions.html b/common-design-patterns/_interactive-questions.html deleted file mode 100644 index 1b9b276108..0000000000 --- a/common-design-patterns/_interactive-questions.html +++ /dev/null @@ -1,384 +0,0 @@ ---- ---- - - - - - - - Interactive questions - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - -
- - -

Interactive questions - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- - -
-

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
    • -
-
-
- -

Research and blog posts

- - - -
-

Working example

- -
-
-

Example

-
-
-
-
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.
-
-
- -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_labels.html b/common-design-patterns/_labels.html deleted file mode 100644 index 8dfd4d2963..0000000000 --- a/common-design-patterns/_labels.html +++ /dev/null @@ -1,408 +0,0 @@ ---- ---- - - - - - -Labels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
-
-

Labels: Canada.ca design system

- -
-
-
    -
  • Last updated: 2021-02-08
    • - -
-
- -
-
-

Labels are visual indicators that assign a tag to items such as events, products, programs or services.

- -
- Default - Primary - Success - Information - Warning - Danger -
- -
-

On this page

- -
-
-

When to use

-

Use labels to:

- -
    -
  • signal that an item belongs to a category (for example, to show if some programs are open, some closed, and some will open soon)
    • -
  • label or stamp items with additional information, like the date an item was updated, or the closure of an area
    • -
  • show different stages of progress in a list of items (for example, to show which vaccines are under review and which ones are approved)
    • -
- -

In your design, ensure labels are placed very close to the item they apply to.

-
-
-

What to avoid

-
    -
  • Don't use long labels or full sentences - keep them short
    • -
  • Don't use labels that have overlapping meaning
    • -
  • Don't use labels to add style to text
    • - -
-
-
-

How to implement

- - -

Use the right type of label:

-
    -
  1. Default
    2. -
  2. Primary
    3. -
  3. Success
    4. -
  4. Information
    5. -
  5. Warning
    6. -
  6. Danger
    7. -
- - -

1. Default label

-

When to use: Use to give additional information about an item, like adding dates to a list of items.

- -
- Evaluation of the Citizenship Program July 2020 -
-
- Code - 
<a href="#">Evaluation of the Citizenship Program</a> <span class="label label-default">July 2020</span>
-
-

2. Primary label

-

When to use: Use to signal an important information about an item, like when a new program is not yet open but will be soon.

- -
-

Canada Recovery Benefit (CRB) Opening October 12

-
-
- Code - 
<h3 class="h5"><a href="#">Canada Recovery Benefit (CRB)</a> <span class="label label-primary">Opening October 12</span></h3>
-
-

3. Success label

-

When to use: Use to signal an item is open, available or approved.

- -
-

Protecting Canada’s Fresh Water Open - Accepting input

- -
-
- Code - 
<p><a href="#">Protecting Canada’s Fresh Water</a> <span class="label label-success">Open - Accepting input</span></p>
-
-

4. Information label

-

When to use: Use to tag an item with a value, like identifying a new blog post. "New" labels should be temporary.

- - -
-

Labelling study: which words work best New

-
-
- Code - 
<h3 class="h5"><a href="#">Labelling study: which words work best</a> <span class="label label-info">New</span></h3>
-
-

5. Warning label

-

When to use: Use when you want to bring attention to an item to warn people of a change, like if a program is ending soon.

- -
-

Canada Emergency Response Benefit (CERB) Ending soon

-
-
- Code - 
<h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-warning">Ending soon</span></h3>
-
- - -

6. Danger label

-

When to use: Use when an item is no longer available, like when a program has ended or an area is closed.

- -
-

Canada Emergency Response Benefit (CERB) Closed

-
-
- Code - 
<h3 class="h5"><a href="#">Canada Emergency Response Benefit (CERB)</a> <span class="label label-danger">Closed</span></h3>
-
- - -
-

Research and blog posts

-

We tested the use of labels successfully during the transition period between the Canada Economic Response Benefit and the new benefits that replaced it. Adding labels to the different programs on the topic page made it easier for people to understand what was available to them.

- -

Latest changes

-
-
-
-
Added label documentation to the design system
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- - -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - diff --git a/common-design-patterns/_latest-news.html b/common-design-patterns/_latest-news.html deleted file mode 100644 index 0651c4d98e..0000000000 --- a/common-design-patterns/_latest-news.html +++ /dev/null @@ -1,426 +0,0 @@ ---- ---- - - - - - -Latest news - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
-
- -

Latest news: Canada.ca design system

-
-
-
    -
  • Last updated: 2022-09-23
    • -
-
-
- -
-

The Latest news pattern features the most recent news items posted by the institution, organization or entity.

- -
-

On this page

- -
- -
-

When to use

-

Use this pattern on the following templates:

- -
- -
-

What to avoid

-

Make sure this pattern doesn't get in the way of top task content.

-
- -
-

How to implement

- -

You can use either the beta or the stable version of this pattern.

- -

Beta latest news

-

The beta version is used on the institutional landing page. The code is still under review. It may still be subject to minor changes.

-

The beta version will eventually replace the stable version.

- - -
-
-
-
-

News

- - - -

More: [Institution] news

-
-
-

Features

-
-
- -
# -
[Featured hyperlink text]
-

Brief description of the feature being promoted.

-
- -
-
- -
# -
[Featured hyperlink text]
-

Brief description of the feature being promoted.

-
- -
-
-
- -
-Code -
<div class="row col-lg-12">
-<section class="col-md-4 wb-feeds limit-3 gc-nws">
- <h2 class="h3">News</h2>
-<!-- demonstrates the layout - use json feed where applicable -->
-<ul class="feeds-cont list-unstyled lst-spcd feed-active">
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
- <li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
-</ul>
-<!-- json feed for news example
-<ul class="feeds-cont list-unstyled lst-spcd">
- <li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Canada Revenue Agency news items</a> </li>
- </ul>
--->
-<p>More: <a href="#" class="admin">[Institution] news</a></p>
-</section>
-<section class="col-md-8 gc-prtts">
- <h2 class="h3">Features</h2>
-  <div class="row wb-eqht">
-   <div class="col-md-6 mrgn-bttm-md">
-    <a class="figcaption hght-inhrt" href="#">
-     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-      <figcaption class="h5">[Featured hyperlink text]</figcaption>
-        <p>Brief description of the feature being promoted.</p>
-        </figure>
-       </a>
-      </div>
-    <div class="col-md-6 mrgn-bttm-md">
-     <a class="figcaption hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
-     <figure class="well well-sm brdr-rds-0 hght-inhrt"><img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png">
-      <figcaption class="h5">[Featured hyperlink text]</figcaption>
-      <p>Brief description of the feature being promoted.</p>
-        </figure>
-     </a>
-     </div>
-    </div>
-  </section>
- </div>
-</div>
-
-
- -
-

Stable latest news

-

The beta version will eventually replace the stable version.

-
- Guidance for the latest news stable version -
    -
  • 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
      • -
    -
    • -
  • 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

-
-
-
- -
-
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.
- -
-
-
-
-
- -
-

Discussion

-

Discuss the pattern in github issues

-
- -
- -
- - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_more-information.html b/common-design-patterns/_more-information.html deleted file mode 100644 index 2732f60591..0000000000 --- a/common-design-patterns/_more-information.html +++ /dev/null @@ -1,337 +0,0 @@ ---- ---- - - - - - - - More information for - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

More information for - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-
-

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

-
-
-
-
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.
-
-
-
- - -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_most-requested.html b/common-design-patterns/_most-requested.html deleted file mode 100644 index e43cd58a43..0000000000 --- a/common-design-patterns/_most-requested.html +++ /dev/null @@ -1,303 +0,0 @@ ---- ---- - - - - - - -Most requested - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Most requested - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_multimedia.html b/common-design-patterns/_multimedia.html deleted file mode 100644 index 3d18fb5860..0000000000 --- a/common-design-patterns/_multimedia.html +++ /dev/null @@ -1,339 +0,0 @@ ---- ---- - - - - - - -Multimedia - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Multimedia - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

-
-
-
-
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.

-
-
-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_ordered-multipage.html b/common-design-patterns/_ordered-multipage.html deleted file mode 100644 index b070679dd7..0000000000 --- a/common-design-patterns/_ordered-multipage.html +++ /dev/null @@ -1,347 +0,0 @@ ---- ---- - - - - - - - Ordered multi-page navigation - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Ordered multi-page navigation - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- - -
-

The ordered multi-page navigation pattern:

-
    -
  • is a set of links to a group of several pages intended to be read in a preferred order
    • -
  • includes previous/next links to guide a person through the page set in the preferred order
    • -
-
-

Objective

-

Use the ordered multi-page navigation pattern to provide:

-
    -
  • an outline of content that spans multiple pages and has a default or preferred order (for example, guides, service initiations, sequential instructions)
    • -
  • a method of jumping to any page within the sequence, bypassing the default order of the pages
    • -
-

Do not use this pattern when:

-
    -
  • the content exists as a single page requiring scrolling to view all the subsections (use the In-page table of contents pattern)
    • -
  • the content exists as a set of multiple pages that does not have a default or preferred order
    • -
  • the default order of the content must not be circumvented that is when the preferred order is crucial and people cannot be permitted to move between pages in a different order
    • - -
-
-
-

How and when to use ordered multi-page navigation

-
    -
  • Always position the ordered multi-page navigation pattern at the start of the page, before the substantive content of the page begins
    • -
  • Ensure that the order and position of the page links are identical on each page of the set
    • -
  • Number the step-by-step links to indicate the preferred order. Not all links necessarily need to be numbered, if they represent pages/steps that are not part of the sequence
    • -
  • Highlight the link for the current page. Do not highlight with the same colour used on primary action buttons
    • -
  • Position previous/next links immediately below the substantive content on the page
    • -
  • Accompany the previous/next labels with arrow icons to reinforce the concept
    • -
  • Position previous/next links consistently (for example, “previous” on the left, “next” on the right)
    • -
  • On the first page of the document, omit the “previous” link; on the last page of the document, omit the “next” link
    • -
-
-
-
-
-
Ordered multi-page navigation pattern
- Image of ordered multi-page navigation pattern. Details on this graphic can be found in the surrounding text.
-
-
-
-
-
-
- - - -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_privacy-disclaimer.html b/common-design-patterns/_privacy-disclaimer.html deleted file mode 100644 index ef394ead00..0000000000 --- a/common-design-patterns/_privacy-disclaimer.html +++ /dev/null @@ -1,396 +0,0 @@ ---- ---- - - - - - - -Privacy disclaimer- Canada.ca design pattern- Canada.ca - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - - - -
- - -

Privacy disclaimer: Canada.ca design - system

- -
-
-
    -
  • Last updated: 2021-01-20
    • - -
-
-
- - -

The disclaimer expand/collapse 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.

- -
-
Privacy disclaimer -

The personal information provided is governed in accordance with the Privacy Act. This personal information is being collected as part of the Government of Canada’s...

- -

[Include the full privacy disclaimer in the expand/collapse, including headings, sub-headings, etc.]

- -
-
- - - -
-

On this page

- -
- - - -
-

When to use

-
    -
  • Use where disclaimers (privacy statements, terms of use, etc.) are required
    • -
  • Use the pattern on the same page as the content subject to the disclaimer
    • -
  • Label the expand/collapse with “Terms and conditions,” “Privacy statement,” or something similar
    • -
-
- -
-

What to avoid

-
    -
  • Don't use privacy disclaimers to hide any important details about the page content itself - keep it specifically for legal information
    • -
  • Don't create a barrier by forcing users to go through a page with only a disclaimer or privacy statement before they can reach the task content
    • -
  • Don't link away from the current page
    • -
- - -
- -
-

How to implement

- -
-
Privacy disclaimer -

The personal information provided is governed in accordance with the Privacy Act. This personal information is being collected as part of the Government of Canada’s...

- -

[Include the full privacy disclaimer in the expand/collapse, including headings, sub-headings, etc.]

-
-
- Code - 
<details>
- <summary>Privacy disclaimer</summary>
- <p>[Disclaimer text]</p>
-</details>
-
- - - -
- -

Research and blog posts

-

While working on the ArriveCAN content, we noticed that a long privacy statement at the top of the page created a barrier for some screen reader users.

- -

Latest changes

-
-
-
-
Changed the guidance on disclaimers to use an expand/collapse
-
-
-
-

Discussion

-

Discuss the pattern in github - issues

-
- - - - - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_related-links.html b/common-design-patterns/_related-links.html deleted file mode 100644 index 65b98002db..0000000000 --- a/common-design-patterns/_related-links.html +++ /dev/null @@ -1,344 +0,0 @@ ---- ---- - - - - - - - Related links - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Related links - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- -
-

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

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

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_report-problem.html b/common-design-patterns/_report-problem.html deleted file mode 100644 index 61b7810bc8..0000000000 --- a/common-design-patterns/_report-problem.html +++ /dev/null @@ -1,540 +0,0 @@ ---- ---- - - - - - - - Report a problem - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
-

Report a problem: Canada.ca design - pattern

- - - - - -
- - - -

From: Treasury Board of Canada Secretariat -

-
- -
-
-

The Report a problem pattern allows people to provide feedback via a form for any problems they experience with the - web page they are on.

-

This pattern enables page-level feedback. When people click on the Report a problem button on this page, they are - presented with common issues to select using checkboxes. If none of these issues are applicable, they may select - “Other” to provide more details.

- -
-

On this page

- -
- -
-

When to use

-

Use this pattern to enable page-level feedback.

-
- -
-

What to avoid

-

Ensure that the feedback you receive is actionable. If you can, avoid implementing a form where people cannot - give details on the issues they are experiencing.

-
- -
-

How to implement

- -
-

Using CDTS to implement the Canada.ca theme

-

Do not implement this pattern through CDTS. To turn off the page footer in CDTS:

-
    -
  • use the CDTS version for GCWeb applications, instead of the one for static HTML pages
    • -
  • remove the reference for the 'prefooter'
    • -
-

You should then set up the report a problem form in its place.

-
- -

The button, label, placement and privacy statement are mandatory:

-
    -
  • the pattern is presented as a button using the button component styled for secondary - actions, which triggers a feedback form to expand when clicked
    • -
  • the label reads: “Report a problem on this page”
    • -
  • placement: positioned directly below the main content area, left-aligned
    • -
  • privacy statement: positioned within a dismissible overlay
    • -
-

The pattern for the contents of the feedback form is recommended. If meaningful data is not being received, a - mailto link can be used as an alternative.

-

Sending the form: Make sure to replace the "#" placeholder in the form action line with whatever your - institution uses to collect the data from the form. Consider sending the form to a generic email inbox if you - don't have a server set up to handle this type of form.

- -
- -
-
-
- Report a problem on this page -
-
-
-
-
- Please select all that apply: -
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
-

Privacy statement

-
-
-

Privacy statement

-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna aliqua. Turp is egestas maecenas pharetra convallis posuere morbi leo - urna.

-
-
- -
-
-
-

Thank you for your help!

-

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

-
-
-
-
-
- -
- - -
-
- Code - 
<div class="row">
-	 <div class="col-sm-6 col-md-5 col-lg-4">
-	  <details class="brdr-0" open="">
-	   <summary class="btn btn-default text-center">Report a problem on this page</summary>
-	   <div class="well row">
-	    <div class="gc-rprt-prblm">
-	     <div class="gc-rprt-prblm-tggl" id="wb-auto-7">
-	      <form action="#">
-	       <fieldset>
-	        <legend><span class="field-name">Please select all that apply: </span></legend>
-	        <div class="checkbox">
-	         <label for="problem1"><input type="checkbox" data-reveal="#broken" name="problem" value="Something is broken" id="problem1">Something is broken</label>
-	        </div>
-	        <div class="form-group hide" id="broken">
-	         <label for="problem1-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem1-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem2"><input type="checkbox" data-reveal="#spelling" name="problem" value="It has spelling or grammar mistakes" id="problem2">It has spelling or grammar mistakes</label>
-	        </div>
-	        <div class="form-group hide" id="spelling">
-	         <label for="problem2-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem2-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem3"><input type="checkbox" data-reveal="#wrong" name="problem" value="The information is wrong" id="problem3">The information is wrong</label>
-	        </div>
-	        <div class="form-group hide" id="wrong">
-	         <label for="problem3-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem3-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem4"><input type="checkbox" data-reveal="#outdated" name="problem" value="The information is outdated" id="problem4">The information is outdated</label>
-	        </div>
-	        <div class="form-group hide" id="outdated">
-	         <label for="problem4-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem4-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem5"><input type="checkbox" data-reveal="#find" name="problem" value="I can’t find what I’m looking for" id="problem5">I can’t find what I’m looking for</label>
-	        </div>
-	        <div class="form-group hide" id="find">
-	         <label for="problem5-detail">Describe what you’re looking for (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem5-detail">
-	        </div>
-	        <div class="checkbox">
-	         <label for="problem6"><input type="checkbox" data-reveal="#confusing" name="problem" value="Other" id="problem6">Other</label>
-	        </div>
-	        <div class="form-group hide" id="confusing">
-	         <label for="problem6-detail">Provide more details (optional):</label>
-	         <input type="text" class="form-control full-width" id="problem6-detail">
-	        </div>
-	       </fieldset>
-	       <button type="submit" class="btn btn-primary wb-toggle wb-init wb-toggle-inited" data-toggle="{&quot;stateOff&quot;: &quot;hide&quot;, &quot;stateOn&quot;: &quot;show&quot;, &quot;selector&quot;: &quot;.gc-rprt-prblm-tggl&quot;}" aria-controls="wb-auto-7 wb-auto-8">Submit</button>
-	      </form>
-	     </div>
-	     <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-8">
-	      <h3>Thank you for your help!</h3>
-	      <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
-	     </div>
-	    </div>
-	   </div>
-	  </details>
-	 </div>
-	</div>
-
-
- -
-

Discussion

-

Discuss the pattern in github - issues

-
- -
-
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_services-information.html b/common-design-patterns/_services-information.html deleted file mode 100644 index a064ada162..0000000000 --- a/common-design-patterns/_services-information.html +++ /dev/null @@ -1,394 +0,0 @@ ---- ---- - - - - - - -Services and information - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Services and information - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

-
-
-
-
-
-
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.
-
-
-
-
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.
-
-
-
-
-
-
-
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.
-
-
-
-
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.
-
-
-
-
-
-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_share-page.html b/common-design-patterns/_share-page.html deleted file mode 100644 index b23a35d8e3..0000000000 --- a/common-design-patterns/_share-page.html +++ /dev/null @@ -1,380 +0,0 @@ ---- ---- - - - - - - - Share this page - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
-

Share this page: Canada.ca design - pattern

- - - - - -
- - - -

From: Treasury Board of Canada Secretariat -

-
- -
-
-
-

The Share this page component is intended to allow people to share the content of the page to other users.

-
-

Objectives

-

The Share this page component allows people to share the current web page via a selection of sharing platforms - and delivery services.

-
-
-

When to use Share this page

-

The Share this page pattern is optional on all pages. For more information, go to the Mandatory - elements of the design system.

-
-
-

How to implement Share this page

-
    -
  • The component is presented as a button using WET style for - secondary actions
    • -
  • The label reads: “Share this page”, preceded by the sharing icon in the defined icon set included in WET
    • -
  • Placement: positioned below the main content area, right-alignwed.
    • -
  • When clicked, a dismissible overlay is triggered: -
      -
    • the overlay is labeled “Share this page” and includes buttons for a selection of sharing platforms and - delivery services, and the message “No endorsement of any products or services is expressed or implied.” -
      • -
    • on large screens, the buttons appear in 2 columns
      • -
    • on small screens, a person is presented with a single column of buttons
      • -
    -
    • -
  • Within the overlay, the button for each sharing platform or delivery service uses WET style for secondary actions
    • -
  • The label for each button within the overlay includes the name of the sharing platform or delivery service, - preceded by a relevant logo or icon
    • -
  • When clicked, each button within the overlay triggers a link to that platform or service, including - appropriate parameters, such as the URL or title of the page being shared -
      -
    • these links open in new browser tabs or windows where feasible
      • -
    -
    • - -
-
-
Share this page overlay (Large screen version)
- Diagram of share this page overlay for large screens. Text version below: -
- Text version -

This large screen example of “share this page” contains links to various social media platforms.

-
-
-
-
Share this page overlay (Small screen version)
- Diagram of share this page overlay for small screens. Text version below: -
- Text version -

This small screen example of “share this page” contains links to various social media platforms that are - arranged in one column.

-
-
-
-
- - - -
- -
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_site-footer-content.html b/common-design-patterns/_site-footer-content.html deleted file mode 100644 index d1406008b4..0000000000 --- a/common-design-patterns/_site-footer-content.html +++ /dev/null @@ -1,310 +0,0 @@ ---- ---- - - - - - - -Content footer - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Content footer: Canada.ca design - pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-
- -
-
-
-

Mandatory

-

The content footer appears at the bottom of the content area for each web page.

-

Use the content footer in conjunction with the global footer pattern.

-

See Global footer for guidance on how to apply the contextual footer band, main footer band and sub-footer band.

-

How to implement the content footer

-

The content footer displays up to 3 components:

- -

Insert the content footer within the content area block so that its margins are aligned with the main page content.

-

Page feedback tool pilot

-

The Page feedback tool is a pilot product. Add the pattern to the content footer instead of the “Report a problem” - pattern to actively collect user feedback.

-

Page feedback tool

-
-

Example

-
-
-
Content footer
- Diagram of content footer. -
- Text version -

The content footer contains the following components: Report a problem, Share this page and Date modified.

-
-
-
-
-
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_social-media-channels.html b/common-design-patterns/_social-media-channels.html deleted file mode 100644 index 00a0774a8b..0000000000 --- a/common-design-patterns/_social-media-channels.html +++ /dev/null @@ -1,313 +0,0 @@ ---- ---- - - - - - - -Social media channels - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Social media channels - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

-
-
-
-
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.
-
-
-
-
-
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_social-media-feeds.html b/common-design-patterns/_social-media-feeds.html deleted file mode 100644 index 4257d31587..0000000000 --- a/common-design-patterns/_social-media-feeds.html +++ /dev/null @@ -1,310 +0,0 @@ ---- ---- - - - - - - -Social media feeds - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
Government of Canada / Gouvernement du Canada
-
-

Search

- -
-
-
- - -
- - - -
-

Social media feeds - Canada.ca design pattern

-
-
-

From: Treasury Board of Canada Secretariat

-
-

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

-
-
-
-
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.
-
-
-
-
-
- - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

You will not receive a reply. Telephone numbers and email addresses will be - removed.
- Maximum 300 characters

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
-{% include footer-en.html %} - - - - - - - - - - - - - diff --git a/common-design-patterns/_subway-navigation-new.html b/common-design-patterns/_subway-navigation-new.html deleted file mode 100644 index 3ead5b9ad0..0000000000 --- a/common-design-patterns/_subway-navigation-new.html +++ /dev/null @@ -1,582 +0,0 @@ ---- ---- - - - - - - Subway navigation - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

- - Subway navigation: - Canada.ca design system - -

-
-
-
    -
  • Beta
    • -
  • Last updated: 2020-12-17
    • -
-
-
-

Break up a service or content into sections that each focus on a step or specific answer people need to do before moving to the next step or section.

-
-

[Optional image or coded example of the pattern so it can be visually identified quickly]

-
-
-

On this page

- -
-
-

When to use

-

Use to group related task pages together and provide navigation between these pages.

-

Keep the number of pages tied together to a reasonable numner (maximum 6).

-
-
-

What to avoid

-

Don't use numbers when you use this pattern for sequenced steps. Testing has shown that Canadians are less likely to get to the section they need if the elements are numbered.

-

Sub-steps haven't been tested properly yet - avoid using them.

-
-
-

How to implement

-

This pattern is still in beta, and the code is still under review. Use it sparingly, as it may still be subject to changes.

-

You will need to use provisional CSS to use this design pattern.

-
    -
  1. Index page
    2. -
  2. Step page
    3. -
-

1. Index page

-

When to use: use as the landing page for a set of related pages that use the subway naviation.

-
-

[Coded example of variant 1]

-
-
- Code - 
<p>[Coded example of variant 1]</p>
-
-

2. Step page

-

When to use: Use on each page tied by the subway navigation.

-
-
- -

[Service/step name 3]

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.

-

Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis.

-
-
- -
- -
- Code -
- HTML - 
<nav class="provisional gc-subway">
-		<h1>[Service name]</h1>
-		<ul class="gc-subway-steps">
-			<li><a href="#">[Step / section page name 1]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 1]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 2]<span class="wb-inv">: [Service name]</span></a></li>
-			<li class="active"><a aria-current="page">[Step / section page name 3]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 4]<span class="wb-inv">: [Service name]</span></a></li>
-			<li><a href="#">[Step / section page name 5]<span class="wb-inv">: [Service name]</span></a></li>
-		</ul>
-		</nav>
-		<h1 property="name" id="wb-cont" class="provisional gc-thickline">[Step / section page name 3]</h1>
-		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
-		<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis.</p>
-
-
- CSS - 
.provisional.gc-subway {
-		  border-radius: 0px 6px 6px 0px;
-		  border-right: 4px solid #26374a;
-		  border-top: 4px solid #26374a;
-		  margin-top: 38px;
-		}
-		.provisional.gc-subway ul {
-		  clear: both;
-		  list-style: none;
-		  padding-left: .57em;
-		  padding-top: 10px;
-		  position: relative;
-		}
-		.provisional.gc-subway ul li {
-		  border-left: 4px solid #26374a;
-		  padding: 0px 20px 30px 1em;
-		}
-		.provisional.gc-subway ul li::first-line {
-		  line-height: 1 !important;
-		}
-		.provisional.gc-subway ul li :first-child::before {
-		  background-color: #fff;
-		  border: 3px solid #26374a;
-		  border-radius: 50%;
-		  content: "";
-		  height: 1.2em;
-		  left: .05em;
-		  position: absolute;
-		  -webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-		  transition: width .2s, height .2s, left .2s, margin-top .2s;
-		  width: 1.2em;
-		}
-		.provisional.gc-subway ul li.active > :first-child::before {
-		  background-color: #26374a;
-		}
-		.provisional.gc-subway ul li a[href]:hover::before,
-		.provisional.gc-subway ul li a[href]:focus::before {
-		  height: 1.4em;
-		  left: -.05em;
-		  margin-top: -.1em;
-		  width: 1.4em;
-		}
-		.provisional.gc-subway ul li:last-child {
-		  border-bottom: 4px solid #26374a;
-		  border-bottom-left-radius: 6px;
-		  border-left: 4px solid #26374a;
-		}
-		.provisional.gc-subway ul li ul {
-		  margin-top: 20px;
-		  padding-left: .55em;
-		}
-		.provisional.gc-subway ul li ul li:last-child {
-		  border-bottom-width: 0px;
-		  padding-bottom: 0px;
-		}
-		.provisional.gc-subway ul li ul.noline li {
-		  -o-border-image: none;
-		  border-image: none;
-		  border-left: 4px solid transparent;
-		}
-		.provisional.gc-subway h1 {
-		  float: left;
-		}
-		.provisional.gc-subway h1,
-		.provisional.gc-subway-section .gc-subway-h1 {
-		  background-color: #fff;
-		  border-bottom-width: 0px;
-		  color: #555;
-		  font-size: 1.3em;
-		  margin-right: 20px;
-		  margin-top: -19px;
-		  padding: 0px 20px 10px 0px;
-		}
-		@media screen and (min-width: 992px) {
-		  .provisional.gc-subway {
-			border-right: 0;
-			border-top: 0;
-			display: none;
-			margin-top: 25px;
-			padding-left: 15px;
-		  }
-		  .provisional.gc-subway.no-blink {
-			display: block;
-		  }
-		  .provisional.gc-subway .gc-subway-menu-nav {
-			float: right;
-			width: 33.33%;
-		  }
-		  .provisional.gc-subway ul li:last-child {
-			border-bottom: 0;
-			border-left: 4px solid transparent;
-		  }
-		  .provisional.gc-subway-section {
-			padding-right: 15px;
-			width: 66.66%;
-		  }
-		  .provisional.gc-subway-section .gc-subway-h1,
-		  .provisional.gc-subway-section h1 {
-			margin-top: 0;
-		  }
-		  .provisional.gc-subway-section .gc-subway-h1 {
-			font-family: Lato, sans-serif;
-			font-weight: inherit;
-			margin-bottom: 0;
-			margin-right: 0;
-			padding-bottom: 0 !important;
-			padding-left: 0;
-		  }
-		  .wb-disable .provisional.gc-subway {
-			display: block;
-		  }
-		}
-
-
- JS - 
( function( $, window, wb ) {
-		"use strict";
-
-		var $document = wb.doc,
-		  componentName = "gc-subway",
-		  selector = ".provisional." + componentName,
-		  initEvent = "wb-init ." + componentName,
-		  views = {
-			xxs: "xxsmallview",
-			xs: "xsmallview",
-			sm: "smallview",
-			md: "mediumview",
-			lg: "largeview",
-			xl: "xlargeview"
-		  },
-		  mainClass = "gc-subway-section",
-		  toggleClass = "wb-inv",
-		  desktopInited = false,
-		  $html = wb.html,
-		  $h1, $h2, $h1Copy, $menu, $main,
-
-		  /**
-		   * @method init
-		   * @param {jQuery Event} event Event that triggered the function call
-		   */
-		  init = function( event ) {
-
-			// Start initialization
-			// returns DOM object = proceed with init
-			// returns undefined = do not proceed with init (e.g., already initialized)
-			var elm = wb.init( event, componentName, selector ),
-			  $elm;
-
-			if ( elm ) {
-			  $elm = $( elm );
-
-			  // trigger resizing
-			  onResize( $elm );
-
-			  // Identify that initialization has completed
-			  wb.ready( $elm, componentName );
-			}
-		  },
-
-		  /**
-		   * Mutate DOM depending on breakpoint
-		   * @method onResize
-		   * @param {jQuery DOM element | jQuery Event} $elm Element targeted by this plugin, which is the nav | Resizing event
-		   */
-		  onResize = function( $elm ) {
-
-			if ( !$elm.length ) {
-			  $elm = $( selector );
-			}
-
-			// Desktop view, setup and mutate H1s
-			if ( $html.hasClass( views.md ) || $html.hasClass( views.lg ) ||
-			  $html.hasClass( views.xl ) ) {
-
-			  // Initiate desktop mode only once
-			  if ( !desktopInited ) {
-				initDesktop( $elm );
-			  }
-			  $h1.addClass( toggleClass );
-			  $h1Copy.prependTo( $main );
-			  $h2.prependTo( $menu );
-			} else if ( ( $html.hasClass( views.sm ) || $html.hasClass( views.xs ) || $html.hasClass( views.xxs ) ) && desktopInited ) {
-
-			  // Mobile view, mutate back to mobile first if needed
-			  $h1.removeClass( toggleClass );
-			  $h1Copy.remove();
-			  $( "h2:first-child", $menu ).remove();
-			}
-		  },
-
-		  /**
-		   * Initiate setup for desktop mode
-		   * @method initDesktop
-		   * @param {jQuery DOM element} $elm Element targeted by this plugin, which is the nav
-		   */
-		  initDesktop = function( $elm ) {
-			$h1 = $( "h1", $elm );
-			$h2 = $( "" );
-			$h1Copy = $( "" );
-			$( "ul", $elm ).first().wrap( "
" );
-			$menu = $( ".gc-subway-menu-nav", $elm );
-			$elm.nextUntil( ".pagedetails, .gc-subway-section-end" ).wrapAll( "
" );
-			$main = $elm.next();
-
-			// Prevent on-load blinking on desktop
-			$elm.addClass( "no-blink" );
-
-			desktopInited = true;
-		  };
-
-		// Listen for resizing and mutate the DOM accordingly
-		$document.on( wb.resizeEvents, onResize );
-
-		// Bind the init event of the plugin
-		$document.on( "timerpoke.wb " + initEvent, selector + ".provisional", init );
-
-		// Add the timer poke to initialize the plugin
-		wb.add( selector );
-
-		} )( jQuery, window, wb );
-
-
-
- - -
-

Research and blog posts

-

This pattern was developed with CRA during an optimization project on the Canada Child Benefit. It has shown to work well to show the relationship between related pages and to work well on mobile devices.

-

Latest changes

-
-
-
-
Launched the subway navigation pattern in Beta
-
-
-
-

Discussion

-

Discuss the pattern in github issues

-
- - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - diff --git a/common-design-patterns/_subway-navigation.mdx b/common-design-patterns/_subway-navigation.mdx deleted file mode 100644 index 80e092d835..0000000000 --- a/common-design-patterns/_subway-navigation.mdx +++ /dev/null @@ -1,664 +0,0 @@ ---- -altLangPage: https://conception.canada.ca/configurations-conception-communes/navigation-metro.html -date: null -dateModified: '2023-07-12' -description: null -title: Subway navigation ---- - - -
-
-
    -
  • - - Beta - -
    • -
  • - Last updated: 2023-07-12 -
    • -
-
-
- -

- Break up long and complex content into pages that each focus on a step or specific answer people need before moving to the next step or section. Ideal for presenting services and processes. -

- -
-

- On this page -

- -
- -
-

- When to use -

-

- Use to group related task pages together and provide navigation between these pages. -

-

- Keep the number of pages tied together to a reasonable number (ideally 6 or less, maximum 8). -

-
- -
-

- What to avoid -

-

- Don't use numbers when you use this pattern for sequenced steps. Testing has shown that Canadians are less likely to get to the section they need if the elements are numbered. -

-
- -
-

- How to implement -

-

- This pattern is still in beta, and the code is still under review. Use it sparingly, as it may still be subject to change. -

-

- You will need to use provisional CSS to use this design pattern. -

-
    -
  1. - - Index page - -
    2. -
  2. - - Step page - -
    3. -
-

- 1. Index page -

-

- - When to use: - - use as the landing page for a set of related pages that use the subway navigation. -

- -
- - Code - -
- - HTML - - 
<h1 property="name" id="wb-cont" class="gc-thickline">[Name of service]</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...].</p>
-<nav class="provisional gc-subway">
-	<h2>Sections</h2>
-	<dl>
-		<dt>
-			<a href="gc-subway-en.html">[Step / section page name 1]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="page2-en.html">[Step / section page name 2]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 3]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 4]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 5]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-		<dt>
-			<a href="#">[Step / section page name 6]</a>
-		</dt>
-		<dd>
-			Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit
-		</dd>
-	</dl>
-</nav>
-
-
- - CSS - - 
.provisional.gc-subway {
-	border-radius: 0px 6px 6px 0px;
-	border-right: 4px solid #26374a;
-	border-top: 4px solid #26374a;
-	margin-top: 38px;
-}
-.provisional.gc-subway ul {
-	clear: both;
-	list-style: none;
-	padding-left: .57em;
-	padding-top: 10px;
-	position: relative;
-}
-.provisional.gc-subway ul li {
-	border-left: 4px solid #26374a;
-	padding: 0px 20px 30px 1em;
-}
-.provisional.gc-subway ul li::first-line {
-	line-height: 1 !important;
-}
-.provisional.gc-subway ul li :first-child::before {
-	background-color: #fff;
-	border: 3px solid #26374a;
-	border-radius: 50%;
-	content: "";
-	height: 1.2em;
-	left: .05em;
-	position: absolute;
-	-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-	transition: width .2s, height .2s, left .2s, margin-top .2s;
-	width: 1.2em;
-}
-.provisional.gc-subway ul li.active > :first-child::before {
-	background-color: #26374a;
-}
-.provisional.gc-subway ul li a[href]:hover::before,
-.provisional.gc-subway ul li a[href]:focus::before {
-	height: 1.4em;
-	left: -.05em;
-	margin-top: -.1em;
-	width: 1.4em;
-}
-.provisional.gc-subway ul li:last-child {
-	border-bottom: 4px solid #26374a;
-	border-bottom-left-radius: 6px;
-	border-left: 4px solid #26374a;
-}
-.provisional.gc-subway ul li ul {
-	margin-top: 20px;
-	padding-left: .55em;
-}
-.provisional.gc-subway ul li ul li:last-child {
-	border-bottom-width: 0px;
-	padding-bottom: 0px;
-}
-.provisional.gc-subway ul li ul.noline li {
-	-o-border-image: none;
-	border-image: none;
-	border-left: 4px solid transparent;
-}
-.provisional.gc-subway h1 {
-	float: left;
-}
-.provisional.gc-subway h1,
-.provisional.gc-subway-section .gc-subway-h1 {
-	background-color: #fff;
-	border-bottom-width: 0px;
-	color: #555;
-	font-size: 1.3em;
-	margin-right: 20px;
-	margin-top: -19px;
-	padding: 0px 20px 10px 0px;
-}
-@media screen and (min-width: 992px) {
-	.provisional.gc-subway {
-		border-right: 0;
-		border-top: 0;
-		display: none;
-		margin-top: 25px;
-		padding-left: 15px;
-	}
-	.provisional.gc-subway.no-blink {
-		display: block;
-	}
-	.provisional.gc-subway .gc-subway-menu-nav {
-		float: right;
-		width: 33.33%;
-	}
-	.provisional.gc-subway ul li:last-child {
-		border-bottom: 0;
-		border-left: 4px solid transparent;
-	}
-	.provisional.gc-subway-section {
-		padding-right: 15px;
-		width: 66.66%;
-	}
-	.provisional.gc-subway-section .gc-subway-h1,
-	.provisional.gc-subway-section h1 {
-		margin-top: 0;
-	}
-	.provisional.gc-subway-section .gc-subway-h1 {
-		font-family: Lato, sans-serif;
-		font-weight: inherit;
-		margin-bottom: 0;
-		margin-right: 0;
-		padding-bottom: 0 !important;
-		padding-left: 0;
-	}
-	.wb-disable .provisional.gc-subway {
-		display: block;
-	}
-}
-
-
-

- 2. Step page -

-

- - When to use: - - Use on each page tied by the subway navigation. -

- -
-
- - Code - -
- - HTML - - 
<nav class="provisional gc-subway">
-	<h1 id="gc-document-nav">[Service name]</h1>
-	<ul>
-		<li>
-			<a href="#" class="active" aria-current="page">[Page 1]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 2]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 2]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 3]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 3]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 4]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 4]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 5]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 5]</a>
-		</li>
-		<li>
-			<a href="#" class="hidden-xs hidden-sm">[Page 6]</a>
-			<a href="#gc-document-nav" class="visible-xs visible-sm">[Page 6]</a>
-		</li>
-	</ul>
-</nav>
-
-<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit.</p>
-<p>Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec.</p>
-<nav class="mrgn-bttm-lg mrgn-tp-lg">
-	<h3 class="wb-inv">Document navigation</h3>
-	<ul class="pager">
-		<li class="next"><a href="#wb-cont" rel="next"><span class="wb-inv">Next: </span>[Page 2]</a></li>
-	</ul>
-</nav>
-
-
- - CSS - - 
.provisional.gc-subway {
-		border-radius: 0px 6px 6px 0px;
-		border-right: 4px solid #26374a;
-		border-top: 4px solid #26374a;
-		margin-top: 38px;
-	}
-	.provisional.gc-subway ul {
-		clear: both;
-		list-style: none;
-		padding-left: .57em;
-		padding-top: 10px;
-		position: relative;
-	}
-	.provisional.gc-subway ul li {
-		border-left: 4px solid #26374a;
-		padding: 0px 20px 30px 1em;
-	}
-	.provisional.gc-subway ul li::first-line {
-		line-height: 1 !important;
-	}
-	.provisional.gc-subway ul li :first-child::before {
-		background-color: #fff;
-		border: 3px solid #26374a;
-		border-radius: 50%;
-		content: "";
-		height: 1.2em;
-		left: .05em;
-		position: absolute;
-		-webkit-transition: width .2s, height .2s, left .2s, margin-top .2s;
-		transition: width .2s, height .2s, left .2s, margin-top .2s;
-		width: 1.2em;
-	}
-	.provisional.gc-subway ul li.active > :first-child::before {
-		background-color: #26374a;
-	}
-	.provisional.gc-subway ul li a[href]:hover::before,
-	.provisional.gc-subway ul li a[href]:focus::before {
-		height: 1.4em;
-		left: -.05em;
-		margin-top: -.1em;
-		width: 1.4em;
-	}
-	.provisional.gc-subway ul li:last-child {
-		border-bottom: 4px solid #26374a;
-		border-bottom-left-radius: 6px;
-		border-left: 4px solid #26374a;
-	}
-	.provisional.gc-subway ul li ul {
-		margin-top: 20px;
-		padding-left: .55em;
-	}
-	.provisional.gc-subway ul li ul li:last-child {
-		border-bottom-width: 0px;
-		padding-bottom: 0px;
-	}
-	.provisional.gc-subway ul li ul.noline li {
-		-o-border-image: none;
-		border-image: none;
-		border-left: 4px solid transparent;
-	}
-	.provisional.gc-subway h1 {
-		float: left;
-	}
-	.provisional.gc-subway h1,
-	.provisional.gc-subway-section .gc-subway-h1 {
-		background-color: #fff;
-		border-bottom-width: 0px;
-		color: #555;
-		font-size: 1.3em;
-		margin-right: 20px;
-		margin-top: -19px;
-		padding: 0px 20px 10px 0px;
-	}
-	@media screen and (min-width: 992px) {
-		.provisional.gc-subway {
-		border-right: 0;
-		border-top: 0;
-		display: none;
-		margin-top: 25px;
-		padding-left: 15px;
-		}
-		.provisional.gc-subway.no-blink {
-		display: block;
-		}
-		.provisional.gc-subway .gc-subway-menu-nav {
-		float: right;
-		width: 33.33%;
-		}
-		.provisional.gc-subway ul li:last-child {
-		border-bottom: 0;
-		border-left: 4px solid transparent;
-		}
-		.provisional.gc-subway-section {
-		padding-right: 15px;
-		width: 66.66%;
-		}
-		.provisional.gc-subway-section .gc-subway-h1,
-		.provisional.gc-subway-section h1 {
-		margin-top: 0;
-		}
-		.provisional.gc-subway-section .gc-subway-h1 {
-		font-family: Lato, sans-serif;
-		font-weight: inherit;
-		margin-bottom: 0;
-		margin-right: 0;
-		padding-bottom: 0 !important;
-		padding-left: 0;
-		}
-		.wb-disable .provisional.gc-subway {
-		display: block;
-		}
-	}
-
-
- - JS - - 
( function( $, window, wb ) {
-"use strict";
-
-var $document = wb.doc,
-	componentName = "gc-subway",
-	selector = ".provisional." + componentName,
-	initEvent = "wb-init ." + componentName,
-	views = {
-		xxs: "xxsmallview",
-		xs: "xsmallview",
-		sm: "smallview",
-		md: "mediumview",
-		lg: "largeview",
-		xl: "xlargeview"
-	},
-	mainClass = "gc-subway-section",
-	toggleClass = "wb-inv",
-	desktopInited = false,
-	skipLink = false,
-	$html = wb.html,
-	$h1, $h2, $h1Copy, $menu, $main,
-
-	/**
-	 * @method init
-	 * @param {jQuery Event} event Event that triggered the function call
-	 */
-	init = function( event ) {
-
-		// Start initialization
-		// returns DOM object = proceed with init
-		// returns undefined = do not proceed with init (e.g., already initialized)
-		var elm = wb.init( event, componentName, selector ),
-			h1,
-			$elm;
-
-		if ( elm ) {
-			$elm = $( elm );
-			$h1 = $( "h1", $elm );
-			h1 = $h1.get( 0 );
-
-			// Ensure the element have an ID
-			if ( !h1.id ) {
-				h1.id = wb.getId();
-			}
-
-			// Add subway H1 to skip links
-			if ( !skipLink ) {
-				skipLink = wb.addSkipLink( wb.i18n( "skip-prefix" ) + " " + h1.textContent, { href: "#" + h1.id } );
-			}
-
-			// trigger resizing
-			onResize( $elm );
-
-			// Identify that initialization has completed
-			wb.ready( $elm, componentName );
-		}
-	},
-
-	/**
-	 * Mutate DOM depending on breakpoint
-	 * @method onResize
-	 * @param {jQuery DOM element | jQuery Event} $elm Element targetted by this plugin, which is the nav | Resizing event
-	 */
-	onResize = function( $elm ) {
-
-		if ( !$elm.length ) {
-			$elm = $( selector );
-		}
-
-		// Ensure the page contains at least two heading level 1
-		if ( $( "main h1" ).length < 2 ) {
-			$document.off( wb.resizeEvents, onResize );
-			$elm.addClass( "no-blink p-0" );
-			return;
-		}
-
-		// Desktop view, setup and mutate H1s
-		if ( $html.hasClass( views.md ) || $html.hasClass( views.lg ) ||
-			$html.hasClass( views.xl ) ) {
-
-			// Initiate desktop mode only once
-			if ( !desktopInited ) {
-				initDesktop( $elm );
-			}
-			$h1.addClass( toggleClass );
-			$h1Copy.prependTo( $main );
-			$h2.prependTo( $menu );
-		} else if ( ( $html.hasClass( views.sm ) || $html.hasClass( views.xs ) || $html.hasClass( views.xxs ) ) && desktopInited ) {
-
-			// Mobile view, mutate back to mobile first if needed
-			$h1.removeClass( toggleClass );
-			$h1Copy.remove();
-			$( "h2:first-child", $menu ).remove();
-		}
-	},
-
-	/**
-	 * Initate setup for desktop mode
-	 * @method initDesktop
-	 * @param {jQuery DOM element} $elm Element targetted by this plugin, which is the nav
-	 */
-	initDesktop = function( $elm ) {
-		$h2 = $( "<h2 class='h3 hidden-xs visible-md visible-lg mrgn-tp-0'>Sections</h2>" );
-		$h1Copy = $( "<div class='gc-subway-h1' aria-hidden='true'>" + $h1.text() + "</div>" );
-		$( "ul", $elm ).first().wrap( "<div class='gc-subway-menu-nav'></div>" );
-		$menu = $( ".gc-subway-menu-nav", $elm );
-		$elm.nextUntil( ".pagedetails, .gc-subway-section-end" ).wrapAll( "<section class='provisional " + mainClass + "'>" );
-		$main = $elm.next();
-
-		// Prevent on-load blinking on desktop
-		$elm.addClass( "no-blink" );
-
-		desktopInited = true;
-	};
-
-// Listen for resizing and mutate the DOM accordingly
-$document.on( wb.resizeEvents, onResize );
-
-// Bind the init event of the plugin
-$document.on( "timerpoke.wb " + initEvent, selector + ".provisional", init );
-
-// Add the timer poke to initialize the plugin
-wb.add( selector );
-
-} )( jQuery, window, wb );
-
-
-
-
- -

- Research and blog posts -

- -

- This pattern was developed with CRA during an optimization project on the Canada Child Benefit. It works well on mobile devices and is an effective way to show the relationship between related pages. -

- -

- Latest changes -

- -
-
-
- -
-
- Updated the Subway pattern to remove 'avoid sub-steps'. This reflects that there may be instances where more complex processes would benefit from the use of sub-steps. -
-
- -
-
- Clarified that index page is required -
-
- -
-
- Changed 'sections' to 'pages' in introduction -
-
- -
-
- Launched the subway navigation pattern in Beta -
-
-
- -
-

- Discussion -

-

- - Discuss the pattern in github issues - -

-
- - - - - diff --git a/common-design-patterns/_tabbed-interface.html b/common-design-patterns/_tabbed-interface.html deleted file mode 100644 index 81a6dfef90..0000000000 --- a/common-design-patterns/_tabbed-interface.html +++ /dev/null @@ -1,338 +0,0 @@ ---- ---- - - - - - - - Tabbed interface - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Tabbed interface - Canada.ca design pattern

- - - -
- - - -

From: Treasury Board of Canada Secretariat

- - -
-

The tabbed interface pattern separates related content into different panes that are viewable one at a time when the respective tab is clicked.

-
-

Objective

-

Use the tabbed interface pattern to group and present different aspects of content that are closely related, such as:

-
    -
  • Geographic places, where the tabs can be used to present content relating to a place’s location, demographics, economy, etc.
    • -
  • Product catalogues, where the tabs can be used to present consistent facets of each product in the catalogue, such as specifications, features, etc.
    • -
-

Do not use the tabbed interface pattern when:

-
    -
  • content must be presented in a specific sequential order (instead, use a step-by-step pattern)
    • -
  • content needs to be compared and contrasted, which would lead to repeated switching between tabs (instead, use tables or other patterns that allow all content to be presented at once)
    • -
  • content is lengthy or detailed, because of space limitations in the tabbed interface
    • -
  • content presentation includes only 2 tabs (for greater efficiency, use subheadings)
    • -
-
-
-

How and when to use a tabbed interface

-
    -
  • Use defined presentation classes for the tabbed interface included in WET
    • -
  • Ensure that tab headers are clear and concise; avoid lengthy labels
    • -
  • When repeating the tabbed interface across a set of related pages (for example, on country pages), always ensure the tab headers are presented consistently
    • -
  • Make the default active tab first on page load; but another tab may be used as the active tab on page load if required
    • -
-
-
-
-
-
Tabbed interface pattern
- Image of tabbed interface pattern. Details on this graphic can be found in the surrounding text.
-
-
-
-
-
-
- - - -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/_tables.html b/common-design-patterns/_tables.html deleted file mode 100644 index f19f03549b..0000000000 --- a/common-design-patterns/_tables.html +++ /dev/null @@ -1,460 +0,0 @@ ---- ---- - - - - - - Data tables - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
- -
-

Tables: Canada.ca design - system -

-
-
-
    -
  • Last updated: 2021-05-21
    • -
-
-
-

Data tables allow you to communicate data efficiently using rows and columns.

-
-

On this page

- -
-
-

When to use

-
    -
  • Use to present data visually
    • -
  • Use to organize related information, such as contact numbers and details
    • -
  • Use - tables to organize data (Canada.ca Content Style Guide) - -
    • -
-
-
-

What to avoid

- -
-
-

How to implement

-

You can use either the beta or the stable version of this pattern. The beta tables use provisional CSS to make the tables responsive on small screens.

-

The beta version will eventually replace the stable version.

-
- Beta (responsive) data tables -

Beta responsive tables are:

-
    -
  • supported only for simple WET tables that don't have merged rows or columns
    • -
  • not supported by IE 11
    • -
-

Responsive tables create cards in mobile and small tablet view.

-

Because this is still in beta, make sure to test your tables in different views, especially if you add a lot of customization.

-
-
-
- - - -
-
-
-
- Code - 
<table class="provisional gc-table table" id="myTable1">
- <caption>Population growth in Canadian cities</caption>
- <thead>
-  <tr>
-   <th>City</th>
-   <th>Population in 2007</th>
-   <th>Population in 2017</th>
-   <th>Percentage change</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td data-label="City">Toronto</td>
-   <td data-label="Population in 2007">5,418,207</td>
-   <td data-label="Population in 2017">6,346,088</td>
-   <td data-label="Percentage change">17.1%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Montréal</td>
-   <td data-label="Population in 2007">3,714,846</td>
-   <td data-label="Population in 2017">4,138,254</td>
-   <td data-label="Percentage change">11.4%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Vancouver</td>
-   <td data-label="Population in 2007">2,218,134</td>
-   <td data-label="Population in 2017">2,571,262</td>
-   <td data-label="Percentage change">15.9%</td>
-  </tr>
-  <tr>
-   <td data-label="City">Ottawa–Gatineau</td>
-   <td data-label="Population in 2007">1,188,073</td>
-   <td data-label="Population in 2017">1,377,016 </td>
-   <td data-label="Percentage change">15.9%</td>
-  </tr>
- </tbody>
-</table>
-
-

Customizing tables

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OptionDescriptionHow to use
Table bordersAdds a border to help visually separate the table cells when they have a lot of contentAdd the class table-bordered to the <table>
Condensed spacingNarrows the height of the cells within the tableAdd the class table-condensed to the <table>
Striped rowsAlternates the colour of the table rows from white to greyAdd the class table-striped to the <table>
Hover rowsCauses the background to darken when a mouse hovers over a rowAdd the class table-hover to the <table>
Left alignedAlign the text in any cell on mobile cardsAdd the class text-left to the HTML item in the <td> you wish to align left, like a <span> or a <ul>
Simple filterProvides simple filtering for the tableAdd the class wb-filter to the <table>
Enable DataTables pluginProvides searching, sorting, filtering, pagination, etc. DataTables plugin documentationAdd the class wb-tables to the <table> and add the appropriate - data-wb-tables="" values -
-
-
- Stable data tables -
    -
  • 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

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

Research and blog posts

-

We tested the use of responsive tables successfully during optimization projects with Health Canada for recalls and safety, with CRA for organizing contact information, and across various COVID-19 content. Responsive tables are easier for users on small screens to use without having to scroll sideways to see all the content.

- -
-
-

Latest changes

-
-
-
Updated to include the provisional code for responsive cards
-
-
-
-

Discussion

-

Discuss the pattern in github - issues -

-
-
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
- -
-
-
-
- {% include footer-en.html %} - - - - - - - - - - - - - - - - diff --git a/common-design-patterns/_what-we-are-doing.html b/common-design-patterns/_what-we-are-doing.html deleted file mode 100644 index 07542f3071..0000000000 --- a/common-design-patterns/_what-we-are-doing.html +++ /dev/null @@ -1,393 +0,0 @@ ---- ---- - - - - - - - What we are doing - Canada.ca design pattern - Canada.ca - - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

What we are doing - Canada.ca design pattern

- - - - -
- - - -

From: Treasury Board of Canada Secretariat

- - -
-

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

-
-
-
-
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.
-
-
-
- - -
- -
- -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
{% include footer-en.html %} - - - - - - - - - - - diff --git a/common-design-patterns/fragments/_basic.mdx b/common-design-patterns/fragments/_basic.mdx deleted file mode 100644 index 31b479fddc..0000000000 --- a/common-design-patterns/fragments/_basic.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: null ---- diff --git a/common-design-patterns/fragments/_gc-subway-index.mdx b/common-design-patterns/fragments/_gc-subway-index.mdx deleted file mode 100644 index 36d3932c6b..0000000000 --- a/common-design-patterns/fragments/_gc-subway-index.mdx +++ /dev/null @@ -1,70 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: '[Name of service]' ---- - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut [...]. -

- - - diff --git a/common-design-patterns/fragments/_gc-subway-page.mdx b/common-design-patterns/fragments/_gc-subway-page.mdx deleted file mode 100644 index 1978f110c4..0000000000 --- a/common-design-patterns/fragments/_gc-subway-page.mdx +++ /dev/null @@ -1,112 +0,0 @@ ---- -altLangPage: null -breadcrumbs: [] -date: null -dateModified: null -description: null -title: '[Service name]' ---- - - - - - -

- [Page 1] -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae. Nulla nec convallis felis. Ut pretium nisl nisi. Nam gravida gravida aliquet. Morbi tincidunt lorem in purus imperdiet, id rutrum mauris sodales. Vivamus nec mattis tellus. Nunc turpis dolor, malesuada non magna nec, scelerisque tristique velit. -

- -

- Sed consectetur eu ligula a molestie. Vivamus convallis libero malesuada pharetra suscipit. In a pulvinar mi, quis aliquet mauris. Duis convallis nunc nunc, in euismod nisi volutpat sit amet. Integer convallis lacus non orci imperdiet, ac convallis massa mollis. Aliquam erat volutpat. Ut maximus euismod auctor. Ut ac gravida nunc. Nam non efficitur neque. Pellentesque tincidunt, libero luctus condimentum laoreet, turpis magna maximus nibh, at cursus lectus tellus in augue. Aenean scelerisque eros dui, at tincidunt eros tristique nec. -

- - - diff --git a/community/_contribution-process.html b/community/_contribution-process.html deleted file mode 100644 index bb19146ec5..0000000000 --- a/community/_contribution-process.html +++ /dev/null @@ -1,221 +0,0 @@ ---- ---- - - - - - - Design system community - Canada.ca - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Contribution process

- - - -
- -

The GC design system needs to be constantly improving. The goal of this framework is to foster continuous improvement of the guidance through experimentation. It creates a space for departments to experiment and innovate, and contribute their findings for the benefit of the whole GC web community.

-

On this page

- -

Identify: submit a proposal for improvement

-

While designing content for Canadians or while testing your current design, you may determine that either:

-
    -
  • an existing component, pattern or template needs to be improved
    • -
  • a new component, pattern or template is needed to fill a gap in the design system
    • -
-

Consult the backlog and the experiments in progress

-

The first step is to find out if the improvement has already been identified. To do so, consult the backlog:

- -

If your suggestion is not already identified

-

If the pattern or template you identified for improvement is not in the backlog, you can submit a proposal by opening an issue in GitHub.

-

The proposal must include at least:

-
    -
  • a description of the issue or gap identified
    • -
  • a hypothesis on how to fix it
    • -
-

Suggestions will be reviewed on a case-by-case basis by the community.

-

Design: from prototype to stable

-

Once an idea has been identified, anybody can work on tackling the issue.

-

Initial design and prototype

-

As soon as some form of prototype exists, it can be moved from the "to do" column to the the backlog to the "Design and prototyping" column in the backlog project board.

-

Update the corresponding issue in GitHub to share the prototype with the community.

-

Alpha

-

To go from early prototype to Alpha, the prototype needs to be accompanied with documentation that includes at the minimum:

-
    -
  • a hypothesis of how to solve the issue
    • -
  • a mock-up or a coded prototype
    • -
- -

The Alpha phase is used to test the hypothesis, conduct research, deal with accessibility considerations, and code a working example for testing.

-

Beta

-

To go from Alpha to Beta, you need the following:

-
    -
  • a fully working coded example
    • -
  • any CSS/JS overrides needed to implement in the latest WET theme for Canada.ca
    • -
  • assessment of accessibility
    • -
  • rationale for design choices - this can be results from research or a strong rationale
    • -
  • some guidance on "When to use" this component, pattern or template
    • -
  • documentation in both official languages
    • -
-

Use the Beta phase to scale up the experiment and fix any issues you encounter.

-

Beta updates are available through the main design system library, and departments can use them, as long as they consider it an experiment and are willing to report back on findings.

- -

Stable

-

To go from Beta to Stable, the following must be done:

-
    -
  • integrated to core framework (WET)
    • -
  • completely valid code
    • -
  • no accessibility issues left unresolved
    • -
  • comments from the community have been resolved
    • -
-

Iterate: back to the drawing board

-

Once a new or updated pattern has moved to stable, it becomes the new baseline guidance.

-

But it doesn't mean that it's now perfect. If this improvement hasn’t solved all the issues, or if new issues arise, the component, pattern or template can be added back to the backlog and be the subject of another design round.

- -
- -
-
-
-
-
-
-
-
Report a problem on this page
-
-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
-
- {% include footer-en.html %} - - - - - - diff --git a/community/_landing.html b/community/_landing.html deleted file mode 100644 index cd4f21c6ad..0000000000 --- a/community/_landing.html +++ /dev/null @@ -1,201 +0,0 @@ ---- ---- - - - - - - Design system community - Canada.ca - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Design system community

- - - -
- -

Anyone can contribute to the Canada.ca design system.

-

On this page

- -
-

Community principles

-

Follow these principles when you contribute to the Canada.ca design system. These principles are heavily inspired by the GOV.UK design system community principles.

-

1. Start with what already exists

-

Start with the current library. There already may be something you can use, or something you can improve upon.

-

The existing components, patterns and layouts are evidence-based, and they are a great starting point. Know what's there to identify gaps and possible improvements.

-

Look at the community backlog to see if your idea has already been identified.

-

Reach out to community to find what others already have done.

-

2. Share your learnings with the community

-

As you do research, share your findings with the whole community.

-

Try to contribute back design components and patterns that are scalable, reusable and can evolve over time.

-

If you find something that doesn't work (a gap, an error, a contradiction, a flawed design), speak up. Let the community know.

-

When working on a contribution, gather evidence, and share it.

-

3. Work in the open, and be open

-

To avoid duplication of effort, when you are working on something, let the community know.

-

Share your work as early as possible, so others can contribute too.

-

Be honest and humble: share what works, what doesn't, and the research you did to understand that.

-

Be kind and respectful, and be open to feedback and changes to your work.

-

Be inclusive from the get go, and value what others can bring.

-
-
-

How to contribute

-

Anyone can contribute to the Canada.ca design system.

-

A contribution could be:

-
    -
  • suggesting an improvement to a component
    • -
  • working on a new pattern or page layout
    • -
  • clarifying guidance
    • -
  • correcting an error
    • -
  • anything that makes the design system better for the community
    • -
- -

Contribution process

- -

Backlog

-

The community backlog is on GitHub. It documents all the ideas to work on and their status.

- Community backlog - -
- -
-
-
-
-
-
-
-
Report a problem on this page
-
-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
-
- {% include footer-en.html %} - - - - - - diff --git a/continuous-improvement/_choosing.html b/continuous-improvement/_choosing.html deleted file mode 100644 index 8175302fb2..0000000000 --- a/continuous-improvement/_choosing.html +++ /dev/null @@ -1,365 +0,0 @@ ---- ---- - - - - - - Choosing what to improve - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Choosing what to improve: Continuous improvement of web content

- -
-

On this page

- -
- -

Use a task-based approach

-

Canada.ca is the Government of Canada primary service delivery channel.

- -

People visit Canada.ca to do things like:

-
    -
  • learn about health risks
    • -
  • apply for passports
    • -
  • pay their taxes
    • -
  • receive benefits
    • -
  • find jobs
    • -
  • learn about product recalls
    • -
  • better understand current international trade negotiations
    • -
- -

People come to Canada.ca to complete tasks that let them fulfill their goals or objectives. For example, the tasks might be to check eligibility requirements and apply for a benefit. The goal is to receive the benefit payment.

- -

Improving services on Canada.ca means ensuring that people are able to complete their tasks as efficiently and easily as possible.

- - -

Top tasks

-

Use a people-centred and data-driven way to focus and prioritize improvement efforts on the web by focusing on top tasks.

- -

Determining what the top tasks are for your organization is crucial to focusing on what matters.

- -

The GC Task Success Survey offers you a people-centred and data-driven way to prioritize your improvement efforts:

- - - - -

Improving the right thing

- -

You won’t be able to improve everything. Some tasks are much more important to your users – and to your mandate – than others.

- -

To choose what to improve, focus on 3 things:

- -
    -
  • identify what tasks are causing the greatest challenges
    • -
  • understand how these problems are affecting your users and internal resources
    • -
  • choose what is feasible for you to improve, given time limits, organizational culture and interest levels
    • -
- - - -

Use data from task success surveys, direct feedback, call centres and other sources to determine your priorities.

- -
- - - -

If the team doesn’t agree on the big picture, then they certainly won’t agree on a single feature.

-

Jory Mackay, 7 Ways to Prioritize Features and Product Improvements

-
- - -

Task success survey results

-

Results and feedback from task success surveys will help you identify which tasks could be good candidates for improvement.

- -

The GC Task Success Survey lets you measure and monitor results:

- - -

Frustration expressed through direct feedback

- -

Analyzing direct feedback from people using your information through exit surveys, page feedback, and previous usability testing can help you narrow in on specific problems.

- - -

Call drivers, complaints, social media listening

- -

Are you getting more calls, or more complaints from your users about specific services? Is your front-line staff describing areas of struggle? Is there a sudden flurry of posts related to your services on social media? These are clear indicators of areas you may need to focus on.

- - - - -

There are different methods and scorecards you can use to help prioritize problems that users are experiencing. These resources can help you learn more about prioritization methods:

- - - - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
- -
-
Date modified:
-
-
-
- -
- {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_designing.html b/continuous-improvement/_designing.html deleted file mode 100644 index 61c9bafdf5..0000000000 --- a/continuous-improvement/_designing.html +++ /dev/null @@ -1,456 +0,0 @@ ---- ---- - - - - - - Designing content - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Designing content: Continuous improvement of web content

- -

When you design content for Canada.ca, you design for people. The goal is to help people get what they need from the government.

- - - - -
-

On this page

- -
- -
- - -

Focus on task success

- -

First, determine the task at hand: what is it that users are trying to do when they get to the page or set of pages?

- -

Tasks can be things like:

- -
    -
  • apply for a benefit
    • -
  • get a copy of an official document
    • -
  • look for jobs
    • -
  • find out if a business name is available
    • -
- -

One question should drive all design decisions: does it help people succeed in completing the task?

- - - - -
- -

Foster trust

- -

People need to know they'll find information they can trust.

- -

A consistent brand

- -

Using a consistent look throughout the Government of Canada web presence is crucial to building a trustworthy experience for people. People need to know they'll find information they can trust.

- - - -

Use the mandatory elements of the Canada.ca design system to implement this trusted brand.

- -

The mandatory elements you need to follow are:

- -
    -
  • Canada.ca domain
    • -
  • mandatory styles (typography, colours and layouts)
    • -
  • standard header and footer
    • -
  • a handful of high-level mandatory templates to establish a consistent institutional presence and the Canada.ca topic tree
    • -
- -

Once you've applied this uniform brand, you can still use creativity within the body of the page to come up with the best design to help people complete their tasks.

- - - - -

Provide the answers people are looking for

-

The best way to foster trust is to provide people the answers they are looking for.

-

When someone can confidently take action based on the information you provided, you know you’ve built a trustworthy product.

-

Make sure you understand what people are trying to get from your content. Use evidence from research and data to make it easy for people to find, use and understand these answers.

- - - -

Make content findable

-

People can’t succeed at a task if they can’t find where to initiate it.

-

To improve findability, you can work on:

-
    -
  • navigation
    • -
  • internal and external search
    • -
- -

Navigation

- -

Some people will navigate to their task on the Canada.ca site. To support this, making a clear path for people's tasks is crucial. That means planning your navigation structure and taking time to understand what labels will work best for your audience.

- - - -

Internal and external search

-

Some people will search on Canada.ca or external search engines.

-

Using the right keywords, organizing your content properly and adding good metadata can help improve search results. Adding structured data can also be a useful technique.

- - - -

Help people understand

- -

Once people find the page they need, they have to be able to understand what they read. The way we write and the words we use make an enormous difference.

- -

Use the words people actually use, not your internal jargon.

-

Stick to the essentials, and provide just enough information for people.

-

Write simple sentences and short paragraphs. Make good use of headings to help people scan the page and focus on the parts they’re looking for.

- - - - -

Make content easy to use

-

Use patterns and layouts that make it easy for people to use the content to complete their tasks. This could be simple text, a filterable table, a button, an interactive checklist or other patterns.

- -

If you can't find an existing pattern or template in the library that does everything you need, you can get creative as long as you respect the mandatory elements of the design system. If your solution works well, we may add it to the Canada.ca design system for others to use when they have similar needs.

- -

Do usability testing to make sure your design really does help people complete their tasks.

- - - -

Build in accessibility and inclusivity

- -

Accessibility and inclusivity have to be at the forefront of your design. Just like translation, accessibility and inclusivity are non-negotiable.

- -

Make sure your design is accessible as you develop it, not as an after-thought.

- -

The Standard on Web Accessibility requires all GC web pages to meet level AA of the Web Content Accessibility Guidelines (WCAG ) 2.0 requirements.

-

But this is only the minimum standard: if possible, shoot for AAA and WCAG 2.1 requirements.

- - - - -

Checklist for finalizing content

-
- Before going live with improvements, you need to finalize the content: -
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • - -
  • - - -
    • - -
  • - - -
    • - -
-
- - - - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
- -
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_monitoring.html b/continuous-improvement/_monitoring.html deleted file mode 100644 index 48c75b7547..0000000000 --- a/continuous-improvement/_monitoring.html +++ /dev/null @@ -1,323 +0,0 @@ ---- ---- - - - - - - Monitoring and measuring task success - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Monitoring and measuring task success: Continuous improvement of web content

- -

On this page

- - -

Monitor and measure content after it goes live. Continuous improvements throughout the content’s life cycle avoids high-effort optimization projects down the road.

- -

Establish performance indicators

- -

For continuous improvement to work well, you need to establish performance indicators and identify data sources that help you evaluate how your content or service is performing.

- -

We can use data to make sure that:

- -
    -
  • people can complete their task
    • -
  • content is easy to find and understand
    • -
  • information is up to date and accurate
    • -
- - -

GC Task Success Survey

- -

As part of reporting requirements for the Government of Canada, Treasury Board of Canada Secretariat has adopted the task success survey method as a primary means of measuring the performance of web content and services.

- -

All departments and agencies subject to the Directive on the Management of Communications are required to implement the GC Task Success Survey on their web properties.

- - - - - -

Monitoring other performance indicators

- -

Monitoring other data sources and performance indicators can uncover potential problems with your content or service.

- -

Combining data from multiple sources gives you a richer picture of how your content or service is performing.

- -

Additional data sources include:

- -
    -
  • user feedback
    • -
  • call centre data (calls, emails)
    • -
  • social media monitoring
    • -
  • web analytics
    • -
  • interviews (users, front-line staff)
    • -
  • usability tests with talk-aloud protocol
    • -
  • others (financial statements, public opinion research, etc.)
    • -
- -

It’s best to combine metrics with usability testing to validate proposed improvements.

- - - - -

Continuous improvement

- -

Use the data you’ve been monitoring (such as user feedback, analytics, and user research) to find ways to improve your content. Evaluate proposed improvements with usability testing.

- -

Over time, programs and policies change and your content will need to change accordingly. With each change comes a new opportunity to research, prototype, and test out solutions before going live.

- - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
- -
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - - - diff --git a/continuous-improvement/_research.html b/continuous-improvement/_research.html deleted file mode 100644 index a372a63351..0000000000 --- a/continuous-improvement/_research.html +++ /dev/null @@ -1,636 +0,0 @@ ---- ---- - - - - - - Research and prototyping - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Research and prototyping: Continuous improvement of web content

- - -

On this page

- - -

Process

- -

There is no single method for continuous optimization, but most approaches will follow a similar process. You identify a problem, research the issue, gather a baseline, prototype and test (as many times as needed), go live, and finally measure the impact of your work.

- -

The method described here is how the Digital Transformation Office approaches content optimization projects.

- - -
- A long description can be found after the image. -
-
- DTO optimization process -

Step 1: Initiation. Project start-up, define the problem.

-

Step 2: Discovery. Initial research, determine tasks.

-

Step 3: Baseline study. Test the current service with users.

-

Step 4: Design and prototype. Develop prototype, test and iterate.

-

Step 5: Comparison study. Test prototype with users, iterate to improve.

-

Step 6: Transition. Prototype hand-off and transition to live.

-
- -

Initiation

- -

You need to identify all of the stakeholders - particularly those who will have an impact on whether what you’re doing goes live. If the right people aren’t involved early on, you may experience significant delays. In the worst case scenario, your work may never see the light of day.

- -

Agree on what you’re trying to accomplish and make sure to have a good understanding of the barriers that may prevent implementation.

- - -

At the DTO we use a project tracking sheet where we can link to all of the important study artifacts:

- - - -

Discovery phase

- -

The purpose of the discovery phase is to conduct user research that will:

- -
    -
  • tell you about the people using your content
    • -
  • identify the tasks they are trying to complete
    • -
  • pinpoint the challenges people are facing
    • -
  • help you form hypotheses for a usability testing plan
    • -
  • help define or refine the specific goals for your project
    • -
- -

Avoid making assumptions or thinking about solutions before discovery research is complete. It’s important to understand the problems that people are having first. You will tackle potential solutions through prototypes in the next phase.

- -

Common research methods in the discovery phase

-
- -

Asking your own questions and knowing how to find the answers is a critical part of being a designer

-

Source: Erika Hall, Just Enough Research

-
- - -

To create research questions, you need to understand gaps and weaknesses with the current situation. Use all or some of these methods to analyze your current situation.

- - -

Qualitative research

- -
    -
  • Feedback from users
    • -
  • User interviews
    • -
  • Previous usability studies
    • -
  • Usability studies: first click tests, card sorting, tree jacks
    • -
  • Surveys or other behavioral insights reports
    • -
  • Social listening: web forums, social media
    • -
- -

Quantitative research

- -
    -
  • Content inventories and maps
    • -
  • Call centre reports
    • -
  • Web analytics
    • -
  • GC Task Success Survey results
    • -
- -

Learn about people using your content

-

By understanding the people who use your content, you will know more about who they are and their behaviours. This will help you narrow down who you need to recruit for usability testing.

- -

Record your findings and the challenges people are facing

-

Some ways to summarize these findings include:

- -
    -
  • kanban board
    • -
  • spreadsheets with analytics
    • -
  • concept maps
    • -
  • interview transcripts
    • -
  • journey maps
    • -
- -

Identify the specific tasks people are doing

- -

Decide which specific tasks you will address as part of the optimization work.

- -

You will build the solutions you prototype around these tasks.

- -

Some examples of specific tasks from the Canada Child Benefit program:

-
    -
  • How much will the payment be?
    • -
  • When will the payment be sent / deposited?
    • -
  • Check if you are eligible to receive the Canada Child Benefit
    • -
  • How to update your address
    • -
- -

Sharing the discovery research

- -

Summarizing and sharing what you’ve learned is an important milestone. This is a living document that you add to as you learn more through your research. You’ll refer back to these artifacts often.

- -

Baseline measurement phase

- -

A baseline measurement gives you a direct comparison of how a task performed before you optimize it.

- -

If having a direct comparison is important to demonstrate the impact and value of your solutions, this is an important step to include. Make sure to use the same measurement method before and after optimization if you want comparable results.

- - -

If your project is completely new you may not have anything to baseline test.

- -

Additionally, if your proposed solution is small or you have another metric (like call centre data or GC Task Success Survey data) that you will use to evaluate effectiveness, you could skip running a baseline study.

- -

Why run a baseline usability study

- -

Watching real people use your content is one of the most effective ways to gather evidence about the problems you’re looking to solve.

-

Perform moderated or unmoderated baseline studies with people trying scenarios on existing web content.

- -

When to use moderated and unmoderated testing

- - - - - - - - - - - -
Moderated is best for:Unmoderated is best for:
-
    -
  • a complicated process or concept
    • -
  • when you want to ask follow-up questions if a participant is stuck or confused
    • -
  • working with a specialized group of participants
    • -
    -
  • quick results
    • -
  • studying a few very specific tasks
    • -
  • if you only need to select participants using basic demographics (age or income)
    • - -
- - - - -

At the DTO, we include 16-18 participants in moderated baseline studies when we want to generate percentage task success scores that have reproducible results.

-

You can run smaller studies with fewer participants to gain insights about specific parts of your site. In our work at the DTO, we often run qualitative usability tests with 6-8 participants, but you can run studies with as few as 3-5 participants and still get useful results.

-

In small studies, do not report success or failure as percentages since the results are not reproducible.

- -
-
-

Correct

-

2 / 8 participants were able to complete the task successfully

- - -
-
-

Incorrect

-

25% of participants were able to complete the task successfully

- -
-
- - -

Recruiting participants

-

Recruit people for your usability tests that are representative of the audience for your content or service. You can work with a company to help recruit participants or use screening criteria in unmoderated tools to help find the right people to reduce variability in your results.

-

Plan to over-recruit - expect that there will be no-shows or that some unmoderated tests may not work out as expected.

- -

Whoever is recruiting participants and conducting research is responsible for protecting the privacy of participants and ensuring they have informed consent before starting the study.

- - -
- Collecting personal information - -

Before collecting participants’ personal information, check in with your privacy group.

-

The Privacy Act governs how the federal government handles personal information.

-
    -
  • Section 3: Definitions
    • -
  • Section 4: Authority to Collect
    • -
  • Section 8 (2): Appropriate Disclosure of Information
    • -
-

The Tri-council policy statement on Ethical Conduct for research involving humans outlines best practices for conducting research with participants.

-
    -
  • Chapter 3 provides guidelines for collecting informed consent.
    • -
- - -

The Directive on Privacy Practices provides direction on how to implement effective privacy practices including collecting and notifying participants how their information will be used.

-
    -
  • Section 6: Requirements
    • -
  • Section 6.2.9: Privacy Notice
    • -
- -

When using unmoderated usability testing tools, we include a screening question that tells participants how we may use the recordings. At this point, they are given the choice to opt out.

- -

Example privacy screener text

-

“We sometimes use recordings in public blog posts, with any personally identifying information hidden and voices altered. Please only accept this test if you consent to us using your recording in this way.”

- -
- -

Write task scenarios

-

Research questions

-

Using your discovery research, you now have a prioritized list of challenges that you're facing and potential tasks to test.

-

Develop research questions based on these tasks. (What do you want to find out? To prove?) Research questions help narrow the scope of your study to the behaviours you want evidence on - make sure everyone agrees on them!

- - - -

With your list of research questions in hand, draft tasks that will help you gather evidence and provide insights about ideas to prototype.

- -

Tasks

-

These must be real things people are trying to accomplish.

- -

Hypothesize about what you think may happen during the test.

- -

We find that we can test 8-10 small tasks in an hour-long moderated session or 5-6 tasks in an unmoderated 30-minute session.

- -

Scenarios

-

Scenarios are realistic narratives for a task that the team creates together.

- -

Using the job story formula, identify a situation a user may find themselves in and the strategies they use to arrive at a desired outcome.

- -

A job story follows this format:

-

“When I (situation), I want to (motivation), so I can (expected outcome)”

- -

This is a valuable approach to reinforce your understanding of how and why a service is used.

- -
-

Example task
Change direct deposit bank account details.

- -

Job story
When I move my mortgage to a new bank, I want the CRA to put my tax refund into the new account, so I can pay my mortgage on time.

- -

Scenario
You renewed your mortgage, and you moved all your bank accounts to a new bank. What number would you call to get your personal tax refund into your new bank account? (answer: 1-800-959-8281)

-
- -

Fine-tune these tasks so they tell you as much as possible, are accurate, and feasible for your participants to complete. Make sure each task has a clear answer. Answers may be yes/no, or else something specific such as a number or percentage, a date, a telephone number, etc.

- -

Before you run your first official test, make sure you pilot your task scenarios. For example, you can ask a friend or colleague to try doing the task to get a sense of whether participants will understand what you’re asking them to do.

- - - -

More information on writing task scenarios

- - - -

Running a moderated or unmoderated baseline study

- -

You can use an outside firm to run a moderated study for you or set it up yourself. If setting up a moderated study yourself, you will need to select a screen and audio sharing tool. Pay attention to any special installation requirements. If possible, let participants know in advance which tool you will be using so they can prepare their computer or device ahead of time.

- -

You can choose from a range of third party services that provide moderated and unmoderated study tools. An unmoderated study can be run outside of work hours and is generally less expensive to run.

- -

In both scenarios, you want to have video recordings at the end of each session that you can use to complete a detailed analysis.

- - -

Additional resources on moderated and unmoderated testing:

- - -

Analyzing baseline results

- -

Involve everyone on the team in the analysis process, at least as an observer.

- -

Reviewing transcripts and summary reports is helpful but there is no replacement for first-hand observations with real users. Ensure the whole team can participate by watching videos or live sessions.

- -

Take notes of key behaviours during the sessions

- -
    -
  • clicks - note all links clicked, and every click on anything, whether it’s clickable or not
    • -
  • direct quotations of feedback about an issue
    • -
  • scrolling the page
    • -
  • reading headings aloud
    • -
  • skimming text - missing links in skimmed text
    • -
  • observations about issues encountered
    • -
  • the point where they arrived on the page with the answer
    • -
  • if they found the correct answer
    • -
- - -

Share any shorthand you use in your notes

- -
    -
  • use identifiers for clicks on navigation like breadcrumb BC, back button B, menu link M
    • -
  • note search, filter and find attempts with keywords used S keyword, F keyword
    • -
- -

When analyzing the data you’ve collected, read through the notes carefully looking for patterns and be sure to add a description of each of the problems. Look for trends and keep a count of problems that occurred across participants.

- -

Share your findings

-

Summarize the test results in a usability test report with your findings and recommendations. An effective report will include visuals such as screen shots and short video clips to illustrate specific problems.

- - -

We recommend presenting the findings in person. This is an effective way to make sure that stakeholders and approvers understand the issues that you are trying to fix. These sessions are a great way to build empathy for users with members of the team that did not observe or participate in analysis of the usability tests.

- -

An emailed report is an ignored report!

- - -

Outcome of the baseline testing phase

-
    -
  • You have a baseline score for each task scenario
    • -
  • You have videos of people attempting tasks
    • -
  • Project team members and stakeholders have watched all videos for at least 1 task
    • -
  • You know exactly how many people did what in each case
    • -
  • You have a list of issues that need to be addressed
    • -
  • All project stakeholders understand the issues and want to get them fixed
    • - -
- - - -

Prototype ideas to improve success

- - -

There are different approaches to prototyping, from basic wireframing to fully working HTML pages.

-

Basic designs help in the early stages of ideating for teams to discuss and visualize. Fully working HTML prototypes can make testing easier since they behave exactly, or almost exactly, like the real live content would.

-

Make sure prototypes aren’t behind firewalls or in staging/development servers that are not publicly accessible if you’re testing with members of the public.

- -

Our preferred way of prototyping at the DTO is HTML, using GitHub pages, but there are other options for creating high-fidelity interactive prototypes including:

- -
    -
  • Figma
    • -
  • InVision
    • -
  • Axure
    • -
  • Adobe XD
    • - -
- - -

Prototypes are a great change management tool. Doing demonstrations using prototypes can bring together diverse perspectives (for instance from communications and policy, or across branch or departmental lines).

-

A prototype that can be easily updated during workshops can be very effective. A live editing session can turn ideas from participants into something concrete in real time. It also demystifies content design and coding, which helps create buy-in for an iterative approach.

-

Prototyping is a risk-reduction strategy. It lets stakeholders see the proposed approach and comment on it or correct it before it goes live.

- - - - -

Comparison testing

- -

Once your prototypes are ready, you need to test them to see whether your ideas and solutions work with users. When possible, use the same test questions and testing approach as you did for the baseline study so that you can make direct comparisons and verify whether you met objectives.

- -

As testing progresses, you may find it necessary to continue fine-tuning or adjusting your prototypes, if participants continue to struggle. The participants will help you understand what helped, and why.

- -

No matter how smart or experienced you are, you will be surprised by what you see people do.

- -

Follow up testing with analysis and reporting. The testing report or presentation should communicate improvements or areas that require further work. Include a plan to complete those additional changes.

- -

This report will be a critical tool for building the case for change among decision makers during the following implementation phase.

- - - - - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
-
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - diff --git a/continuous-improvement/_team.html b/continuous-improvement/_team.html deleted file mode 100644 index 1ca021a26b..0000000000 --- a/continuous-improvement/_team.html +++ /dev/null @@ -1,494 +0,0 @@ ---- ---- - - - - - - Organizing and preparing your team - Continuous improvement of the Government of Canada web content - Canada.ca - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
-
-

Organizing and preparing your team: Continuous improvement of web content

- -

On this page

- - -

Establish your team

-

Web content improvement projects usually require the participation of many people. Different roles are needed to ensure coordination, research, design and delivery.

- -

There are different ways you can organize your team, and some people may have more than one role, but the following roles should be covered.

- - - -

Project leadership and coordination

- - -

The project lead:

-
    -
  • sees the project through to implementation
    • -
  • ensures a measurement strategy is put in place
    • -
  • understands and plans mitigation of the barriers that prevent implementation
    • -
  • facilitates workshops and meetings to keep everyone working in the same direction
    • -
- -

The project coordinator keeps the team organized, maintains spreadsheets, documentation and schedules meetings.

- -

User research and usability testing

- -

Research-driven improvement projects require impartial usability research specialists who can recruit participants and run replicable tests with multiple participants.

- -

Design researchers understand and uncover user behaviours and expectations through various research methods.

- -

This group of people could be in-house or through a third party.

- - -

Design

-

Content designers focus on improvements to language and how content is structured or displayed to help people complete their tasks.

- -

Interaction designers build prototypes and provide input on interactive approaches that may enhance the user’s experience.

- - - -

Subject matter experts

- -

Content improvement must be done with the involvement of subject matter experts, who understand the topic and what needs to be conveyed to the audience. These participants may differ, depending on the program area:

- -
    -
  • program and policy experts, to ensure a thorough understanding of the context and purpose
    • - - -
  • front-line service agents who can be an invaluable sources of information about customer needs and frustrations
    • - -
  • content developers / contributors
    • -
  • web support team and relevant Canada.ca theme lead
    • -
- -

Senior management and decision makers

- -

You need to involve senior management to approve decisions on content, design and interactions. You need someone to champion implementation once research and recommendations are done. Designing web materials for task success may conflict with organizational pressures. It's critical that senior management be engaged early and often, to understand the methods, and to participate in crafting appropriate project goals.

- -

Some of the greatest risks to project success are:

- -
    -
  • a lack of organizational experience designing services from the client’s perspective
    • -
  • situations where multiple groups in the organization may be impacted by changes to service delivery
    • -
  • usability testing or analytics evidence contradicting approaches that support competing priorities (political, organizational, regulatory, etc.)
    • -
  • overly long and complex approval processes
    • -
- -

Some of the best ways to overcome these risks include:

- -
    -
  • engaging senior management early and often -
      -
    • we recommend engaging senior management early in the process, as well as on a frequent basis during the project
      • -
    -
    • -
  • keeping senior management up to date on human-centred service design, evidence gathering approaches and usability testing
    • -
  • sharing user stories - especially when audiences struggle with current designs
    • -
  • identifying likely obstacles in advance and tailoring discussions accordingly
    • -
- -

Co-design with approvers at the table (blog post)

- -

Set up your governance structure

- -

Improving content for people often means significant change for organizations. To lead a successful improvement project, people working on it need to agree on the purpose, approach and objectives.

- -

Everyone involved needs to be on board.

- -

You need:

- -
    -
  • a high-level agreement on what you want to accomplish with the improvement project
    • -
  • buy-in on the people-centred and evidence-based approach for decision-making
    • -
  • a project team with the right skills, ready to work together
    • -
  • a project lead and well-defined roles and responsibilities
    • -
  • a clear understanding of the potential barriers to implementation and how to address them
    • -
- - -

Resource: One page project alignment template (Google Docs)

- -

Governance to address barriers

- -

Effective and intentional governance can help address the barriers that may get in the way of project success.

- -

These barriers include:

- -
    -
  • challenging traditional decision-making and chains of command with new, research-based approaches to web content
    • -
  • ensuring the right people with the right knowledge are involved
    • -
  • understanding the relationships between design and technical implementation
    • - -
- - -

Effective project governance removes ambiguity about who is accountable for which decisions.

- -

Tips for good governance

- -
    -
  • Structure your team to support the project’s objectives by ensuring there is awareness, acceptance and capacity to produce an outcome that supports what people need from you
    • -
  • Make sure decision-makers can support approaches that have been tested and proven to work.
    • -
  • To meet objectives, you will need people in roles to be accountable for: -
      -
    • implementing the improved content
      • -
    • using evidence to drive decisions
      • -
    • engaging with stakeholders effectively
      • -
    • understanding and mitigating risk
      • -
    • ensuring there is a team-wide understanding of the subject
      • -
    • ensuring acceptance of the evidence-based approach among subject matter experts
      • -
    -
    • -
- -

Example project governance model

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Example project governance model
RoleCore taskAccountable for
Senior managerApproval and oversightImplementation of improvements
Project leadImplementation of improvementsKey deliverables and timeline
Project coordinatorContacts, meeting invitations, notes and records of decisionKeeping team consulted and informed
Design researcherUser research and usability testingProviding the evidence to drive design decisions
Content designerEvidence-based content improvementsMaking design decisions based on the evidence
Interaction designerEvidence-based designs and prototypingMaking design decisions based on the evidence
Subject matter expertsReview content for accuracyAccuracy of content after improvements
- - - -

Plan for efficient approvals

- -

Approval processes often take time. There are things you can do to make it better.

- -

Involve approvers from the get go

- -

Don’t wait until the end of the design process to seek input from people who will approve the content. Involve all stakeholders at the beginning of the process, and identify the approvers early on.

- -

Make sure everyone who needs to know is aware of the objectives and timelines of the improvement project.

- - -

Design and prototype collaboratively

- -

Don’t design and prototype all by yourself. Lead content design workshops that involve everyone that has a stake in the content: subject matter experts, policy people, communications, web advisors, etc.

- - -

Use demos to show the design to approvers

- -

Instead of simply passing around a Word document asking for input, do regular presentations to people who will approve the content. Show the process, the research and the actual prototype, and demonstrate how this is an improvement.

- -

The more carefully you prepare content before approvals, the less approvers will need to tweak it. Do the hard work to make it easy for them to give the ok to go live.

- -

It’s up to the project team to:

- -
    -
  • review text in both languages carefully
    • -
  • verify code validity and accessibility
    • -
  • review (QA) coded content for broken links, missing text, etc.
    • -
  • prepare analytics tagging and performance reporting
    • -
- - -

Co-design with approvers at the table (blog post)

- - - - - -
-
-
-
-
- - - - - - - -
-
-
-

Did you find what you were looking for?

-
-
- - -
-
-
- -
-
- What was wrong? -
- -
-
- -
-
- -
-
- -
-
- -

- You will not receive a reply. Telephone numbers and email addresses will be - removed. -
- Maximum 300 characters -

- - -
-
-
-

Thank you for your feedback

-
-
-
-
-
-
-
-
-
- -
- -
-
Date modified:
-
-
-
-
- {% include footer-en.html %} - - - - - - - - - - diff --git a/crisis/_alerts.html b/crisis/_alerts.html deleted file mode 100644 index b7a6b5a1f6..0000000000 --- a/crisis/_alerts.html +++ /dev/null @@ -1,278 +0,0 @@ ---- ---- - - - - - - Canada.ca alerts and service disruptions - Canada.ca - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- -
-
-
- - -
- -
- -

Canada.ca alerts and service disruptions

- -
-
-

From: Treasury Board of Canada Secretariat

-

Last updated: 2022-05-10

- -

These recommendations will help bring consistency to each department's communications on service disruptions during a crisis.

- - - - -
- -

On this page

- -
-
- -

How to use alerts for service disruptions

-

Alerts are meant to draw attention to changes in regular content in 2 ways:

-
    -
  1. a change to the content of the page on which the alert appears: in this case, place the alert next to the updated content
    2. -
  2. a change that has been made elsewhere, such as new information being published: in this case, link to the new information from within the alert
    3. -
-

- -

What to include in alerts

-

Alert content should:

-
    -
  • be short and simple
    • -
  • describe the impact on the user
    • -
  • be tailored to the page on which it appears
    • -
  • include the dates (if known) when the disruption will take place
    • -
  • use the appropriate verb tense to reflect when the change is taking place
    • - -
  • use links sparingly - if a link is needed, only include one
    • -
- -

Limit use of alerts

-

Be aware that alert fatigue reduces the effectiveness of the alert over time. The more people see alerts and warning messages the less receptive they are to them. To avoid this, follow these guidelines:

-
    -
  • only use alerts on a temporary basis (for the time it takes to integrate the information or resolve the situation)
    • -
  • limit the number of alerts on each page
    • -
  • limit the number of alerts used across pages: -
      -
    • use at impacted points of service or information delivery, such as service initiation pages, contact pages, etc.
      • -
    • avoid beyond service or information delivery points - on theme and topic pages, consider using a new doormat instead
      • -
    -
    • -
  • save alerts for significant situations that impact most users: -
      -
    • on the Canada.ca home page, only use when more than 50% of the population is affected
      • -
    • on institutional landing pages, only use when more than 40% of users are impacted
      • -
    -
    • -
  • avoid using alerts just for styling regular content (for emphasis or highlighting)
    • -
- -
-

Which alert to use

-
-
Danger alert (red)
-
Use only if the service is cancelled or if there's a risk to health or safety to Canadians in completing an activity.
-
Warning alert (yellow)
-
Use for delays, closures at certain locations, and other types of service disruptions.
-
Info alert (blue)
-
Use for the length of time an application method takes, changes in wait times on a phone line, messages that there is no service disruption for a particular service if that is generating inquiries.
-
Success alert (green)
-
Use when a service disruption is resolved.
-
-
-

Examples and code

-
-
-

Limited service availability

-

This service is affected by the outbreak of coronavirus (COVID-19).

- Check service status updates

-
-
-
- HTML to code an alert -

Code:

- 
<section class="alert alert-warning">
-	<h3>Limited service availability</h3>
-	<p>This service is affected by the outbreak of coronavirus (COVID-19).</p>
-	<a href="#">Check service status updates</a></p>
-</section>
-

Change the "alert-warning" class to "alert-info", "alert-danger" or "alert-success" based on the type of alert needed.

-
-

Use the Contextual alerts pattern

- -

Additional examples

-

Alert examples on specific page types:

- -
-
-

Alerts that repeat across several pages

-

If you need to add the same alert on many different pages, it may make sense to make a single page that all these alerts can link to.

-

The central page will:

-
    -
  • summarize the change in plain language
    • -
  • explain the impact on the users of affected services
    • -
  • be updated as soon as new information arises
    • -
-

The breadcrumb for this central page should lead to the Government of Canada's main response page for the crisis.

-

How this helps

-
    -
  • prevents scattered crisis and service disruption pages
    • -
  • encourages a coordinated approach within each department and across the Government of Canada
    • -
  • reduces the work required to maintain various alerts and related updates
    • -
-
- - -

Latest changes

-
- - -
-
-
Revised headings to say “service disruption” rather than “crisis”. -

- Added a recommendation to include dates in the alert and use the correct verb tense. -
-
-
- - - -
-
-
-
-
-
-
-
-
-
Report a problem on this page
-
-
-
-
-
-
-
-
-
-
-
-
Date modified:
-
-
-
-
-
- {% include footer-en.html %} - - - - - diff --git a/crisis/_content.html b/crisis/_content.html deleted file mode 100644 index 708b63dbe2..0000000000 --- a/crisis/_content.html +++ /dev/null @@ -1,456 +0,0 @@ ---- ---- - - - - - - - Crisis communications content design checklist - Canada.ca - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Crisis communications content design checklist

- - -
-
- - - -

From: Treasury Board of Canada Secretariat

- - - - - -
-

On this page

- -
- -
- -
-

1. Use a mobile-first style

- -

The majority of visits to crisis pages are from visitors on phones.

- -

A low-prose, mobile-first style makes the content more effective, and takes less time for approvals and translation.

- - - -
-
- -
-

2. Do not duplicate content

- -

If content already exists, link to it.

-

This will avoid outdated content in multiple locations such as:

-
    -
  • current cases
    • -
  • travel advisories
    • -
  • awareness resources
    • -
- - -
- -
- -
-

3. Follow a news-based page structure

-
    -
  1. alerts (when required)
    2. -
  2. directions
    3. -
  3. background / static content -
    4. -
- -

Keep actively changing content (alerts, dates, numbers) separate from static content -

-
-
-
-

4. Add the date and timestamp when information changes

- - -

Use this for alerts, changes in policies or directions, or data in tables -

-
-
-
-

5. Follow guidance for alerts and warnings

- - - -
-
-
-

6. Write information as directions

- - -
    -
  • tell people exactly what to do, directly, simply
    • -
  • use “you” to address the public
    • -
  • use “we” to refer to the Government of Canada
    • -
-
- - -
-
-

7. Use headings as answers

- - - -
- - -
-
-

8. Use bulleted lists

- - -
    -
  • easier to scan for desktop and mobile users -
    • -
  • less demand on translation -
    • -
  • if instructions change, it is faster to update than paragraphs -
    • -
-
- - -
-
-

9. Use bold text sparingly

- - -
    -
  • only use to draw attention to keywords -
    • -
  • the more you use it, the less effective it is -
    • -
-
- - - -
-
-

10. Pull links out of paragraphs

- -

Put links below the text, aligned to the left of the page.

-
- - -
-
-

11. Keep sentences short

- -

If you do use full sentences, keep paragraphs short so they fit on a phone screen. -

-
- - - - -
-
-

12. Words to avoid

- - -
    -
  • "current" - unless content is updated daily with a date stamp -
    • -
  • “in order to” - Use single words like “to” (more examples) - -
    • - -
-
- - -
-
-

13. Keep track of common wording and terms

-

Share this list between all communicators (web, social media, strategic communications)

- -
    -
  • avoid channels saying the same thing differently -
    • -
  • reduce demand on translation
    • - -
-
- - - -
-
-

14. Identify pages with emergency related content

-

Keep track of your content that will change frequently to avoid conflicting messaging

- -
- - - -
-
-

15. Create web content, not documents

- - -
    -
  • web content is more accessible
    • -
  • web content is mobile friendly
    • -
  • usability testing has shown that people look for content on the page they land on and miss important information hidden in documents/publications -
    • - -
-
- - -
-
-

16. Removing content is just as important as publishing it

- -

Outdated content:

-
    -
  • may do harm to users if they follow inaccurate guidance
    • -
  • affects the trustworthiness of the Government of Canada
    • -
- - -

Too much content:

-
    -
  • dilutes key messages and instructions
    • -
  • makes it harder for users to know what they need to do
    • -
- - -
- -
- -
- - -
-
-
-
-
-
Report a problem on this page
-
-
-
- -
-
-
- - -
-
-
Date modified:
-
-
-
- -
-
- - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/events/_Canada-ca-fall-update-2019.html b/events/_Canada-ca-fall-update-2019.html deleted file mode 100644 index 44bc7faa7d..0000000000 --- a/events/_Canada-ca-fall-update-2019.html +++ /dev/null @@ -1,139 +0,0 @@ ---- ---- - - - - - - - Canada.ca fall update: November 29, 2019 - Canada.ca - - - - - - - - - - - - - -
-
- - - - - -
- -

Canada.ca fall update: November 29, 2019

- -
- -
- - - -
- {% include footer-en.html %} - - - - - - diff --git a/events/_Canada-ca-spring-update-2019-questionnaire.html b/events/_Canada-ca-spring-update-2019-questionnaire.html deleted file mode 100644 index d41e164187..0000000000 --- a/events/_Canada-ca-spring-update-2019-questionnaire.html +++ /dev/null @@ -1,138 +0,0 @@ ---- ---- - - - - - - - Canada.ca: Spring 2019 update questionnaire - Canada.ca - - - - - - - - - - - - - -
-
- - - - - -
- -

Canada.ca: Spring 2019 update post-event survey

- -
- -
- - - -
- {% include footer-en.html %} - - - - - - diff --git a/events/_Canada-ca-spring-update-2019.html b/events/_Canada-ca-spring-update-2019.html deleted file mode 100644 index 6931b867a9..0000000000 --- a/events/_Canada-ca-spring-update-2019.html +++ /dev/null @@ -1,134 +0,0 @@ ---- ---- - - - - - - - Canada.ca spring update: June 18, 2019 - Canada.ca - - - - - - - - - - - - - -
-
- - - - - -
- -

Canada.ca spring update: June 18, 2019

- -
- -
- - - -
- {% include footer-en.html %} - - - - - - diff --git a/events/_Canada.ca-Update-Authorization-and-Release.html b/events/_Canada.ca-Update-Authorization-and-Release.html deleted file mode 100644 index c2faa9fc7f..0000000000 --- a/events/_Canada.ca-Update-Authorization-and-Release.html +++ /dev/null @@ -1,56 +0,0 @@ ---- ---- - - - - - - - Authorization and Release - - - - - - - - - - - - - - -
-
- -
-

Authorization and Release

- -
-

- I grant Her majesty the Queen in right of Canada, as represented by the President of Treasury Board of Canada Secretariat (TBS), the right to take, modify, adapt, exhibit, publish, transmit, reproduce, create derivative work from, distribute and otherwise use my name, photograph, video and/or audio recording, likeness, artwork, profile and/or testimonial in any material developed by or on behalf of TBS, including but not limited to current and future publications, Web sites, videos and/or audio recordings for purposes that promotes and supports the mission of the TBS, whether for internal use or public dissemination. -I forever release TBS from any liability from direct, indirect, special, incidental or consequential damages of any kind arising from the use of my name, photograph, video and/or audio recording, likeness, artwork, profile and/or testimonial. -I have read and fully understood the terms and legal effects of this agreement. -

-

-Notice: -Our registration tool uses Surveygizmo, a third-party application. Sign-up is voluntary and subject to the Terms of Use for the Surveygizmo platform. When you sign up, your email address and language preference (English or French) is collected. No other personal information is collected. -The collection and use of your personal information is authorized by the Financial Administration Act. Collection and use of your personal information for this site is in accordance with the federal Privacy Act. Your personal information may be used to respond to your inquiries, if applicable, and to help evaluate the effectiveness of Treasury Board of Canada Secretariat (TBS) programs in responding to client needs. In exceptional circumstances (e.g., individuals who make inappropriate remarks or threats), personal information may be disclosed without your consent pursuant to subsection 8(2) of the Privacy Act. -Any personal information that may be collected is described in the Standard Personal Information Bank entitled Outreach Activities, PSU 938, which can be found in the TBS webpage Information about programs and information holdings. -Any questions, comments, concerns or complaints you may have regarding this Statement, your privacy rights and the Privacy Act may be directed to the TBS Access to Information and Privacy Coordinator by email at ATIP.AIPRP@tbs-sct.gc.ca or by telephone at 1-866-312-1511. You may also wish to contact the Office of the Privacy Commissioner of Canada by email at info@priv.gc.ca or by telephone at 1-800-282-1376. You have the right to complain to the Office of the Privacy Commissioner of Canada about the handling of your personal information by TBS. -

-

Return to registration page



-
- - diff --git a/guidance/_structured-data.html b/guidance/_structured-data.html deleted file mode 100644 index 302416c9b9..0000000000 --- a/guidance/_structured-data.html +++ /dev/null @@ -1,855 +0,0 @@ ---- ---- - - - - - - - Adding structured data on Canada.ca pages - Canada.ca - - - - - - - - - - - - - - - - - - - -
-
-
-

Language selection

-
-
- -
-
-
-
-
- Government of Canada / Gouvernement du Canada -
-
-

Search

- - - -
-
-
- - -
- - - -
- - -

Adding structured data on Canada.ca pages

- - -
-
- - -

Adding structured data to a webpage can help deliver better answers to people.

- -
-

On this page

- -
- -
-

What is structured data

-

Structured data is a way to tag content in a “machine-readable” way.

-

It helps search engines make sense of the page by allowing you to add information that clarifies the meaning of the content.

It should help deliver:

- -
    -
  • better and more informative search results (often in Google and Bing)
    • -
  • better voice search results (for services like Alexa and Google Home)
    • -
- -

Search engines control how search results appear and what gets featured in snippets. Adding structured data may or may not change search results.

- -

Example of a rich snippet

-
-A long description can be found after the image. -
-
-Example of a rich snippet: searching for "covid benefits" -

When searching for "covid benefits" on Google, you may get a rich result that shows different sections that can be expanded to provide specific links. Expanding "For individuals" reveals 5 links:

-
    -
  • Employment Insurance (EI) program
    • -
  • Canada Recovery Benefit (CRB)
    • -
  • Canada Recovery Sickness Benefit (CRSB)
    • -
  • Canada Recovery Caregiving Benefit (CRCB)
    • -
  • All support for individuals
    • -
-

-
- -


- -

Structured data needs to be a “true representation” of the page. You can’t add structured data about content that isn't covered in the page.

- -

Adding structured data is just one of the techniques you can use to optimize your content for search. Improving the actual content of the page should always be the first step you take.

- - - -

How to add structured data

-

Step 1: Choose a schema

-

A structured data schema is a set of field-and-value pairs you can use to add meaning to your page.

-

There are multiple schemas you can choose from.

-

Consult the list of schemas on Schema.org or Google, or look at the examples provided on this page.

- - -

Step 2: Write JSON-LD code

- -

While structured data can be written in RDFa, we suggest using JSON-LD instead. JSON-LD is becoming the preferred structured data language of search engines. It also allows a bit more flexibility, like allowing you to inject HTML in the rich snippets of search results.

- -

JSON-LD exists separate from the actual content. If you update the content, remember to adjust the JSON-LD code accordingly.

- -

Because some elements may already be coded in RDFa in your templates, make sure there is no collision between the two.

- -

Use a validator, such as JSONLint, to make sure your JSON-LD code is valid.

- -

Adding JSON-LD in Adobe Experience Manager (AEM)

-

If your page is published in AEM, you can add structured data in JSON-LD by using the structured data component in the page properties.

-

Follow the instructions in GCPedia (only available on the GC network).

- - - -

Step 3: Test the structured data code

-

You can copy code snippets or full URLs to test your code in the Rich results test.

- -

It shows which rich result types (supported by Google) were found on the page, as well as any errors or suggestions for your structured data

- -

By pasting the URL or the code of the page, you can see if it’s valid, and if the values assigned to different fields are the correct ones.

- -

Step 4: Validate HTML code and check accessibility

-

Before you publish the page with structured data, make sure that the HTML is valid and the page is accessible. You can use online validators to help you with this:

- - - -

Step 5: Publish the page, reindex and monitor

-

Once your structured data is published, Google and Bing should reindex the page within a few days.

- -

Check the status of your code in the Canada.ca Google Search Console.

- -

How to measure the impact of structured data

-

You can measure the impact of structured data by looking at the Google Search console. You can get statistics on how the rich snippet is performing, such as:

- -
    -
  • the proportion of the clicks to a page generated from a rich snippet
    • -
  • the search queries that generate rich snippets
    • -
  • whether the click-through rate is different with a rich snippet
    • -
- -

Adding tracking (UTM) codes to hyperlinks in the rich data can also help you understand when people are clicking the links in the rich snippet.

- - -

Schema code and examples

- -
-

SpecialAnnouncement

 -

When to use

-

The SpecialAnnouncement schema is a new experimental schema developed for announcements related to COVID-19. It's mainly for health related information (symptoms, quarantine, testing, etc.), but also for closures, reopenings, and special government benefits.

- -

Official guidance

- - - -
-
-

Code

-
-
-
- JSON-LD -
    -
  • Add id attribute to the JSON-LD HTML script element named “wb-script”.
    • -
  • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
    • -
- - 
<script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@type":"SpecialAnnouncement",
-  "@id": "#wb-main",
-  "mainEntityOfPage":{
-   "@type":"WebPage",
-   "@id":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html"
-   },
-  "name":"Coronavirus disease (COVID-19): information from the government of Canada",
-  "text":"Coronavirus disease (COVID-19) information for Canadians including links to disease updates, travel advice, how to be prepared, symptoms, prevention, risk, Canada's response, current case numbers, answers to questions and links to printable resources.",
-  "spatialCoverage": {
-   "@type": "Country",
-   "name": "Canada"
-   },
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "category":"https://www.wikidata.org/wiki/Q81068910",
-  "datePosted":"2020-05-09",
-  "diseasePreventionInfo":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "diseaseSpreadStatistics":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection.html",
-  "newsUpdatesAndGuidelines":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html",
-  "quarantineGuidelines":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "travelBans":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/latest-travel-health-advice.html",
-  "governmentBenefitsInfo": {
-   "@type": "GovernmentService",
-   "name": "Canada's COVID-19 Economic Response Plan",
-   "url":  "https://www.canada.ca/en/department-finance/economic-response-plan.html",
-   "provider": {
-    "@id": "#wb-publisher"
-    },
-   "serviceType": "Emergency relief",
-   "audience": {
-   "@type": "Audience",
-   "name": "Canadians affected by COVID-19"
-   }
-  }
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
-
-
- AEM -

Add the code in the Structured data component in the page properties.

- - 
{
-  "@context":"http://schema.org",
-  "@type":"SpecialAnnouncement",
-  "@id": "#wb-main",
-  "mainEntityOfPage":{
-   "@type":"WebPage",
-   "@id":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html"
-   },
-  "name":"Coronavirus disease (COVID-19): information from the government of Canada",
-  "text":"Coronavirus disease (COVID-19) information for Canadians including links to disease updates, travel advice, how to be prepared, symptoms, prevention, risk, Canada's response, current case numbers, answers to questions and links to printable resources.",
-  "spatialCoverage": {
-   "@type": "Country",
-   "name": "Canada"
-   },
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "category":"https://www.wikidata.org/wiki/Q81068910",
-  "datePosted":"2020-05-09",
-  "diseasePreventionInfo":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "diseaseSpreadStatistics":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection.html",
-  "newsUpdatesAndGuidelines":"https://www.canada.ca/en/public-health/services/diseases/coronavirus-disease-covid-19.html",
-  "quarantineGuidelines":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/prevention-risks.html",
-  "travelBans":"https://www.canada.ca/en/public-health/services/diseases/2019-novel-coronavirus-infection/latest-travel-health-advice.html",
-  "governmentBenefitsInfo": {
-   "@type": "GovernmentService",
-   "name": "Canada's COVID-19 Economic Response Plan",
-   "url":  "https://www.canada.ca/en/department-finance/economic-response-plan.html",
-   "provider": {
-    "@id": "#wb-publisher"
-    },
-   "serviceType": "Emergency relief",
-   "audience": {
-   "@type": "Audience",
-   "name": "Canadians affected by COVID-19"
-   }
-  }
- }
-
-
-
-
-
- -
-

FAQPage

 -

When to use

-

Use to add a set of headings and their respective content that provide answers for the key tasks associated with a page.

- -

Use on:

-
    -
  • service initiation pages
    • -
  • guidance documents
    • -
  • actual FAQs
    • -
-

FAQ pages are strongly discouraged on Canada.ca in most cases.

-
  • Avoiding FAQs, with one exception (blog post)
    • - -

    Official guidance

    - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "FAQPage",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "headline": "How much you can get",
-  "description":"Calculate your payments, shared custody and your payments, payments are recalculated in July, Related provincial and territorial benefits, children with a disability, repaying an overpayment",
-  "mainEntity": [{
-   "@type": "Question",
-   "name": "Calculate your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Use the child and family benefits calculator to help plan your budget.</p>
-     <p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/child-family-benefits-calculator.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-001'>  Calculate how much you can get</a></p>
-
-     <p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-002#math'>See the math behind CCB payments</a></p>"
-     }
-	  },
- {
-   "@type": "Question",
-   "name": "Shared custody and your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "
-     <p>Each parent with shared custody will get 50% of what they would have gotten if they had full custody of the child, calculated based on their own adjusted family net income.</li>
-     <p>The CRA will not split the amount using other percentages, or give the full amount to one of the parents if CRA considers you to have shared custody.</li>
-     <p>If a child only lives with you <strong>part time</strong>, go to  <a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q2-001#shared'>Custody arrangements and your benefits</a> to find out if you are considered to have shared custody.</p>"
-    }
-  }]
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -
      -

      Add the code in the Structured data component in the page properties.

      -
    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "FAQPage",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "headline": "How much you can get",
-  "description":"Calculate your payments, shared custody and your payments, payments are recalculated in July, Related provincial and territorial benefits, children with a disability, repaying an overpayment",
-  "mainEntity": [{
-   "@type": "Question",
-   "name": "Calculate your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Use the child and family benefits calculator to help plan your budget.</p><p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/child-family-benefits-calculator.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-001'>  Calculate how much you can get</a></p><p><a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q1-002#math'>See the math behind CCB payments</a></p>"
-     }
-	  },
- {
-   "@type": "Question",
-   "name": "Shared custody and your payments",
-   "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-   "acceptedAnswer": {
-    "@type": "Answer",
-    "url": "https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html",
-    "text": "<p>Each parent with shared custody will get 50% of what they would have gotten if they had full custody of the child, calculated based on their own adjusted family net income.</li><p>The CRA will not split the amount using other percentages, or give the full amount to one of the parents if CRA considers you to have shared custody.</li><p>If a child only lives with you <strong>part time</strong>, go to  <a href='https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html?utm_source=google&utm_medium=organic&utm_campaign=faq-data&utm_content=ccbhowmuch-en-q2-001#shared'>Custody arrangements and your benefits</a> to find out if you are considered to have shared custody.</p>"
-    }
-  }]
- }
    -
    - -
    -
    -
    -
    -
    - -
    -

    HowTo

     -

    When to use

    -

    Use for tasks that require a very clear step-by-step approach.

    - -

    Official guidance

    - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type":"HowTo",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "description":"The Canada child benefit (CCB) is a tax-free monthly payment made to eligible families to help with the cost of raising children under 18 years of age. ",
-  "name":"Canada child benefit",
-  "step":[{
-   "@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_1.svg",
-   "name":"Who can apply",
-   "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html",
-   "Position":1,
-   "text":"Who can get the Canada child benefit, who is primarily responsible for the care and upbringing of the child, and impact of shared custody on your benefits"
-   },
-   {"@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_2.svg",
-   "name":"Apply",
-   "url":"http://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-apply.html",
-   "position":2,
-   "text":"When and how to apply, and when you need to provide additional documents"
-   }
-  ]}
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type":"HowTo",
-  "publisher":{
-   "@type":"GovernmentOrganization",
-   "@id":"#wb-publisher",
-   "name":"Government of Canada",
-   "url":"https://www.canada.ca/en.html"
-   },
-  "description":"The Canada child benefit (CCB) is a tax-free monthly payment made to eligible families to help with the cost of raising children under 18 years of age. ",
-  "name":"Canada child benefit",
-  "step":[{
-   "@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_1.svg",
-   "name":"Who can apply",
-   "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-before-you-apply.html",
-   "Position":1,
-   "text":"Who can get the Canada child benefit, who is primarily responsible for the care and upbringing of the child, and impact of shared custody on your benefits"
-   },
-   {"@type":"HowToStep",
-   "image":"http://test.canada.ca/covid-19-guidance/proto/structured_data/step_2.svg",
-   "name":"Apply",
-   "url":"http://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-apply.html",
-   "position":2,
-   "text":"When and how to apply, and when you need to provide additional documents"
-   }
-  ]}
    -
    - -
    -
    -
    -
    -
    - -
    -

    Speakable

     -

    When to use

    -

    Use to identify any section of content that would be best suitable for text-to-speech: the part of the page that encapsulates the most important content people are looking for on that page.

    - -

    You can use this schema on any page.

    - -

    Official guidance

    - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - 
    <script id="wb-script"
-type="application/ld+json">
- {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "WebPage",
-  "name": "How much Canada Child Benefit you could get",
-  "speakable":{
-   "@type": "SpeakableSpecification","cssSelector": [".speakable1"]
-   },
-  "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html"}
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
-  <p class="speakable1	">The maximum Canada child benefit you could get is $6,639 per year for children under 6, and $5,602 per year for children aged 6 to 17.</p>
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - 
    {
-  "@context":"http://schema.org",
-  "@id": "#wb-main",
-  "@type": "WebPage",
-  "name": "How much Canada Child Benefit you could get",
-  "speakable":{
-   "@type": "SpeakableSpecification","cssSelector": [".speakable1"]
-   },
-  "url":"https://www.canada.ca/en/revenue-agency/services/child-family-benefits/canada-child-benefit-overview/canada-child-benefit-we-calculate-your-ccb.html"}
    -
    -
    -
    -
    -
    - - -
    -

    Event

     -

    When to use

    -

    Use for events.

    - -

    Official guidance

    - - - -
    -
    -

    Code

    -
    -
    -
    - JSON-LD -
      -
    • Add id attribute to the JSON-LD HTML script element named “wb-script”.
      • -
    • Use the same JSON-LD root id anchor as the one for the main content of the page. Both will use “#wb-main” to specify semantically they are describing the same subject.
      • -
    - - 
    <script
-type="application/ld+json">
- {
-  "@context": "http://schema.org",
-  "@type": "Event",
-  "name": "Great event under the sun",
-	"@id": "#wb-main",
-  "startDate": "2020-07-15",
-  "location": {
-   "@type": "Place",
-   "name": "Parliament Hill",
-    "address": {
-    "@type": "PostalAddress",
-    "addressLocality": "Ottawa",
-    "addressRegion": "ON",
-    "postalCode": "K1A 0A9",
-    "streetAddress": "Wellington Street"
-    }
-   },
-  "image": "./canada-day.jpg",
-  "description": "Celebrating the sun in the nation's capital."
- }
-</script>
-<body vocab="http://schema.org/" typeof="WebPage">
- <div typeof="Organisation" resource="#wb-publisher">
-  <img src="/link/to/a/logo" alt="Publisher name" property="logo" />
-  <meta property="name" content="Publisher name" />
- </div>
- <main property="mainContentOfPage" typeof="WebPageElement" resource="#wb-main">
- </main>
-</body>
    -
    -
    - AEM -

    Add the code in the Structured data component in the page properties.

    - - 
    {
-"@context": "http://schema.org",
-"@type": "Event",
-"name": "Great event under the sun",
-"@id": "#wb-main",
-"startDate": "2020-07-15",
-"location": {
-"@type": "Place",
-"name": "Parliament Hill",
-"address": {
-"@type": "PostalAddress",
-"addressLocality": "Ottawa",
-"addressRegion": "ON",
-"postalCode": "K1A 0A9",
-"streetAddress": "Wellington Street"
-}
-},
-"image": "./canada-day.jpg",
-"description": "Celebrating the sun in the nation's capital."
-}
    -
    - -
    -
    -
    -
    -
    - -

    Additional resources

    - - - -
    - -
    - - -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    - -
    -
    -
    - - -
    -
    -
    Date modified:
    -
    -
    -
    - -
    -
    - - - - - - - - - - {% include footer-en.html %} - - - - - - - - - - - diff --git a/layout/_contact-aside-demo.html b/layout/_contact-aside-demo.html deleted file mode 100644 index d815c64e63..0000000000 --- a/layout/_contact-aside-demo.html +++ /dev/null @@ -1,409 +0,0 @@ ---- ---- - - - - - - Contact aside - Demo and code - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Demo and code

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -
    -
    - - - - - -
    - - - -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - - - -
    - - - - - - - - -
    - - - - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Latest changes

    -
    -
    Version x.x:
    -
    .
    -
    -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/layout/_contact-aside-rationale.html b/layout/_contact-aside-rationale.html deleted file mode 100644 index 2cb3878ba3..0000000000 --- a/layout/_contact-aside-rationale.html +++ /dev/null @@ -1,219 +0,0 @@ ---- ---- - - - - - - Contact aside - Rationale - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Rationale

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    Rationale, research and accessibility

    -
    - Layout choices -
      -
    • Redirecting users to primary self-service option first - online
      • -
    • Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
      • -
    • Using an interactive pattern to bring attention to what needs to be prepared before calling/
      • -
    -
    -
    -

    Accessible use

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_contact-aside.html b/layout/_contact-aside.html deleted file mode 100644 index 96298ffbbb..0000000000 --- a/layout/_contact-aside.html +++ /dev/null @@ -1,234 +0,0 @@ ---- ---- - - - - - - Contact aside - Design guidelines - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Contact aside: Design guidelines

    -
    -
    -

    Consistent layout to concisely show links to contact pages or simple contact information as an aside.

    -
    -
    -
    -
      -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    On this page

    - -
    -
    -

    Design specifications

    -
    -
    -
    - Contact information block. -
    -
    -
    -
      -
    • -
      - 1. Link -

      The hyperlink text must clearly describe, in context, what the person will find on the destination page.

      -
      -
      • -
    • -
      - 2. Description -

      Use action verbs, or simply list keywords to summarize of the information or tasks that can be accomplished on the page it links to.

      -
      -
      • -
    -
    -
    -
    -
    -

    Usage

    -

    Link and description (doormats) area used in this pattern:

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_service-contact-demo.html b/layout/_service-contact-demo.html deleted file mode 100644 index 4911b1fc2b..0000000000 --- a/layout/_service-contact-demo.html +++ /dev/null @@ -1,409 +0,0 @@ ---- ---- - - - - - - Service contact - Demo and code - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Demo and code

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -
    -
    - - - - - -
    - - - -
    -
    -
    -
    -
    -
    - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    -
    - - - -
    - - - - - - - - -
    - - - - - -
    -
    -
    -
    - - -
    -
    -
    -
    -
    -

    Latest changes

    -
    -
    Version x.x:
    -
    .
    -
    -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - - - diff --git a/layout/_service-contact-rationale.html b/layout/_service-contact-rationale.html deleted file mode 100644 index 7ccc6cf26a..0000000000 --- a/layout/_service-contact-rationale.html +++ /dev/null @@ -1,219 +0,0 @@ ---- ---- - - - - - - Service contact - Rationale - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Rationale

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      - -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    Rationale, research and accessibility

    -
    - Layout choices -
      -
    • Redirecting users to primary self-service option first - online
      • -
    • Forcing choices (use of expand collapse for secondary options, smart question for audiences and url parameters) - make sure they get the right number
      • -
    • Using an interactive pattern to bring attention to what needs to be prepared before calling/
      • -
    -
    -
    -

    Accessible use

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/_service-contact.html b/layout/_service-contact.html deleted file mode 100644 index 60c0f31189..0000000000 --- a/layout/_service-contact.html +++ /dev/null @@ -1,234 +0,0 @@ ---- ---- - - - - - - Service contact - Design guidelines - Layouts - Canada.ca - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    - -
    -

    Service contact: Design guidelines

    -
    -
    -

    Consistent layout for service contact, including online sign in alternative.

    -
    -
    -
    -
      -
    • Version: x.x
      • -
    • Updated: Jan 10, 2020
      • -
    -
    -
    -
    -
    - Design guidelines - Demo and code - Rationale -
    -
    -
    -
    -

    On this page

    - -
    -
    -

    Design specifications

    -
    -
    -
    - Contact information block. -
    -
    -
    -
      -
    • -
      - 1. Link -

      The hyperlink text must clearly describe, in context, what the person will find on the destination page.

      -
      -
      • -
    • -
      - 2. Description -

      Use action verbs, or simply list keywords to summarize of the information or tasks that can be accomplished on the page it links to.

      -
      -
      • -
    -
    -
    -
    -
    -

    Usage

    -

    Link and description (doormats) area used in this pattern:

    - -
    -
    -

    Discussion

    -
    -
    -

    Report an issue in github

    -

    Join the conversation on slack

    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Report a problem on this page
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    -
    Date modified:
    -
    -
    -
    -
    -
    - {% include footer-en.html %} - - - - - - diff --git a/layout/demos/contact-aside/wet4/_link-list.html b/layout/demos/contact-aside/wet4/_link-list.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_mail-only.html b/layout/demos/contact-aside/wet4/_mail-only.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_phone-mail.html b/layout/demos/contact-aside/wet4/_phone-mail.html deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/layout/demos/contact-aside/wet4/_phone-only.html b/layout/demos/contact-aside/wet4/_phone-only.html deleted file mode 100644 index a3ba7cce77..0000000000 --- a/layout/demos/contact-aside/wet4/_phone-only.html +++ /dev/null @@ -1,119 +0,0 @@ ---- ---- - - - - - - - Contact – phone only example - Canada.ca Design System - - - - - - - - - - - -
    - -
    -
    Before you call
    -
    -

    To verify your identity, you'll need your:

    -
      -
    • - - -
      • -
    • - - -
      • -
    • - - -
      • -
    -

    - - -

    -
    -
    Phone number
    -

    1-800-xxx-xxxx

    Outside Canada and the US*:
    1-613-xxx-xxxx

    -
    Hours
    -
    (in local time) - - - - - - - - - - - - - - - - - - - - - -
    DayHours
    Mon-Fri9 am to 9 pm
    Sat9 am to 5 pm
    SunClosed
    -
    - Wait times and holidays -
    - - - - - - - - - - - - - - - - - - - - - - - - - -
    DayWait times
    Mon-TueLong wait times
    WedMedium wait times
    Thu-SatShort wait times
    SunClosed
    -
    -

    Holiday closures 2019:

    -
      -
    • April 19 (Good Friday)
      • -
    • April 22 (Easter Monday)
      • -
    • May 20 (Victoria Day)
      • -
    • (etc.)
      • -
    -
    - *When calling outside of Canada lines operate in Eastern time -
    -
    - -
    - - - \ No newline at end of file diff --git a/layout/demos/service-contact/wet4/_multi-channel-audience.html b/layout/demos/service-contact/wet4/_multi-channel-audience.html deleted file mode 100644 index 912c9f6f19..0000000000 --- a/layout/demos/service-contact/wet4/_multi-channel-audience.html +++ /dev/null @@ -1,322 +0,0 @@ ---- ---- - - - - - - - Contact – phone only example - Canada.ca Design System - - - - - - - - - - - -
    - -
    - What type of address do you need to change? -
      -
    • - - -
      • -
    • - - -
      • -
    -
    - - - -
    - - - - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_analytics.html b/survey/_analytics.html deleted file mode 100644 index 143419537e..0000000000 --- a/survey/_analytics.html +++ /dev/null @@ -1,341 +0,0 @@ ---- ---- - - - - - - Web analytics, surveys, and user feedback - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Canada.ca analytics, surveys, and user feedback

    - - - - - - - -
    - - - -

    Every day, over a million visitors come to Canada.ca to get information and access government services. Use the data from these tools to see how people are interacting with the Government of Canada online. - -

    - - -

    Web analytics

    -

    Quantitative data tells us what people are doing on the site

    -
    - - - -
    - -
    -
    -

    Page analytics tool

    -

    Get analytics data for any Canada.ca web page.

    -
    -
    - -
    -
    -

    Recent activity on Canada.ca

    -

    Web traffic and top viewed content on Canada.ca for the last 30 days.

    -
    -
    - -
    -
    -

    Canada.ca analytics open dataset

    -

    Access monthly Canada.ca usage data for the past 36 months.

    -
    -
    - -
    -
    -

    Top tasks for Canada.ca

    -

    The 100 most in-demand tasks across the Government of Canada.

    -
    -
    - - -
    - - -

    Surveys and user feedback

    -

    Quantitative and qualitative data helps us understand the Canada.ca user experience

    -
    - - - -
    - -
    -
    -

    GC Task Success Survey

    -

    Web exit survey measuring the experience of completing tasks on Canada.ca

    -
    -
    - -
    -
    -

    Page feedback tool

    -

    Uncover page-level issues affecting task performance

    -
    -
    - - - - -
    - - - - - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_clusters.html b/survey/_clusters.html deleted file mode 100644 index 538973cc81..0000000000 --- a/survey/_clusters.html +++ /dev/null @@ -1,784 +0,0 @@ ---- ---- - - - - - - Choosing and writing tasks for the GC Task Success Survey - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Clustering content test

    - - -

    - On this page -

    - - - -

    - Latest quarterly results -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    Date rangeQ2: July 1 to September 30, 2022
    - -

    Previous results available on GCPedia

    Responses100 visitors surveyed
    Task completionInsufficient data - - - - -
    -
    -

    Insufficient data

    -
    -
    -

    The number of responses is too low to perform an analysis.

    -

    You can review responses from a larger timeframe using Adobe Analytics or by downloading raw data from the Feedback viewer.

    -

    Contact Principal Publisher to discuss how to gather additional data.

    -
    -
    -
    Ease55.1% of respondents said it was “easy” or “very easy” to do what they needed to do online
    Satisfaction44.1% of respondents were “satisfied” or “very satisfied” with their experience on the website
    Margin of errorThe margin of error for these results is 15%. Note that the margin of error displayed is the average of the margins of error for the three scores (task completion, ease and satisfaction) for ease of understanding.
    Data reliability

    The margin of error is considered to be very high (above 10%). There is insufficient data to draw conclusions.

    - - -
    -
    - - -

    Rest of the page content here....

    - - -

    Automated analysis of latest quarterly comments

    - -

    Experimental

    - -

    This experiment uses machine learning to automatically group similar comments - giving you a glimpse into potential issues.

    - -

    - - How we're using data science to group comments -

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Task nameCheck your application status
    Number of comments15,738 comments analyzed
    Comment groups11 comment groups identified
    - - -
    -
    -

    Grouping comments using data science

    -
    -
    - About machine learning algorithm... -
    -
    - - -
    - - -Download CSV of all comments - -
    - - - - - -

    Examples of comments

    - - - - -
      - -
    • -
      - - Group 1 | 25% of comments | account, logging in, status - - -

      This group includes 450 comments (25% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - -
    • -
      - - Group 2 | 20% of comments | GCKey, logging in, redirect - - -

      This group includes 400 comments (20% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - -
    • -
      - - Group 3 | 10% of comments | error 403, logging in, expired - - -

      This group includes 350 comments (10% of all feedback) for this task.

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      - - Comment examples - -
      - - Error 403 kept showing whenever i try to login - -
      - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
      -
      -
      • - - - -
    - - - - - - - -

    Automated comment analysis

    - - - -

    This experiment uses machine learning to automatically group similar comments - giving you a glimpse into potential issues.

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Task nameCheck your application status
    Number of comments12 comments
    Comment groupsInsufficient data to perform grouping
    - Contact Principal Publisher to improve your survey data
    - - - - - -

    Examples of comments

    -
    - - Ungrouped | 12 comments - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - - Comment - -
    - - Error 403 kept showing whenever i try to login - -
    - - Error 403 keeps happening when I tried to log into my account. After 4-5 times keeping trying again, I finally logged in but when I was linking an application, the error happened one more time. It's really frustrating. - -
    - -
    -

    - - -Download CSV of all comments -

    - - -

    - Download all responses and comments -

    - -

    If you find the automated analysis is not accurate or you would prefer to do your own analysis, you can download raw survey data using the Feedback Viewer.

    - - - - -Download CSV of all comments - - - - - - - - - - - - - - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_take-action.html b/survey/_take-action.html deleted file mode 100644 index 342d20c5f5..0000000000 --- a/survey/_take-action.html +++ /dev/null @@ -1,344 +0,0 @@ ---- ---- - - - - - - Making evidence-based decisions - Canada.ca - - - - - - - - - - - - - - - -
    -
    -
    -

    Language selection

    -
    -
    - -
    -
    -
    -
    -
    - Government of Canada / Gouvernement du Canada -
    -
    -

    Search

    - -
    -
    -
    - - -
    -
    - - - -

    Making evidence-based decisions

    - - -
    - -
    -
    - -
    -
    - - - -

    On this page

    - - - -

    Share your results and insights

    - - -

    Through your quantitative and qualitative analysis, you want to help people understand:

    -
      -
    • context (volume, key dates, trends, why (you think) something is happening)
      • -
    • the issues people are reporting
      • -
    • possible paths to action or where additional data and research is needed
      • -
    • before and after results from iterative improvements
      • -
    - - -

    Corroborate insights with other data sources

    -

    Incorporating other data points helps build a holistic understanding of task performance.

    - -
    - - Call centres and social media -

    Are people calling or emailing for help on the same issues?

    - -

    Contact your social media team to check if they are seeing similar questions.

    - -
    - - -
    - Web analytics and search trends - -

    These are some common questions you may want to answer to understand how people are using pages related to your tasks:

    -
      -
    • What pages of the task are most visited? -
    • What paths did people follow to complete the task?
      • -
    • Where are they exiting the site / dropping out?
      • -
    • What is the bounce rate?
      • -
    • How much traffic comes directly from search engines? What terms do people use?
      • -
    • Are the majority of users using a mobile device?
      • -
    - - -

    Contact your institutional analytics representative (internal only) to get help with linking survey data to web analytics data

    -

    Read the user guide to learn how to analyze survey data in Adobe Analytics (internal only). -

    -
    - -
    - - - Usability studies and research -

    Contact your usability specialist to check for usability studies or research on the topic.

    - - -
    - - - - -
    - - -
    -
    -
    -
    -
    - - - - - - - -
    -
    -
    -

    Did you find what you were looking for?

    -
    -
    - - -
    -
    -
    - -
    -
    - What was wrong? -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    - -

    - You will not receive a reply. Telephone numbers and email addresses will be - removed. -
    - Maximum 300 characters -

    - - -
    -
    -
    -

    Thank you for your feedback

    -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    - -
    -
    Date modified:
    -
    -
    -
    - -
    - {% include footer-en.html %} - - - - - - - diff --git a/survey/_tasks-covid.html b/survey/_tasks-covid.html deleted file mode 100644 index 7132103599..0000000000 --- a/survey/_tasks-covid.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/survey/_tasks-cra.html b/survey/_tasks-cra.html deleted file mode 100644 index 54952c2ede..0000000000 --- a/survey/_tasks-cra.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - - diff --git a/survey/_tasks.html b/survey/_tasks.html deleted file mode 100644 index 3536bed93e..0000000000 --- a/survey/_tasks.html +++ /dev/null @@ -1,208 +0,0 @@ ---- ---- - - - - - - - Task completion survey - Canada.ca - - - - - - - - - - - - - -
    -
    - - - - - -
    - -

    Task completion survey

    - -
    - -
    - -
    -
    - - -
    - {% include footer-en.html %} - - - - - -