Contact information design pattern: Canada.ca design system

When to use this pattern

• Present contact information consistently in a variety of contexts
• Provide access to multiple contact options.

How to use this pattern

• The heading is “Contact us”
• Do not add borders to this block
  • the aim is to reduce visual noise and avoid “banner blindness” (where people automatically interpret content in boxes as ads)

• For the contact address pattern:
  • when street or mailing address information is available, place it first, followed by other contact channels
  • follow the Canada.ca Content Style Guide when writing text for this block
  • label telephone, email, TTY, etc., numbers appropriately, for example “Telephone:” for a telephone number
  • where possible, the email link must point to a web form rather than presenting a mailto link

• 4.10 Addresses

  Content Style Guide

  4.10 Addresses

  Mailing addresses

  • Abbreviate street types, street direction and province or territory
  • Use the correct abbreviations for provinces and territories
  • Insert 2 spaces between the province or territory abbreviation and the postal code
  • Use uppercase to write the letters in the postal code
  • Don't use punctuation except for a hyphen between the unit designator and the civic number

  [Organization name or person name]
  [Additional delivery information]
  [Suite or office]-[Civic number] [Street name] [Abbreviated street type] [Abbreviated street direction]
  [City] [Two-letter province or territory abbreviation] [Postal code]

  Example of a mailing address.

  Integrity Regime
  Departmental Oversight Branch
  Public Services and Procurement Canada
  Portage III Tower A 10A1
  105-11 Laurier St
  Gatineau QC  K1A 0S5

  Email addresses

  Spell out email addresses instead of embedding them within your text.

  Write:

  • Please submit your request by email to abcxyz@canada.ca.
  • Please submit your request by email: abcxyz@canada.ca.

  Instead of: Email us to submit a request.

  See how this rule applies in French

  • 4.10 Addresses

• For the contact links pattern:
  • use standard link styles
  • use bullets, not numbered lists
  • links point to contact pages (see the Contact us templates section)