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:

provide support for theme navigation rather than institutional navigation of government-wide content (see How people find tasks: theme and institutional navigation)
prioritize content and navigation by presenting the most visited information and services first

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

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

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
- use the Carousels pattern
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
- this component is mandatory when there is 1 or more theme related social media channels that exist
- use the Social media channels block (follow block) pattern
Presentation
- appears below the theme introductory paragraph

5: Services and information

Mandatory

Features theme-specific topics

Content
- use the Services and information pattern
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
- use the Most requested pattern
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

Content
- use the Context-specific features pattern
Presentation
- appears below “Services and information”

Working examples

English working example (on GitHub)
French working example (on GitHub)

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).

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

Guidance for the stable topic page

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

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

Content
- use the Social media channels block (follow block) pattern
Presentation
- appears below the topic introductory paragraph

5: Services and information

Mandatory

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

Content
- use the Services and information pattern
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
- use the Most requested pattern
Presentation
- appears to the right of “Services and information”

7: Contributors

Mandatory

Links to institutions that support the current topic

Content
- use the Contributors pattern
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

Content
- use the Context-specific features pattern
Presentation
- appears below “What we are doing”

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:

Changes to doormat columns in tablet view
Clarify social media account guidance

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

Discussion

Discuss the template in GitHub issues

Did you find what you were looking for?

What was wrong?

I can't find the information

The information is hard to understand

There was an error or something didn't work

Other reason

Please provide more details

You will not receive a reply. Telephone numbers and email addresses will be removed.
Maximum 300 characters

Date modified:: 2020-06-30

Language selection

Search

Theme and topic page - Canada.ca mandatory template

On this page

When to use

What to avoid

How to implement

Beta theme and topic page

Stable theme and topic pages

1: Theme title

2: Theme introductory paragraph

3: Theme carousel

4: Theme social media channels

5: Services and information

6: Most requested

7: More information for

8: Theme features

Working examples

User navigation

1: Topic title

2: Topic introductory paragraph

3: Topic image

4: Topic social media channels

5: Services and information

6: Most requested

7: Contributors

8: More information for

9: What we are doing

10: Topic features

Research

Latest changes

Discussion

Did you find what you were looking for?