Social media channels: Canada.ca design
Last updated: 2024-09-24
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 5 icons aligned in a vertical column or horizontal row:
- Vertical display includes a label next to each icon
- Horizontal display only includes the icons
Optional link
You can add a link with the label “More ways to connect” if you want to link to additional social media accounts or other departmental communications platforms (ie. podcasts, external magazine, etc.). The link should point to a page that lists all your social media accounts and additional ways to connect with/follow the department.
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
- Button is styled as a primary button.
-
Links:
- Font: Noto Sans, 17px, standard link colours
- “More ways to connect” link:
- Font: Noto Sans, 17px, standard link colours
- Aligned to the left
- Positioned under the list of icons
The following social media link classes and associated icons are available.
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 and more ways to connect link) - 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
Below the icons is a link with the label: More ways to connect
Image description: social media channels (horizontal view with more ways to connect link) - small 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:
- Facebook icon
- X icon
- Youtube icon
- Instagram icon
- LinkedIn icon
Below the icons is a link with the label: More ways to connect
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 pattern to add an optional “More ways to connect” link.
- Updated the guidance to include content and design specifications, visual examples and implementation guidance.
Page details
- Date modified: