Share this page - Canada.ca design pattern
The Share this page component is intended to allow people to share the content of the page to other users.
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
- Date modified: