Social media channels: Canada.ca design
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
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: