Layout and design specifications for small device screens (Technical specifications for the Web and mobile presence)

The specifications for small device screens are applied when:

  • the screen (media query device-width) is less than 768 pixels wide; or
  • the viewport (media query width) is less than 768 pixels wide.

1. Content pages/screens

Content page/screen showing all elements described in Section 1. Content pages/screens.

Each content page/screen contains the Government of Canada navigation bar, the site/application title, the page/screen title and a body.

Dimensions:

  • Width: 100% (full width of the viewport).

1.1. Government of Canada navigation bar

The Government of Canada navigation bar contains the Canada Wordmark and home, back, menu, search and settings buttons.

Location:

  • Aligned vertically with the top edge of the page/screen.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.

1.1.1. Canada Wordmark

Location:

  • Aligned horizontally with the left edge of the Government of Canada navigation bar.
  • Centred vertically.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • White flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Image: wmms.

1.1.2. Home button

Content page/screen with the home button omitted as described in the exceptions for Section 1.1.2. Home button.

Location:

  • When the menu button is present: Aligned horizontally with the left edge of the menu button.
  • When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
  • When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: House (House icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Home".

Behaviour:

  • Activating the home button returns the user to the home page/screen.

Exceptions:

The home button is omitted when:

  • The page/screen is the home page/screen.
  • The back button is present.
  • Activating the home button is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application does not have a home page/screen.
  • The site/application is a single-page/screen site/application.

1.1.3. Back button

Content page/screen with the home button replaced with a back button as described in Section 1.1.3. Back button.

Location:

  • When the menu button is present: Aligned horizontally with the left edge of the menu button.
  • When the menu button is omitted and the search button is present: Aligned horizontally with the left edge of the search button.
  • When both the menu button and the search button are omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button return the user to the previously-viewed page/screen.

Exceptions:

The back button is omitted when:

  • There is no previously-viewed page/screen.
  • The home button is present.
  • Activating the back button is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application is a single-page/screen site/application.

1.1.4. Menu button

Content page/screen with the menu button omitted as described in the exceptions for Section 1.1.4. Menu button.

Location:

  • When the search button is present: Aligned horizontally with the left edge of the search button.
  • When the search button is omitted: Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Three bars (Three bars icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Menu."

Behaviour:

  • Activating the menu button displays the navigation overlay.

Exceptions:

The menu button is omitted when:

  • Navigation is provided in the body.
  • Activating a menu item is likely to cause user error or loss of data, for example, in a transactional workflow.
  • The site/application is a single-page/screen site/application.

1.1.5. Search button

Content page/screen with the search button omitted as described in the exceptions for Section 1.1.5. Search button.

Location:

  • Aligned horizontally with the left edge of the settings button.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Magnifying glass (Magnifying glass icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Search".

Behaviour:

  • Activating the search button displays the search overlay.

Exceptions:

The search button is omitted when:

  • Search is not a function of the site/application.
  • Search is a primary function of the site/application and is provided in the body.
  • Activating a search is likely to cause user error or loss of data, for example, in a transactional workflow.

1.1.6. Settings button

Content page/screen with only the settings button displayed as described in the exceptions for the subsections of Section 1. Content pages/screens.

Location:

  • Aligned horizontally with the right edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 46 pixels.
  • Height: 32 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Icon: Cog (Cog icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Settings".

Behaviour:

  • Activating the settings button displays the settings menu.

1.2. Site/application title

Content page/screen with the site/application title omitted as described in the exceptions for Section 1.2. Site/application title.

Location:

  • Aligned vertically with the bottom edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #6facd5 to #497bae.
  • Font: Verdana, sans-serif.
  • Font size: 19.2 pixels.
  • Text: The title of the site/application.

Exceptions:

The site/application title is omitted when:

  • The page/screen cannot be accessed without first going through another page/screen of the site/application which displays the site/application title.

Device-based mobile applications also omit the application title when:

  • The device-based mobile application is launched by activating the application icon for the device-based mobile application, if the application title is displayed in conjunction with the application icon.

1.3. Page/screen title

Content page/screen with the site/application and page/screen titles omitted as described in the exceptions for sections 1.2. Site/application title and 1.3. Page/screen title.

Location:

  • When the site/application title is present: Aligned vertically with the bottom edge of the site/application title.
  • When the site/application title is omitted: Aligned vertically with the bottom edge of the Government of Canada navigation bar.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Foreground colour: Black (#000).
  • Border: bottom only; 1 pixel dotted #ccc.
  • Font: Verdana, sans-serif.
  • Font size: 21.76 pixels.
  • Text: The title of the page/screen.

Exceptions:

  • The site/application is a single-page/screen site/application.

1.4. Body

The body contains the contents/interface for the site/application.

Location and Dimensions:

  • The body occupies all the page/screen real estate not used by the Government of Canada navigation bar, the site/application title and the page/screen title. When the site/application title or the page/screen title are omitted the body expands to occupy the unused space.

Presentation:

  • Background colour: White (#fff).
  • Font: Verdana, sans-serif.
  • Font size: At least 16 pixels.

2. Server message pages/screens

Unilingual server message page/screen as described in Section 2. Server message pages/screens.

The server message page/screen contains the site/application title and a body.

If the user's language can be determined, the server message is provided only in the user's language. If the user's language cannot be determined, the server message is provided in each language in which the site/application is available.

2.1. Site/application title

The site/application title is displayed in each language in which the server message is provided.

Location:

  • First official language: Aligned vertically with the top edge of the screen/page.
  • Second official language: Aligned vertically with the bottom edge of the site/application title in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous site/application title.

Presentation:

  • Foreground colour: #295376.
  • Background colour: White (#fff).
  • Font: Verdana, sans-serif.
  • Font size:
    • First and second official languages: 19.2 pixels.
    • Additional languages: 15.3667 pixels.
  • Text:
    • First official language: The title of the site/application in the first official language.
    • Second official language: The title of the site/application in the second official language.
    • Additional languages: The title of the site/application in the additional language and in its native alphabet.
  • Border:
    • After the last site/application title: bottom-only; 1 pixel solid #666.

2.2. Body

The body contains a server message block and a terms and conditions link in each language in which the server message is provided and the Canada Wordmark.

2.2.1. Server message blocks

Each server message block contains a server message title, a server message body and links to the home page and the contact information.

Location:

  • First official language: Aligned vertically with the bottom edge of the last site/application title.
  • Second official language: Aligned vertically with the bottom edge of the server message block in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous server message block.

Dimensions:

  • Width: 100% (full width of the page/screen).
2.2.1.1. Server message title

Location:

  • Aligned vertically with the top edge of the server message block.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: The title of the server message in the language of the server message block and in its native alphabet.
2.2.1.2. Server message body

Location:

  • Aligned vertically with the bottom edge of the server message title.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: The body of the server message in the language of the server message block and in its native alphabet.
2.2.1.3. Home link

Location:

  • Below the message body.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: "Home" in the language of the server message block and in its native alphabet.

Behaviour:

  • Activating the home link returns the user to the home page/screen.

Exceptions:

  • The site/application does not have a home page/screen.
  • The site/application is a single-page/screen site/application.
2.2.1.4. Contact information link

Location:

  • Below the home link.
  • Aligned horizontally with the left edge of the server message block.

Presentation:

  • Text: "Contact us" in the language of the server message block and in its native alphabet.

Behaviour:

  • Activating the contact information link takes the user to the contact information.

2.2.2. Terms and conditions link

The terms and conditions link is displayed in each language in which the server message is provided.

Location:

  • First official language: Aligned vertically with the bottom edge of the last server message block.
  • Second official language: Aligned vertically with the bottom edge of the terms and conditions link in the first official language.
  • Additional languages: Aligned vertically with the bottom edge of the previous terms and conditions link.
  • Aligned horizontally with the left edge of the page/screen.

Presentation:

  • Text:
    • First official language: "Terms and conditions" in the first official language.
    • Second official language: "Terms and conditions" in the second official language.
    • Additional languages: "Terms and conditions" in the additional language and in its native alphabet.

Behaviour:

2.2.3. Canada Wordmark

Location:

  • Below the last terms and conditions link.
  • Centred horizontally.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Black text and FIP red flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Displayed as a block-level element.
  • Image: wmms.

3. Splash pages/screens

Bilingual splash page/screen as described in Section 3. Splash pages/screens.

Splash pages/screens contain the welcome banner, a site/application title block, a language links block, a terms and conditions links block and the Canada Wordmark.

Dimensions:

  • Width: 100% (full width of the page/screen).

Presentation:

  • Background colour: White (#fff).

Exceptions:

  • Websites and Web applications that have a unilingual website addresses do not implement splash pages.
  • Device-based mobile applications implement application launch screens instead of splash screens.

3.1. Welcome banner

Location:

  • Aligned vertically with the top edge of the page/screen.
  • Aligned horizontally with the left edge of the page/screen.

Dimensions:

  • Width: 100% (full width of the page/screen).
  • Height: 189 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background image: splashpage-background.jpg.
  • Text: "Welcome / Bienvenue".

3.2. Site/application title block

The site/application title block contains the site/application title in each language in which the site/application is available.

Location:

  • Below the welcome banner.

Presentation:

  • Foreground colour: Black (#000).

3.2.1. Site/application title in the first official language

Location:

  • Aligned vertically with the top edge of the site/application title block.
  • Aligned horizontally with the left edge of the site/application title block.
  • On the same baseline as the site/application title in the second official language.

Presentation:

  • Text: The title of the site/application in the first official language.
  • Alignment: Left-aligned.

3.2.2. Site/application title in the second official language

Location:

  • Aligned vertically with the top edge of the site/application title block.
  • Aligned horizontally with the right edge of the site/application title block.
  • On the same baseline as the site/application title in the first official language.

Presentation:

  • Text: The title of the site/application in the second official language.
  • Alignment: Right-aligned.

3.2.3. Site/application titles in additional languages

Location:

  • Below the site/application title in the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the site/application title block.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the site/application title block.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Text: The title of the site/application in the additional language and in its native alphabet.
  • Alignment:
    • First, third and subsequent odd-numbered additional language: Left-aligned.
    • Second, fourth and subsequent even-numbered additional language: Right-aligned.

3.3. Language links block

The language links block contains links to each language version of the site/application.

Location:

  • Below the site/application title block.

3.3.1. Language link for the first official language

Location:

  • Aligned vertically with the top edge of the language links block.
  • Aligned horizontally with the left edge of the language links block.
  • On the same baseline as the language link for the second official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the first official language in its native language and alphabet.

3.3.2. Language link for the second official language

Location:

  • Aligned vertically with the top edge of the language links block.
  • Aligned horizontally with the right edge of the language links block.
  • On the same baseline as the language link for the first official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the second official language in its native language and alphabet.

3.3.3. Language link for additional languages

Location:

  • Below the language links for the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the language links block.
    • On the same baseline as the language link for the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the language links block.
    • On the same baseline as the language link for the previous odd-numbered additional language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #444 to #2d2d2d.
  • Text: The official name of the first official language in its native language and alphabet.

3.4. Terms and conditions links block

The terms and conditions block contains links to the terms and conditions for each language in which the site/application is available.

Location:

  • Below the language links block.

3.4.1. Terms and conditions link for the first official language

Location:

  • Aligned vertically with the top edge of the terms and conditions links block.
  • Aligned horizontally with the left edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the second official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the first official language and in its native alphabet.

3.4.2. Terms and conditions link for the second official language

Location:

  • Aligned vertically with the top edge of the terms and conditions links block.
  • Aligned horizontally with the right edge of the terms and conditions links block.
  • On the same baseline as the terms and conditions link for the first official language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the second official language and in its native alphabet.

3.4.3. Terms and conditions link for additional languages

Location:

  • Below the terms and conditions links for the first and second official languages.
  • First, third and subsequent odd-numbered additional language:
    • Aligned horizontally with the left edge of the terms and conditions links block.
    • On the same baseline as the terms and conditions link for the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • Aligned horizontally with the right edge of the terms and conditions links block.
    • On the same baseline as the terms and conditions link for the previous odd-numbered additional language.

Dimensions:

  • Width: 50% of the width of the page/screen.
  • Height: 36 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Terms and conditions" in the additional language and in its native alphabet.

3.5. Canada Wordmark

Location:

  • Aligned vertically with the bottom edge of the page/screen.
  • Centred horizontally.

Dimensions:

  • Width: 90 pixels.
  • Height: 22 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: White (#fff).
  • Black text and FIP red flag symbol.
  • Text equivalent: "Symbol of the Government of Canada".
  • Displayed as a block-level element.
  • Image: wmms.

4. Content overlays

Each content overlay is displayed over the page/screen and contains a title bar and a body. Content overlays are used to present content such as full-screen images and videos or contextual help.

4.1. Title bar

The title bar contains the title and the back and close buttons.

Location:

  • Aligned vertically with the top edge of the content overlay.

Dimensions:

  • Width:
    • When the content overlay title is present: 100% (full width of the content overlay).
    • When the content overlay title is omitted: The width of the close button.

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.

4.1.1. Title

Location:

  • Centred horizontally and vertically.

Dimensions:

  • Width: The width of the title bar less the width of the back and close buttons.

Presentation:

  • Foreground colour: White (#fff).
  • Single-line, no wrapping.
  • Overflow: ellipsis.

Exceptions:

The title is omitted when:

  • It contains a single element, for example, a map, a photograph or a video.

4.1.2. Back button

Location:

  • Aligned horizontally with the left edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button returns the user to the content overlay or menu from which the content overlay was launched.

Exceptions:

The back button is omitted when:

  • The content overlay was not launched from a content overlay or menu.
  • The result of activating the back button is the same as the result of activating the close button.

4.1.3. Close button

Location:

  • Aligned horizontally with the right edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: X (X icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Close".

Behaviour:

  • Activating the close button removes the content overlay from view.

4.2. Body

Location:

  • Aligned vertically with the bottom edge of the title bar.

Dimensions:

  • Width: Up to 100% of the width of the viewport.

Presentation:

  • When the contents are wider than the viewport, the contents:
    • are resized to accommodate the width; or
    • scroll horizontally.

Behaviour:

  • The body grows or shrinks to accommodate its contents.

5. Menus

Menu with the back button omitted as described in Section 5. Menus and the exceptions in Section 5.1.2. Back button.

Each menu is displayed over the page/screen and contains a title bar and a body.

5.1. Title bar

The title bar contains the title and the back and close buttons.

Location:

  • Aligned vertically with the top edge of the menu.

Dimensions:

  • Width:
    • When the menu title is present: 100% (full width of the menu).
    • When the menu title is omitted: The width of the close button.

Presentation:

  • Background colour: Top-to-bottom linear gradient from #3c3c3c to #111.

5.1.1. Title

Location:

  • Centred horizontally and vertically.

Dimensions:

  • Width: The width of the title bar less the width of the back and close buttons.

Presentation:

  • Foreground colour: White (#fff).
  • Single-line, no wrapping.
  • Overflow: ellipsis.

5.1.2. Back button

Menu with the back button displayed as described in Section 5.1.2. Back button.

Location:

  • Aligned horizontally with the left edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: Back arrow (Back arrow icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Back."

Behaviour:

  • Activating the back button return the user to the previous level of menu.

Exceptions:

The back button is omitted when:

  • There is no previous level of menu.

5.1.3. Close button

Location:

  • Aligned horizontally with the right edge of the title bar.

Dimensions:

  • Width: 18 pixels.
  • Height: 18 pixels.

Presentation:

  • Foreground colour: White (#fff).
  • Background colour: Transparent.
  • Icon: X (X icon), 18 pixels by 18 pixels, centred horizontally and vertically.
  • Text equivalent: "Close".

Behaviour:

  • Activating the close button closes all open menus.

5.2. Body

Location:

  • Aligned vertically with the bottom edge of the title bar.

Dimensions:

  • Width: Up to 100% of the width of the viewport.

Behaviour:

  • The body grows or shrinks to accommodate its contents.

5.2.1. Menu items

Location:

  • If it is the first item in the menu's body: Aligned vertically with the bottom edge of the title bar.
  • If it is the second or subsequent item in the menu: Aligned vertically with the bottom edge of the previous menu item.

Dimensions:

  • Width:
    • When the menu body contains only menu items: 100% (full width of the menu).
    • When the menu body contains menu items and other elements: 100% (full width of the body).

Presentation:

  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.

Behaviour:

  • Activating a menu item displays either a sub-menu, a page/screen or a content overlay.

6. Navigation overlay

Navigation overlay as described in Section 6. Navigation overlay.

The navigation overlay is identical to the content overlay, except for the following differences.

6.1. Title bar

6.1.1. Title

Presentation:

  • Text: "Menu".

6.2. Body

The body of the navigation overlay contains the breadcrumb navigation, the secondary navigation and the site/application navigation.

6.2.1. Breadcrumb navigation

The breadcrumb navigation contains horizontal list starting with a home link, followed by links to each of the pages/screens above the current page/screen in the site/application's hierarchy, and ending with the title of the current page/screen.

Location:

  • Aligned vertically with the top edge of the body.

Presentation:

  • Foreground colour:
    • Breadcrumb links: #295376.
    • Current page/screen: #555.
  • Background colour: Top-to-bottom linear gradient from #f0efef to #dfdfdd.
  • Text:
    • Home breadcrumb link: "Home".
    • Breadcrumbs links and current page/screen: The title of the corresponding page/screen.
  • Separator: bcrumb-mobile.png.

Behaviour:

  • Home breadcrumb link:
    • Activating the home link returns the user to the home page/screen.
  • Subsequent breadcrumb links:
    • Activating the breadcrumb link takes the user to the corresponding page/screen.

Exceptions:

The breadcrumb navigation is omitted when:

  • The page/screen is the home page/screen.
  • Activating a breadcrumb item is likely to cause user error or loss of data, for example, in a transactional workflow.

6.2.2. Secondary navigation

Location:

  • When the breadcrumb navigation is present: Below the breadcrumb navigation.
  • When the breadcrumb navigation is omitted: At the top of the body.

Dimensions:

  • 100% of the width of the body.

Exceptions:

The secondary navigation is omitted when:

  • It is not used by the site/application.

6.2.3. Site/application navigation

Location:

  • When the secondary navigation is present: Below the secondary navigation.
  • When the secondary navigation is omitted and the breadcrumb navigation is present: Below the breadcrumb navigation.
  • When both the secondary navigation and the breadcrumb navigation are omitted: At the top of the body.

Dimensions:

  • 100% of the width of the body.

Exceptions:

The site/application navigation is omitted when:

  • It is not used by the site/application.

7. Search overlay

Search overlay as described in Section 7. Search overlay.

The search overlay is identical to the content overlay, except for the following differences.

7.1. Title bar

7.1.1. Title

Presentation:

  • Text: "Search".

7.2. Body

The body contains a search input field and a search button.

7.2.1. Search input field

Location:

  • Aligned vertically with the bottom edge of the title bar; centred horizontally.

Dimensions:

  • Width: 100% of the width of the body.
  • Height: 31 pixels.

Presentation:

  • Label: "Search".

7.2.2. Search button

Location:

  • Aligned vertically with the bottom edge of the search input field.
  • Aligned horizontally with the right edge of the body.

Dimensions:

  • Width: 100% of the width of the body.
  • Height: 39 pixels.

Presentation:

  • Foreground colour: Black (#000).
  • Background colour: Top-to-bottom linear gradient from #f5f5f5 to #d5d5d5.
  • Text: "Search".

Behaviour:

8. Settings menu

Settings menu as described in Section 8. Settings menu.

The settings menu is identical to the menu, except for the following differences.

8.1. Title bar

8.1.1. Title

Presentation:

  • Text: "Settings".

8.2. Body

The body contains menu items for:

  • The sign-in/sign-out.
  • The language menu.
  • The site/application's user-modifiable settings (other than language).
  • The about information overlay.

8.2.1. Sign-in/sign-out menu item

The sign-in/sign-out menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text:
    • When the user is signed-in: "Sign out".
    • When the user is signed-out: "Sign in".

Behaviour:

  • When the user is signed-in: Activating the sign-in/sign-out menu item signs the user out of the site/application.
  • When the user is signed-out: Activating the sign-in/sign-out menu item allows the user to sign in of the site/application.

Exceptions:

The sign-in/sign-out mechanism is omitted when:

  • The site/application does not require the user to sign-in to use it.

8.2.2. Language menu menu item

The language menu menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: "Language".

Behaviour:

  • Activating the language menu item displays the language menu.

Exceptions:

The language menu menu item is omitted when:

  • Changing the language is likely to cause user error or loss of data, for example, in a transactional workflow.

8.2.3. User-modifiable setting menu items

User-modifiable setting menu items are identical to menu items, except for the following differences.

Behaviour:

  • Activating a user-modifiable setting menu item either displays a sub-menu, a page/screen or a content overlay, or toggles or changes a setting.

8.2.4. About information overlay menu item

The about information overlay menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: "About"

Behaviour:

  • Activating the about information overlay menu item displays the about information overlay.

9. Language menu

Language menu as described in Section 9. Language menu.

The language menu is identical to a menu, except for the following differences.

9.1. Title bar

9.1.1. Menu title

Presentation:

  • Text: "Language".

9.2. Body

The language menu body contains a menu item for each language in which the site/application is available.

9.2.1. Language menu items

Each language menu item is identical to a menu item, except for the following differences.

Presentation:

  • Text: The name of the language in its native language and alphabet.

Behaviour:

On websites and in Web applications:

  • Activating a language menu item changes the language of the site/application to the selected language.

In device-based mobile applications:

  • Activating a language menu item either changes the language of the device-based mobile application to the selected language or displays the instructions for obtaining the device-based mobile application in the selected language if the selected language is not installed.

10. About information overlay

About information overlay as described in Section 10. About information overlay.

The about information overlay is identical to a content overlay, except for the following differences.

10.1. Title bar

10.1.1. Title

Presentation:

  • Text: "About".

10.2. Body

The about information overlay body contains the site/application title, the version identifier, links to the notices and the about us, contact us, news and stay connected links.

10.2.1. Site/application title

Location:

  • Aligned vertically with the bottom edge of the title bar.
  • Aligned horizontally with the left edge of the body.

10.2.2. Version identifier

Location:

  • Below the site/application title.
  • Aligned horizontally with the left edge of the body.

Exceptions:

The version identifier is omitted when:

  • A date of last modification is provided.

10.2.3. Terms and conditions link

Location:

  • Below the version identifier
  • Aligned horizontally with the left edge of the body.

Behaviour:

10.2.4. Transparency link

Location:

  • Below the terms and conditions link.
  • Aligned horizontally with the left edge of the body.

Behaviour:

Website and Web applications:

  • Activating the transparency link takes the user either to the department's main transparency page/screen or, where the site/application is not departmental, to the Government-wide Reporting page on the Treasury Board of Canada Secretariat website.

10.2.5. About us link

Location:

  • Below the links to the notices.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "About us".

Behaviour:

  • Activating the about us link displays information about the site/application.

10.2.6. Contact us link

Location:

  • Below the about us link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "Contact us".

Behaviour:

  • Activating the contact us link displays the contact information for the site/application.

10.2.7. News link

Location:

  • Below the contact us link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "News"

Behaviour:

  • Activating the news link displays media products, such as press releases.

Exceptions:

The news link is omitted when:

  • The site/application does not release media products, such as press releases.

10.2.8. Stay connected link

Location:

  • Below the news link.
  • Aligned horizontally with the left edge of the body.

Presentation:

  • Text: "Stay connected"

Behaviour:

  • Activating the stay connected link displays social media, email subscription and/or Web feeds.

Exceptions:

The stay connected link is omitted when:

  • The site/application does not have social media, email subscriptions or Web feeds.
Date modified: