Language selection

Theme and topic page - Canada.ca mandatory template

From: Treasury Board of Canada Secretariat

Mandatory

Theme and topic pages provide access to topics and destination pages that support task completion.

Theme and topic pages:

On this page

When to use

This template must be used for the theme page and the first 2 levels of topics of each theme in the Canada.ca topic tree.

It is optional for lower-level topics.

What to avoid

Pages where people can initiate a task should be considered destination content, and should not use the theme and topic page template

The theme and topic page template should not be used for promotion; instead, use Promotional events pages or Campaign pages.

How to implement

You can use either the beta or the stable version of this template.

Beta theme and topic page

The beta version is an improvement over the stable version. The code is still under review. It may still be subject to changes.

The beta version will eventually replace the stable version.

You will need to apply custom CSS to use this beta version.

Beta theme and topic page

Beta template with guidance

Code
HTML
<div class="provisional profile">
  <div class="container">
    <div class="row">

      <!-- change col-md-6 to col-md-12 if not using an image -->
      <div class="intro col-md-6 col-sm-12 mrgn-bttm-md">
        <h1 property="name" id="wb-cont">[Theme - Topic title]</h1>
        <p class="pagetag">1-2 sentences that describe the topics and top tasks that can be accessed on this page.</p>
      </div>

      <!-- remove this div if you do not want an image -->
      <div class="col-md-6 pstn-rght-md pstn-bttm-md hidden-sm hidden-xs">
        <img alt="#" src="./images/theme-topic-img-825x200.jpg" />
      </div> <!-- end of the image div -->
    </div>
  </div>
</div>

<!-- remove 'mrgn-tp-0' class if you are not using an image -->
<section class="provisional most-requested-bullets well well-sm brdr-0 mrgn-tp-0" >
  <div class="container">
    <div class="row">
      <div class="pddng-r-0 col-md-2">
        <h2 class="mrgn-tp-md">Most requested</h2>
      </div>
      <div class="col-md-10">

        <!-- change to colcount-md-1 if you only have 2-3 most requested items -->
        <ul class="wb-eqht mrgn-tp-md mrgn-bttm-md colcount-md-2">
          <li><a href="#">[Top task hyperlink]</a></li>
          <li><a href="#">[Top task hyperlink]</a></li>
          <li><a href="#">[Top task hyperlink]</a></li>
          <li><a href="#">[Top task hyperlink]</a></li>
          <li><a href="#">[Top task hyperlink]</a></li>
          <li><a href="#">[Top task hyperlink]</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>
<div class="container">
  <div class="row">

    <!-- showing the basic doormat pattern - refer to the Services and information documentation for options -->
    <section class="gc-srvinfo col-md-12">
      <h2 class="wb-inv">Services and information</h2>
      <div class="wb-eqht row">
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it links to.</p>
        </div>
        <div class="col-lg-4 col-md-6">
          <h3><a href="#">[Topic hyperlink text]</a></h3>
          <p>Use action verbs, or simply list keywords to summarize the information or tasks that can be accomplished on the page it
          links to.</p>
        </div>
      </div>
    </section>
  </div>
</div>

<!-- optional section: One feature and social media - design is flexible -->
<div class="provisional gc-prtts mrgn-tp-md">
  <div class="container">
    <div class="row">
	  <section class="provisional single-feature col-md-8 mrgn-bttm-md mrgn-tp-lg">
		<h2 class="wb-inv">Feature</h2>
        <a href="#">
          <figure class="row">
            <figcaption class="pull-right col-md-6 col-xs-12">[Feature hyperlink text]</figcaption>
            <div class="pull-left col-md-6 col-xs-12">
              <img src="./images/feature-img-360x203.jpg" alt="" class="img-responsive thumbnail mrgn-bttm-sm">
            </div>
            <div class="pull-right col-md-6 col-xs-12">
              <p>Brief description of the feature being promoted.</p>
            </div>
          </figure>
        </a>
      </section>

      <!-- remove this section if not including social media information -->
      <section class="col-md-4 mrgn-bttm-sm">
        <div class="provisional followus followus-vertical">
          <h2>On social media</h2>
          <ul>
            <li class="facebook"><a href="#" rel="external" class="social-lnk"><b>FacebookPageName</b></a></li>
            <li class="twitter"><a href="#" rel="external" class="social-lnk"><b>@TwitterAccount</b></a></li>
            <li class="youtube"><a href="#" rel="external" class="social-lnk"><b>YouTubeName</b></a></li>
            <li class="instagram"><a href="#" rel="external" class="social-lnk"><b>InstagramName</b></a></li>
          </ul>
        </div>
      </section> <!-- end of social media div -->
    </div>
  </div>
</div>

<!-- optional section: Contributors-->
<div class="container">
  <div class="row">
    <h2 class="wb-inv">Contributors</h2>
    <div class="row">
      <section class="col-md-12">
        <div class="col-md-1">
          <h3 class="provisional from">From:</h3>
        </div>
        <div class="provisional contributors col-md-11">
          <ul>
            <li><a href="">[Department or agency]</a></li>
          </ul>
        </div>
      </section>
    </div>
  </div>
</div>
CSS


.provisional.profile {
	position: relative;
	overflow-x: hidden;
}

.provisional.profile .pagetag {
	max-width: 65ch;
}

.provisional.single-feature figcaption {
	margin-top: 5px;
	text-decoration: underline;
}

.provisional .thumbnail {
	border-color: #335075;
	border-width: 1px;
	padding: 0px;
}

.provisional.contributors {
	font-size: 16px;
	font-weight: 600;
}

.provisional.from {
	font-size: 17px;
	margin-top: 7px;
}

.provisional.contributors ul {
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: -50px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}

.provisional.most-requested-bullets li {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 26px;
	margin-top: 0
}

.provisional.most-requested-bullets .pddng-r-0 {
	padding-right: 0px;
}

.provisional.most-requested-bullets h2 {
	font-size: 1.2em;
}

.provisional.list-bld {
	font-weight: 600;
}

.provisional.followus h2 {
	font-size: 1.1em;
	margin-top: 10px;
}

.provisional.followus {
	padding: 0;
}

.provisional.followus h2 {
	display: block;
}

.provisional.followus h2,
.provisional.followus ul {
	margin-left: 0;
}

.provisional.followus-vertical {
	line-height: 0em;
}

.provisional.followus-vertical,
.provisional.followus {
	background-color: transparent;
}

.provisional.followus-vertical a {
	text-decoration: none;
}

.provisional.followus-vertical ul {
	display: block;
	list-style-type: none;
	margin-block-start: 1em;
	padding-inline-start: 1em;
	font-size: 16px;
	margin-block-end: 0em;
}

.provisional.followus-vertical ul li {
	margin-bottom: 15px;
}

.provisional.followus-vertical ul li:last-child {
	margin-bottom: 0px;
}

.provisional.followus-vertical ul li a {
	border: none;
	padding: 0px 5px;
}

.provisional.followus ul li a {
	border: none;
}

.provisional .social-lnk {
	position: relative;
	bottom:-18px;
	left:45px;
}

.provisional.followus-vertical li {
	display: block;
	background-position: left;
}

.provisional.followus .facebook,
.provisional.followus .twitter,
.provisional.followus .youtube,
.provisional.followus .instagram {
	display: block;
	height: 38px;
	width: 38px;
}
/* remove this section if you do not want the new icons */

.provisional.followus .facebook {
	background: url("https://design.canada.ca/images/social-media/facebook.png") 0 0 / cover no-repeat;
}
.provisional.followus .twitter {
	background: url("https://design.canada.ca/images/social-media/twitter.png") 0 0 / cover no-repeat;
}
.provisional.followus .youtube {
	background: url("https://design.canada.ca/images/social-media/youtube.png") 0 0 / cover no-repeat;
}
.provisional.followus .instagram {
	background: url("https://design.canada.ca/images/social-media/instagram.png") 0 0 / cover no-repeat;
}
.provisional.followus .linkedin {
	background: url("https://design.canada.ca/images/social-media/linkedin.png") 0 0 / cover no-repeat;
}
/* end of new social media icons */

@media screen and (min-width: 991px) {
	.provisional.contributors li {
		display: inline-block;
		margin-right: .7em;
	}
	.provisional.contributors li:first-child:before {
		content: none;
	}
	.provisional.contributors li:before {
		content: "\2022";
		margin-right: .7em;
	}
}

@media screen and (max-width: 1200px) {
	.provisional.contributors ul {
		margin-inline-start: -30px;
	}
}

@media screen and (max-width: 991px) {
	.provisional.most-requested-bullets li {
		font-size: 19px;
	}
	.provisional.contributors ul {
		margin-inline-start: 1.5em;
	}
}

Stable theme and topic pages

The beta version will eventually replace this stable version.

Guidance for the stable theme page
Theme page template
Template of theme page showing sections that make up its structure. Read top to bottom and left to right. Specifications detailed below.

1: Theme title

Mandatory

Describes the theme and page content

  • Presentation
    • theme title must be a unique H1
    • must be the first component on the page

2: Theme introductory paragraph

Mandatory

Describes the top tasks and topics that can be accessed on this page

  • Content
    • provides an overview of all top tasks that can be accomplished on the given theme
    • keep the text short and concise
    • written for a grade 6-8 reading level
  • Presentation
    • appears below the theme title
    • appears to the left of the theme carousel

3: Theme carousel

Optional

Features theme-specific top tasks and topic information that is timely and relevant

  • Content
  • Presentation
    • appears at the top of the page
    • appears to the right of the theme introductory paragraph

4: Theme social media channels

Conditional

Features theme-specific social media channels

  • Content
  • Presentation
    • appears below the theme introductory paragraph

5: Services and information

Mandatory

Features theme-specific topics

  • Content
  • Presentation
    • appears below the theme social media channels and to the left of “Most requested”
    • heading is labelled “Services and information”

6: Most requested

Mandatory

Features theme-specific top tasks

  • Content
  • Presentation
    • appears to the right of “Services and information”
    • heading is labelled “Most requested”

7: More information for

Conditional

Links to related government-wide audience information

  • Content
    • this component is mandatory when there is 1 or more theme-related government-wide audience page or audience topic page that exist
    • use the More information for pattern
  • Presentation
    • appears below “Most requested”
    • heading is labelled “More information for”

8: Theme features

Mandatory

Promotes theme-specific current activities being led by departments and agencies across the GC

Working examples

Canada.ca is organized around 15 themes, based on an analysis of top tasks (most requested information and services) across the Government of Canada.

While the themes emphasize top tasks related to information and service delivery, they also provide a window into activities of the Government of Canada that are undertaken to support programs and services (for example, research, consultation, policy development).

User navigation diagram
Diagram of how to navigate to theme pages on Canada.ca. Text version below:
Text version

Theme pages can be accessed from the Canada.ca home page.

Guidance for the stable topic page
Topic page template
Template of topic page showing sections that make up its structure. Read top to bottom and left to right. Specifications detailed below.

1: Topic title

Mandatory

Names the current topic

  • Presentation
    • the topic title must be a unique H1
    • it must be the first component on the page

2: Topic introductory paragraph

Mandatory

Describes the current topic page

  • Content
    • provides an overview of the top tasks or sub-topics that can be accessed from the current topic
    • keep the text short and concise
    • written for a grade 6-8 reading level
  • Presentation
    • appears below the topic title
    • appears to the left of the topic image

3: Topic image

Optional

Supports and enhances key messages related to the topic page

  • Content
    • the image must reflect key messages related to the topic
    • the image may appear elsewhere on the site
    • carousels are not allowed on topic pages
    • use the Images pattern
  • Presentation
    • the topic image appears at the top of the page
    • appears to the right of the introductory paragraph
    • the image is not hyperlinked
    • consult the Canada.ca GitHub page for image sizing

4: Topic social media channels

Optional

Features topic-specific social media channels

5: Services and information

Mandatory

Lists the sub-topics and destination content related to the current topic

  • Content
  • Presentation
    • appears below the topic social media channels and to the left of “Most requested”

6: Most requested

Mandatory on theme pages and first-level topic pages

Features top tasks for the current topic

  • Content
  • Presentation
    • appears to the right of “Services and information”

7: Contributors

Mandatory

Links to institutions that support the current topic

  • Content
  • Presentation
    • appears below “Most requested”

8: More information for

Conditional

Links to related government-wide audience information

  • Content
    • this component is mandatory when there are 1 or more doormat links in services and information related to the topic government-wide audience pages
    • use the More information for pattern
  • Presentation
    • appears below “Contributors”

9: What we are doing

Conditional

Provides links to program and policy development content that is most relevant to the current topic

  • Content
    • this component is mandatory when program and policy development content related to the current topic exists
    • use the What we are doing pattern
  • Presentation
    • appears below “Services and information” and “Most requested”

10: Topic features

Optional

Promotes ongoing activities being led by departments and agencies across the GC that are related to the current topic

Research

We successfully tested the new beta theme and topic page during an optimization project with Public Services and Procurement Canada (research summary to come later).

Latest changes

2020-07-10:

2020-06-30: a new beta version of this template was added

Discussion

Discuss the template in GitHub issues

Date modified: