About the institution: Canada.ca design system

On this page

• When to use
• What to avoid
• Content and design
• How to implement
• Research and rationale
• Latest changes

When to use

About the institution is a mandatory pattern on an institutional landing page. It must include mandate and transparency links.

What to avoid

Don’t use icons or images (only include links).

Content and design

Find content and design specifications and visual examples.

Content specifications

The heading is “About” followed by the name of the institution.

The heading appears above the links on all screen sizes.

Mandatory links:

• Mandate
• Transparency
• Accessibility

Optional links:

• Recommended:
  • Programs
  • Consultations
  • Organizational structure
  • Reports
  • Job opportunities
  • More: About the [Institution]
    • only if you have a general “About” page for your institution
  • Other links can include any content that falls under corporate information or program and policy development content types
    • Corporate information
    • Program and policy development

Organize the links in an unstyled list.

Recommended maximum of 10 links.

Design specifications

• Heading:
  • Uses standard Canada.ca styles:
    • Typography
    • Colours
    • Heading is coded as an H2 but styled as an H3
• List links:
• Uses standard Canada.ca styles:
  • Typography
  • Colours
• Line-height of link: 1.65em
• The list of links appears in:
  • 2 columns on large screens
  • 1 column on small screens

Visual examples

Image description: about the institution - large screen

About the institution links appear in a section with the heading “About the [Institution]”. The links appear in a bulleted list that spans across two columns. The first column has:

• Mandate
• Organizational structure
• Transparency
• Accessibility
• Job opportunities

The second column has:

• Reports
• Compliance
• Enforcements notifications
• [Institutional link]
• More: About the [institution]

Image description: about the institution - small screen

About the institution links appear in a section with the heading “About the [Institution]”. The design organizes links in a bulleted list:

• Mandate
• Organizational structure
• Transparency
• Accessibility
• Job opportunities
• Reports
• Compliance
• Enforcements notifications
• [Institutional link]
• More: About the [institution]

How to implement

Find working examples and code for implementing the about the institution pattern.

GCweb (WET) theme implementation reference

The implementation reference includes how to configure elements of the design system.

• GCWeb (WET) About the institution
• GCWeb (WET) Institutional landing page
• Quick implementation guide - GCWeb theme

Implementations

Determine what best suits the type of page you're creating.

Research and rationale

Consult resarch findings and policy rationale.

Research findings

Research shows that this section isn’t what most people are looking for when they reach an institutional landing page. Therefore, this pattern appears near the bottom of the page so it doesn’t interfere with more important tasks.

Policy rationale

The about the institution pattern is required in the following mandatory templates:

• Institutional landing page

Latest changes

2024-04-03

Added about the institution guidance to support updates to the institutional landing page template