Language selection

Search


Social media channels design pattern: Canada.ca design system

The social media channels block (“follow box”) is an in-page component that allows people to follow official Government of Canada social media accounts from various social media platforms.

When to use this pattern

  • Use the follow box on pages where official GC social media accounts are relevant to the current context
  • Do not use this component when a person’s flow must not be interrupted, as in a transactional process
  • Do not duplicate content from other promotional components on the page

How to use this pattern

  • The social media channels follow box is made up of the heading “Follow” and icons linking to official GC social media accounts or RSS feeds that are relevant to the page
  • Accounts referred to in the follow box must be fully compliant with the Directive on the Management of Communications
  • Display a maximum of 7 icons aligned in a horizontal row, using the standard icon set available in the Canada.ca WET theme
  • Use only one icon per social media platform; if there is more than one account from a single platform
    • make them available via a clickable drop-down menu
    • populate the drop-down menu with up to 8 text links, using the names of the accounts as labels
    • if more than 8 links are required, include a “view all” link as the final item in the list; this link must point to the relevant section of the Canada.ca social media gallery, where all relevant accounts will be listed
  • Position the follow box so that it does not interfere with the primary content of the page
  • Emphasize the box shape of this component by using a background colour that is darker than the surrounding page area’s background colour
  • Use the defined presentation classes included in the Canada.ca WET theme

Working example

Example

Social media channels block (follow box) pattern
Screenshot illustrating the social media channels block (follow box) pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Page details

Date modified: