Social media channels: Canada.ca design system
Last updated: 2024-04-03
The social media channels pattern provides links to official Government of Canada (GC) social media accounts.
On this page
When to use
Use the social media channels pattern on pages to promote official GC social media accounts that are relevant to the page.
Examples:
- Institutional landing page
- Blog
- Topic page
What to avoid
Don’t use the social media channels pattern when a user’s flow must not be interrupted, such as in a transactional process.
Content and design
Find content and design specifications and visual examples.
Content specifications
The social media channels pattern is made up of the heading “On social media” and icons linking to official GC social media accounts.
Accounts referred to in the pattern must be fully compliant with the Directive on the Management of Communications.
Display a maximum of 7 icons aligned in a vertical column or horizontal row:
- Vertical display includes a label next to each icon
- Horizontal display only includes the icons
If there is more than one account from a platform:
- Include the platform name next to its icon (vertical only)
-
Use a lightbox modal to display the name of each different account on that platform
- the lightbox can have up to 8 text links
- use the names of the accounts as labels
Place the social media channels after task and navigation content.
Design specifications
-
Lightbox design specifications
- Modal header background colour: #2e5274
- Header: H2, Lato, styled as font size: 1.15em
-
Links:
- Font: Noto Sans, 16px, standard link colours
- Button is styled as a primary button.
The following social media link classes and associated icons are available.
| Social media platform | CSS class | Link to SVG file (GitHub) |
|---|---|---|
 |
||
| X |  |
|
| YouTube | youtube |
 |
 |
||
 |
Contact the Digital Transformation Office (DTO) if you want to include a platform that is not represented here.
Visual examples
Image description: social media channels (vertical view with labels) - large screen
Social media channel links appear in a section with the heading “On social media”. Below the heading is a vertical list with associated icons and labels:
- Facebook icon followed by the placeholder text FacebookPageName
- X icon followed by the placeholder text @XAccount
- Youtube icon followed by the placeholder text YouTubeName
- Instagram icon followed by the placeholder text InstagramName
- LinkedIn icon followed by the placeholder text LinkedInName
Image description: social media channels (horizontal view) - large screen
Social media channel links appear in a section with the heading “On social media”. Below the heading is a horizontal list with associated icons, but without labels:
- X
- Youtube
Image description: social media channels (vertical view with labels) - small screen
Social media channel links appear in a section with the heading “On social media”. Below the heading is a vertical list with associated icons and labels:
- Facebook icon followed by the placeholder text FacebookPageName
- X icon followed by the placeholder text @XAccount
- Youtube icon followed by the placeholder text YouTubeName
- Instagram icon followed by the placeholder text InstagramName
- LinkedIn icon followed by the placeholder text LinkedInName
Image description: social media lightbox modal for multiple accounts
An overlay lightbox for displaying multiple Facebook accounts. There is a header indicating which social media platform, below there are two links titled [First Facebook account title] and [Second Facebook account title]. The lightbox has a close button and an X in the corner to exit the modal.
How to implement
Find working examples and code for implementing the contact us band pattern.
GCweb (WET) theme implementation reference
The implementation reference includes how to configure elements of the design system.
Implementations
Determine what best suits the type of page you're creating.
GC-AEM
For the Government of Canada Adobe Experience Manager (AEM):
Research and rationale
Consult the policy rationale.
Policy rationale
The content within the social media channels section must follow the Directive on the Management of Communications.
This is an optional pattern for the following mandatory templates:
Latest changes
- Updated the guidance to include content and design specifications, visual examples and implementation guidance.
Page details
- Date modified: