GC Design System Page templates
Home Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Basic page template

The Basic Page template provides accessibility essentials for page structure and heading hierarchy. Brand elements, like the header and footer, make it recognizable as a Government of Canada page.

When to use

For use on Canada.ca and other GC sites.

The basic page template is for non-specialized pages across Canada.ca and is an optional template. It has the starting elements needed for a simple page and those required for most GC pages. You can use it as a canvas to add or combine components from the GC Design System.

Preview

Open demo in new tab Get code in new tab

A basic page template includes the Government of Canada header and footer, H1, H2 and H3 heading sections with text underneath each section.

How to implement

To implement page templates into your project or to prototype in HTML, download the specific template you need in GitHub:

  • Basic page template
  • Basic page table of contents template

To prototype in Figma, find the Basic Page Template in the GC Design System library.

Design considerations

Improve navigation on longer pages

  • Include an "On this page" section with bulleted anchor links for pages with four or more sections.
  • Anchor links to improve navigation and help people find relevant content.

Preview "On this page"

Open demo in new tab Get code in new tab

A basic page template with a "On this page" section includes the Government of Canada header and footer, a "On this page" section with three sections listed underneath.

Maintain a logical heading structure

  • Follow the hierarchy logic within the page template to structure your content for everyone, including people using assistive technology.
  • Use appropriate heading levels (H1-H6) to reflect the structure of your content.
  • Write clear and consistent headings, and maintain default character limits for each heading line for a comfortable reading length.
  • For consistency and accessibility, use GC Design System components like Heading, Text, and Screenreader-only.
  • For any custom-built elements, follow the Government of Canada’s Standard on Web Accessibility.

Accessibility highlights

The Basic Page template is built using the following components that meet WCAG 2.1 AA accessibility standards:

  • Container
  • Date modified
  • Footer
  • Header (includes search and breadcrumbs)
  • Heading
  • Link
  • Text

The Basic Page template includes:

  • A clear heading hierarchy you can use to structure your content logically for everyone, including people using assistive technologies, by following Heading guidance.
  • GC Design System tokens meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1) colour contrast standards for text and interactive elements and level AAA for both tap targets and visual presentation.

Help us improve

Have questions or a request? Give feedback on our contact form.

Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others.

Give feedback Report an issue on GitHub
2025-10-01