Theme and topic page - Canada.ca mandatory template
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
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
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

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

Text version
Theme pages can be accessed from the Canada.ca home page.
Guidance for the stable topic page

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
- Date modified: