Share this page: Canada.ca design system

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

Text version

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

Text version

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