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

The specifications for large device screens are applied when:

  • the screen (media query device-width) is at least 1024 pixels wide; and
  • the viewport (media query width) is at least 960 pixels wide.

The pixel measurements and positions in the following layout specifications are relative to the inner and outer boundaries. These are 960 pixels for the inner width and 100% of the screen's width for the outer width.

11. Content pages

Content page with all elements displayed as described in Section 11. Content pages.

Each Web page contains the following common visual elements and structured into three main areas: header, body and footer.

11.1. Header

The header includes the background image, the Government of Canada navigation bar, the Government of Canada signature, the site/application title, the Canada Wordmark, search and the navigation bar.

Presentation:

  • Background colour: White (#fff).
  • Background image: background-withglow-andleaf.jpg), centred, 40 pixels from the top edge of the Web page, repeats horizontally.

11.1.1. Government of Canada navigation bar

The Government of Canada navigation bar is located at the top of the header and includes header links and official language selection.

Dimensions:

  • Height when using the Government of Canada signature: 41 pixels.
  • Height when using the Arms of Canada signature: 65 pixels.

Presentation:

  • 13 pixels below the top boundary of the Government of Canada navigation bar
  • Background (outer width): black (#000) for the colour
  • Canada.ca, Services, Departments ("Ministères"), and official language selection link are displayed from left to right, 10 pixels to the left of the inner right boundary of the Government of Canada navigation bar
  • Each link is separated by a white (#fff) vertical bar with 13 pixels of space on each side of the vertical bar.
  • Font: 9 point Verdana
  • Foreground: white (#fff)
  • Text is vertically centred in the Government of Canada navigation bar.
  • Confirmation is requested from the user if switching between languages would cause the loss of data or a disruption in the process of a transactional service.

Behaviour:

  • Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html
  • Services links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/accueil.shtml
  • Departments ("Ministères") links to http://canada.ca/en/gov/dept/index.html or http://canada.ca/fr/gouv/min/index.html
  • Language selection links take the user to the equivalent content in that language.
  • The official language selection link takes the user to the same Web page in the other official language.

Exceptions:

  • For websites and Web applications in non-official languages the links to Canada.ca, Services, Departments ("Ministères") are replaced with the additional languages. The official languages are displayed at the furthest boundary, with additional languages displayed across the navigation bar. For languages that read right to left, this would mean official languages are left aligned.
  • For websites and Web applications that require users to be logged-in and provide the option of selecting, setting, or changing the language preference, the language selection links can be removed from the navigation bar.
11.1.1.1. Government of Canada signature

The Government of Canada signature (sig-eng-bg or sig-fra-bg) is applied to all government Web pages of departments identified by the flag symbol. Departments identified by the Arms of Canada use their approved Arms of Canada signature or the Government of Canada signature. Departments who have received Treasury Board approval to be identified by a symbol other than the flag symbol or the Arms of Canada use the Government of Canada signature or their approved symbol.

Location:

  • 10 pixels to the right of the inner left boundary of the Government of Canada navigation bar
  • Centred vertically in the Government of Canada navigation bar

Dimensions:

  • Width: 234 pixels for Government of Canada signature
  • Height:
    • 22 pixels for Government of Canada signature.
    • 61 pixels for Arms of Canada signatures or approved symbols.

11.1.2. Site/application title

Provides the title of the site/application.

Location:

  • 10 pixels to the right of the inner left boundary of the banner
  • Centred vertically in the banner

Dimensions:

  • Available width: 360 pixels
  • Available height: 123 pixels

Presentation:

  • Font: 22.5 point Arial or decreased to accommodate title length
  • Text shadow:
    • Colour: dark grey (#333)
    • Position (right, down): 1 pixel, 1 pixel
    • Blur radius: 1 pixel
  • Foreground: white (#fff)
  • Background: transparent

Behaviour:

  • Underlined for mouse hover and keyboard focus (not underlined otherwise)
  • Links to the home page of the site/application.

11.1.3. Canada Wordmark

The Canada Wordmark (wmms-bg) is to be applied to all Government of Canada Web pages.

Location:

  • 10 pixels to the left of the inner right boundary of the banner
  • 39 pixels below the top of the banner

Dimensions:

  • Width: 139 pixels
  • Height: 33 pixels

11.1.4. Search

Content page with the search omitted as described in the exceptions for Section 11.1.4. Search.

Location:

  • "Search" ("Recherche") button is 10 pixels to the left of the inner right boundary of the banner
  • Search text input field is 5 pixels to the left of the Search ("Recherche") button
  • "Search" ("Recherche") button and search text input field are 5 pixels above the bottom of the banner

Presentation:

  • Button foreground: Dark grey (#333)
  • Button background (normal): search-button for the image and grey (#ccc) for the colour
  • Button background (hover/focus): search-button-focus for the image and grey (#ddd) for the colour
  • Button and search text input field are enclosed in a container with the following properties:
    • Background: #146094
    • Border-left: 1px solid #15527D
    • Border-right: 1px solid #15527D
    • Border-top: 1px solid #87AEC9
    • Padding (top, right, bottom, left): 11 pixels, 10 pixels, 6 pixels, 12 pixels
    • Font: 10 point Verdana
  • Search text input field background is white (#FFFFFF).
  • Search text input field width is 27 characters.

Behaviour:

  • Submitting a search query sends the user to a search engine results page.

Exceptions:

Search element can be removed where:

  • search engine results are displayed,
  • search is the primary task of the page; or
  • the act of executing the search would cause the loss of data or a disruption in the process of a transactional service.

11.1.5. Site/application navigation bar

Content page with the site/application navigation bar omitted as described in the exceptions for Section 11.1.5. Site/application navigation bar.

Provides links for moving from section to section across the entire website or application.

Location:

  • The site/application navigation bar is located immediately below the banner

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Top Level
    • Foreground: white (#FFF)
    • Foreground (link, hover/focus/active): black (#000)
    • Background (inner width): menu-bg for the image and #23447E for the colour
    • Background (outer width): transparent
    • Background (link, normal): transparent
    • Background (link, hover/focus/active): grey (#CCC) for the colour
    • Down arrow (for submenus): menu-arrow
    • Border-bottom: 4 pixels solid grey (#CCC)
    • Font: 13 pixels Verdana bold
  • Secondary menu
    • Foreground: black (#000)
    • Foreground (link, hover/focus/active): black (#000), underline
    • Background: grey (#CCC) for the colour
    • Background (link, normal): transparent
    • Font: 13 pixels Verdana and 16 pixels Verdana bold for mega menu column headings
    • Border-bottom: 4 pixels solid blue (#0F315B)
    • Link properties:
      • Border-left: 1px solid #124B79
      • Border-right: 1px solid #15598F
      • Padding (top, right, bottom, left): 6 pixels, 14 pixels, 6 pixels, 10 pixels

Behaviour:

  • Links are text-based and are the same throughout the site/application.
  • Link appearance for mouse hover and keyboard focus must be visually distinct from the default link appearance.
  • Link appearance for the item selected on the primary navigation bar must be visually distinct from the unselected state.
  • Content is limited to within the inner boundaries of the navigation bar. Only prescribed background colours and images can be used outside of those boundaries.

Exception

  • The site/application navigation bar can be removed when menu links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.

11.2. Breadcrumbs

Provides links to the pages above the current page in the site/application's hierarchy.

Location:

  • Immediately below the site/application navigation bar.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Horizontal list of breadcrumbs (text-based links) representing the pages above the current page within the site/application's hierarchy.
  • The current page is displayed and is not hyperlinked.
  • Breadcrumbs are separated by the greater-than sign ( > ).
  • The first breadcrumb is "Home" ("Accueil").

Behaviour:

  • "Home" ("Accueil") links to the home page of the site/application. Subsequent breadcrumbs are linked to the corresponding Web pages.

Exceptions:

  • Breadcrumbs are not displayed
    • on home pages; or
    • where breadcrumb links not associated with primary tasks are likely to cause user error or loss of data, for example, in a transactional workflow.

11.3. Body

The body is located immediately below the header and includes a content area and may also include secondary navigation. The content area includes the Date modified and may include the Government priorities. The preferred fonts for the body areas are Arial, Helvetica and Verdana.

Location:

  • Immediately below the header

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)
  • Content area is the full width and height of the inner body except where accommodating secondary navigation.

Presentation:

  • Content area and secondary navigation are limited to within the inner boundaries of the body. Only background colours and images prescribed can be used outside of those boundaries.

11.4. Background

Presentation:

  • Inner width: content-deco for the image and white (#fff) for the colour
  • Outer width: transparent
  • Background image repeats vertically

11.5. Government priorities

Provides links to government priorities, use is determined by the head of communications, in consultation with Privy Council Office.

Location:

  • Aligned with the right boundary of the content area.
  • Exact location to be determined by the head of communications, in consultation with Privy Council Office.

Dimensions:

  • Dimensions to be determined by the head of communications, in consultation with Privy Council Office.

Presentation:

  • Section heading is "Priorities" ("Priorités")
  • Remaining presentation aspects are determined by the head of communications of the department, in consultation with Privy Council Office.

11.6. Date modified

Provides the most recent date on which the Web page content was formally issued, substantially changed or reviewed.

Location:

  • Aligned with the right boundary of the content area.
  • Aligned with the bottom boundary of the content area.
  • The date modified is removed where a version identifier is used.

Presentation:

  • "Date modified:" ("Date de modification :") using the ISO standard format (YYYY MM DD)

11.7. Footer

The footer is located immediately below the body and includes the site/application footer and the Government of Canada footer.

Location:

  • Immediately below the body.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • The background area is transparent.
  • Content is limited to the two areas included in the footer. Only background colours and images prescribed can be used outside of those areas.

11.7.1. Site/application footer

Includes links to the site/application's Terms and conditions and Transparency pages as well as About us, News, Contact us and Stay connected.

Location:

  • The site/application footer is located immediately below the body.
  • "News" ("Nouvelles") link is removed where the site/application does not release media products such as press releases.
  • "Stay connected" ("Restez branchés") link is removed where no social media, email subscriptions or Web feeds are available.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Foreground: dark grey (#222)
  • Background (outer width): foot-bottom-deco for the image and light grey (#efefef) for the colour
  • Background image (outer width) repeats horizontally
  • Background (inner width): footer-deco for the image and light grey (#efefef) for the colour
  • Left-most column is 10 pixels to the right of the inner left boundary of the site/application footer
  • Font: 10.5 point Arial for the column headings and 9.5 point Arial for regular column text
  • Column headings are not underlined by default
  • Includes the following four links arrayed from left to right in the same order: "About us" ("À propos de nous"), "Contact us" ("Contactez-nous"), "News" ("Nouvelles") and "Stay connected" ("Restez branchés").
  • Additional links may be included in columns below the top-most links. Each column of links is left aligned with the associated top-most link.
  • Top-most links are bolded while the additional links are not.
  • Link appearance for mouse hover and keyboard focus are underlined.
  • Links are text-based and are the same throughout the website or application.
  • Content is limited to within the inner boundaries of the site/application footer. Only background colours and images prescribed can be used outside of those boundaries.

Behaviour:

  • "About us" ("À propos de nous") links to a page with information about the site/application.
  • "Contact us" ("Contactez-nous") links to a page with contact information for the site/application.
  • "News" ("Nouvelles") links to a page with media products such as press releases.
  • "Stay connected" ("Restez branches") links to a page where social media, email subscriptions and/or Web feeds are available.
11.7.1.1. Terms and conditions ("Avis") and Transparency ("Transparence") links

Location:

  • Aligned with the inner left boundary of the site/application footer.
  • "Transparency" ("Transparence") link is to the right of the "Terms and conditions" ("Avis") link.

Presentation:

  • Links are text-based.

Behaviour:

  • "Terms and conditions" ("Avis") links to a page containing the notices in Appendix C of the Standard on Web Usability, or links to those same notices.
  • "Transparency" ("Transparence") links to either the department's main Transparency page or, where the site/application is not departmental, to the Government-Wide Reporting page on the Treasury Board of Canada Secretariat website.

11.7.2. Government of Canada footer

Provides links to common Government of Canada resources.

Location:

The Government of Canada footer is located immediately below the site/application footer.

Dimensions:

  • Height: 57 pixels
  • Width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Background: #040707 for the colour
  • Only background colours and images prescribed can be used outside of those boundaries.
  • HEALTH (SANTÉ), TRAVEL (VOYAGE), SERVICE CANADA, JOBS (EMPLOIS), and ECONOMY (ÉCONOMIE) links are displayed from left to right 10 pixels to the right of the inner left boundary of the Government of Canada footer. The domain names appear on the second line
  • Canada.ca link is 15 pixels to the left of the inner right boundary of the Government of Canada footer
  • Canada.ca link is separated from the other links by a grey vertical bar (#666) with 45 pixels of space between the Canada.ca link and the vertical bar
  • Other links are separated by 45 pixels of space
    • Font: Arial
    • Font size ("Canada.ca"):16 point
    • Font size (other links): 9 point
    • Font colour is white (#fff)
    • Background: transparent
    • All links are vertically aligned in the middle of the Government of Canada footer
    • HEALTH links to http://healthycanadians.gc.ca/index-eng.php, and SANTÉ links to http://canadiensensante.gc.ca/index-fra.php
    • TRAVEL links to http://www.travel.gc.ca/index-eng.asp and VOYAGE links to http://www.voyage.gc.ca/index-fra.asp
    • SERVICE CANADA links to http://www.servicecanada.gc.ca/eng/home.shtml or http://www.servicecanada.gc.ca/fra/acscueil.shtml
    • JOBS links to http://www.jobbank.gc.ca/intro-eng.aspx, and EMPLOIS links to http://www.guichetemplois.gc.ca/Intro-fra.aspx
    • ECONOMY links to http://actionplan.gc.ca/en and ÉCONOMIE links to http://plandaction.gc.ca/fr
    • Canada.ca links to http://canada.ca/en/index.html or http://canada.ca/fr/index.html

Exception:

  • No links are displayed when site/application is in non-official languages.

12. Server message pages

Single-column, unilingual server message page as described in Section 12. Server message pages.

The following specifications apply to all server message pages. Each server message page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature, the Canada Wordmark, and the site/application title in each language. The body includes a content area. The footer includes a Terms and conditions ("Avis") link.

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.

12.1. Header

Includes the Government of Canada signature, the Canada Wordmark, and the site/application title block.

Location:

  • Top of the server message page.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • The background of the header is white (#FFFFFF).
  • Content is limited to the three elements in the header.

12.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all government server message pages.

Location:

  • 10 pixels to the right of the inner left boundary of the header
  • 20 pixels below the top boundary of the header

Dimensions:

  • Width: 214 pixels
  • Height: 20 pixels

12.1.2. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to all Government of Canada server message pages.

Location:

  • 10 pixels to the left of the inner right boundary of the header
  • 10 pixels below the top boundary of the header

Dimensions:

  • Width: 126 pixels
  • Height: 30 pixels

12.1.3. Site/application title block

Two-column, bilingual server message page as described in Section 12. Server message pages.

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

Location:

  • 17 pixels below the Government of Canada signature and the Canada Wordmark.

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Foreground colour: #295376.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.
  • Border: bottom only; 1 pixel solid #666.
12.1.3.1. Site/application title in the first official language

Location:

  • In the first column.
  • When the site/application title in the second official language is present: On the same baseline as the site/application title in the second official language.

Presentation:

  • Font size: 14.5 point or decreased to accommodate title length.
  • Text: The title of the site/application in the first official language.
  • Alignment: Left-aligned.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.1.3.2. Site/application title in the second official language

Location:

  • In the second column.
  • On the same baseline as the site/application title in the first official language.

Presentation:

  • Font size: 14.5 point or decreased to accommodate title length.
  • Text: The title of the site/application in the second official language.
  • Alignment: Right-aligned.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.1.3.3. Site/application title in additional languages

Location:

  • First, third and subsequent odd-numbered additional language:
    • In the first column.
    • 10 pixels below the previous site/application title in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • 10 pixels below the previous site/application title in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Font size: 11.5 point or decreased to accommodate title length.
  • 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.
  • On hover / on focus: Underlined.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.

12.2. Body

The body contains the server message block in each language in which the server message is provided.

Location:

  • Immediately below the header.

Dimensions:

  • Outer width: 100% (full width of the page).
  • Inner width: 960 pixels (centred).

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Background: Transparent.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.
  • Bottom margin: 12 pixels.
  • Border: bottom only; 10 pixels solid #28507A.

12.2.1. Server message block in the first official language

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

Location:

  • In the first column.
  • When the server message block in the second official language is present: On the same baseline as the server message block in the second official language.

Presentation:

  • Alignment: Left-aligned.
12.2.1.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

  • Text: The title of the server message in the first official language.
12.2.1.2. Server message body

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the first official language.
12.2.1.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the first official language.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.1.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the first official language.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.

12.2.2. Server message block in the second official language

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

Location:

  • In the second column.
  • On the same baseline as the server message block in the first official language.

Presentation:

  • Alignment: Left-aligned.
12.2.2.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

  • Text: The title of the server message in the second official language.
12.2.2.2. Server message body

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the second official language.
12.2.2.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the second official language.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.2.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the second official language.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.

12.2.3. Server message block in additional languages

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, third and subsequent odd-numbered additional language:
    • In the first column.
    • 20 pixels below the previous server message block in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • 20 pixels below the previous server message block in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Alignment: Left-aligned.
12.2.3.1. Server message title

Location:

  • At the top of the server message block.

Presentation:

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

Location:

  • Below the server message title.

Presentation:

  • Text: The server message body in the additional language and in its native alphabet.
12.2.3.3. Home page link

Location:

  • Below the server message body.

Presentation:

  • Text: "Home" in the additional language and in its native alphabet.

Behaviour:

  • Links to the home page of the site/application in the corresponding language.
12.2.3.4. Contact information link

Location:

  • Below the home page link.

Presentation:

  • Text: "Contact us" in the additional language and in its native alphabet.

Behaviour:

  • Links to the contact information for the site/application in the corresponding language.

12.3. Footer

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

Location:

  • Immediately below the body.

Dimensions:

  • Outer width: 100% (full width of the page).
  • Inner width: 960 pixels (centred).

Presentation:

  • Columns:
    • When only one language is provided: 1 column.
    • When more than one language is provided: 2 columns.
  • Background: Transparent.
  • Top margin: 17 pixels.
  • Left margin: 10 pixels.
  • Right margin: 10 pixels.

12.3.1. Terms and conditions link in the first official language

Location:

  • In the first column.
  • When the terms and conditions link in the second official language is present: On the same baseline as the terms and conditions link in the second official language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" in the first official language.
  • Alignment: Left-aligned.
  • Not underlined.

Behaviour:

12.3.2. Terms and conditions link in the second official language

Location:

  • In the second column.
  • On the same baseline as the terms and conditions link in the first official language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" in the second official language.
  • Alignment: Right-aligned.
  • Not underlined.

Behaviour:

12.3.3. Terms and conditions link in additional languages

Location:

  • First, third and subsequent odd-numbered additional language:
    • In the first column.
    • Below the previous terms and conditions link in the column.
    • On the same baseline as the next even-numbered additional language.
  • Second, fourth and subsequent even-numbered additional language:
    • In the second column.
    • Below the previous terms and conditions in the column.
    • On the same baseline as the previous odd-numbered additional language.

Presentation:

  • Bottom padding: 11 pixels.
  • Font: 9 point Verdana.
  • Text: "Terms and conditions" 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.
  • Not underlined.

Behaviour:

13. Splash pages

Bilingual splash page as described in Section 13. Splash pages.

Each splash page is structured into three main areas: header, body and footer. The header includes the Government of Canada signature. The body includes three elements: the site/application title in each language, the language selection links and the Canada Wordmark. The footer includes the Terms and conditions ("Avis") links in each language.

Exceptions:

  • Websites and Web applications that have a unilingual website addresses do not implement splash pages.

13.1. Header

The header includes the Government of Canada signature. The background is white (#fff).

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Content is limited to the Government of Canada signature. Only background colours and images prescribed can be used.

13.1.1. Government of Canada signature

The Government of Canada signature (sig-eng or sig-fra) is to be applied to all Government of Canada splash pages.

Location:

  • 10 pixels to the right of the inner left boundary of the header
  • 20 pixels below the top boundary of the header
  • 10 pixels above the bottom boundary of the header

Dimensions:

  • Width: 214 pixels
  • Height: 20 pixels

13.2. Body

The body is located immediately below the header and includes the background, the site/application title in each language, language selection links and the Canada Wordmark.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

Presentation:

  • Welcome / Bienvenue or Bienvenue / Welcome at the top of the body
  • Color: Dark grey (#222)
  • Horizontal alignment: centre-aligned
  • Padding-top/bottom: 40px
  • Font: 19. 5 point Verdana or decreased to accommodate title length
  • Background outer: transparent
  • Background inner: (splashpage-background.jpg) for the image and white (#fff) for the colour
  • Background image begins 20 pixels to the left of the inner left boundary of the body and 42 pixels above the top boundary of the body
  • Background image repeats horizontally
  • Content is limited to within the inner boundaries of the body. Only background colours and images prescribed can be used.

13.2.1. Site/application title

Provides the title of the site/application.

Location:

  • 62 pixels below Welcome / Bienvenue or Bienvenue / Welcome
  • Left-aligned site/application titles are 10 pixels to the right of the inner left boundary of the body
  • Right-aligned site/application titles are 10 pixels to the left of the inner right boundary of the body
  • Site/application title in the first official language is aligned with the inner left boundary of the body.
  • Site/application title in the second official language is aligned with the inner right boundary of the body.
  • Site/application titles for the first and second official languages are vertically aligned.
  • Site/application titles for additional languages are below the site/application titles for the first and second official languages.

Presentation:

  • Foreground: black (#000)
  • Minimum height (total): 90 pixels
  • Font: 14 point Verdana decreased to accommodate title length
  • Font size (site/application title in another language): 11.5 point or decreased to accommodate title length

13.2.2. Language selection links

Provides links to the home pages in the supported languages.

Location:

  • 10 pixels to the right of the inner left boundary of the body
  • 61 pixels below the site/application title
  • Language selection links for the first and second official languages are vertically aligned below the site/application title.
  • Additional language selection links are below the language selection links for the first and second official languages.

Presentation:

  • Text for each link is the official name of the corresponding language, in its native language and alphabet.
  • Foreground: dark grey (#333)
  • Background (normal): sp-pe-button for the image and grey (#ccc) for the colour
  • Background (hover/focus): sp-pe-button-focus for the image and grey (#ddd) for the colour
  • 21 pixels of horizontal spacing between language selection links
  • 14 pixels of vertical spacing between rows of language selection links
  • Font: Verdana
  • Width: 139 pixels
  • Horizontal alignment: centre-aligned
  • Padding-top/bottom: 10 pixels
  • Padding-left/right: 30 pixels
  • Border-bottom:1px solid #999
  • Border-right: 1px solid #999
  • Border-top: 1px solid #fff
  • Border-left: 1px solid #fff

Behaviour:

  • Each link is to the home page in the corresponding language.

13.2.3. Canada Wordmark

The Canada Wordmark (wmms) is to be applied to Government of Canada splash pages.

Location:

  • 10 pixels to the left of the inner right boundary of the body
  • 65 pixels below the site/application title

Dimensions:

  • Width: 126 pixels
  • Height: 30 pixels

13.3. Footer

The footer is located immediately below the body and includes the Terms and conditions ("Avis") link.

Dimensions:

  • Outer width: 100% (full width of the page)
  • Inner width: 960 pixels (centred)

13.3.1. Terms and conditions (Avis) link

Location:

  • 10 pixels to the right of the inner left boundary of the footer
  • Links are 10 pixels below the corresponding language selection link

Presentation:

  • Links are not underlined
  • 21 pixels of horizontal spacing between links
  • Font: 9 point Verdana
  • Width: 139 pixels
  • Horizontal alignment: left-aligned
  • Content is limited to the Terms and conditions ("Avis") link included in the footer. Only background colours and images prescribed can be used.

Behaviour:

Date modified: