Institutional landing page: Canada.ca design system

At the top of the page is an introduction block which includes an h1 titled [Institution name]. It is underlined with a short thick red line. Below the heading is a short description of the institution’s mandate.

Following the introduction block there is a supertask button which is a green rectangle with the words Supertask button [optional].

Below this is the featured link pattern. It is contained within a horizontal blue band that stretches the entire length of the screen. Within the band is white, underlined text that reads: Featured link [optional].

The next item on the page is the most requested pattern. It is contained within a light grey band that stretches the entire length of the screen. Within the band are the words Most requested in black text. This is followed by two columns of links. Each column contains three links in a bulleted list. The placeholder text for each link is [Top task hyperlink].

Below this is the services and information pattern. It is composed of nine separate doormats displayed across three columns and three rows. Each doormat has a linked placeholder heading that says [Hyperlink text]. Below the heading there is a placeholder description which contains the following instructions: Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.

The next item on the page is the contact us pattern. It consists of a horizontal light grey band with a Contact us heading followed by three links in a single row. The first link is Contact [Institution], the following links are placeholders for top contact tasks.

The contact us band is followed by the about the institution pattern on the left and the social media channels pattern on the right. The about the institution links appear in a section with the heading “About the [Institution]”. The design organizes bolded links 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] (Note: “more” is not linked)

The social media channels pattern begins 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

The next item that appears on the page is the minister or institutional head pattern. The pattern appears in 2 columns with the heading “Minister(s)”.

The first column presents a placeholder for an institutional head’s image on the left. The dimensions for the image are 200px x 250px. Information on the right includes:

• The Honourable [Minister name] (link)
• [Official title] (text)
• List item: Mandate letter [optional] (link)
• List item: Briefing book [optional] (link)

The second column presents a placeholder for an institutional head’s image on the left. The dimensions for the image are 200px x 250px. Information on the right includes:

• The Honourable [Minister name] (link)
• [Official title] (text)
• List item: Mandate letter [optional - single item] (link)

Below this pattern is the latest news pattern on the left and context-specific features pattern on the right. The latest news pattern has a heading that reads “News” followed by three groupings of text. Each grouping has bold, linked placeholder text that reads [News title] followed by placeholder text for the date on a new line. The date format displayed is YYYY-MM-DD HH:MM. After the three groupings of text there is another line of text that reads “More: [Institution] news”. The words “[Institution] news” are linked.

The context-specific features pattern is composed of a heading titled “Features” followed by two feature placeholders in a horizontal row. Each have an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder link that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the feature being promoted.

At the top of the page is an introduction block which includes an h1 titled [Institution name]. It is underlined with a short thick red line. Below the heading is a short description of the institution’s mandate.

Following the introduction block there is a supertask button which is a green rectangle with the words Supertask button [optional].

Below this is the featured link pattern. It is contained within a horizontal blue band that stretches the entire length of the screen. Within the band is white, underlined text that reads: Featured link [optional].

The next item on the page is the most requested pattern. It is contained within a light grey band that stretches the entire length of the screen. Within the band are the words Most requested in black text. This is followed by a single list of links in a bulleted list. The placeholder text for each link is [Top task hyperlink].

Below this is the services and information pattern. It is composed of nine separate doormats that are vertically stacked on each other. Each doormat has linked placeholder headings that say [Hyperlink text]. Below the headings there are placeholder descriptions which contain the following instructions: Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.

The next item on the page is the contact us pattern. It is contained within a light grey band that stretches the entire length of the screen. There is a “Contact us” heading followed by three links in a vertical row. The first link is Contact [Institution], the following links are placeholders for top contact tasks.

The contact us band is followed by the about the institution pattern. It consists of a heading “About the [Institution]”. Followed by nine bolded links:

• Mandate
• Organizational structure
• Transparency
• Accessibility
• Reports
• Compliance
• Enforcements notifications
• [Institutional link]
• More: About the [institution] (Note: “more” is not linked)

Below the about the institution pattern is the social media channels pattern. It begins 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

The next item that appears on the page is the Minister or institutional head pattern. The pattern begins with the heading “Minister(s)” and is followed by two items.

The first item begins with a linked heading “The Honourable [Minister name]” followed by an image placeholder with the prescribed dimensions of 200px x 250px. Below the image is the text [Official title]. This is followed by a bulleted list with the following two linked items:

• Mandate letter [optional] (link)
• Briefing book [optional] (link)

The second item begins with a linked heading “The Honourable [Minister name] followed by an image placeholder with the prescribed dimensions of 200px x 250px. Below the image is the text [Official title]. This is followed by the following linked item:

• List item: Mandate letter [optional - single item] (link)

Below this pattern is the latest news pattern. It has a heading that reads “News” followed by three groupings of text. Each grouping has bold, linked placeholder text that reads [News title] followed by placeholder text for the date on a new line. The date format displayed is YYYY-MM-DD HH:MM. After the three groupings of text there is another line of text that reads “More: [Institution] news”. The words “[Institution] news” are linked.

The next item on the page is the context-specific features pattern. It is composed of a heading titled “Features” followed by two items. Each item has an image placeholder surrounded by a light grey background. Within the image placeholder are the prescribed image dimensions: 360px x 203px. Below each image placeholder on the grey background is a placeholder link that reads [Feature hyperlink text]. Underneath is the following placeholder text: Brief description of the feature being promoted.