Theme and topic page mandatory template: Canada.ca design system
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="container">
<div class="row">
<div class="col-md-6">
<h1 property="name" id="wb-cont">[Theme - Topic title]</h1>
<p>1-2 sentences that describe the topics and top tasks that can be accessed on this page.</p>
</div>
<div class="col-md-6 mrgn-tp-sm hidden-sm hidden-xs provisional gc-topic-bg">
<div data-bgimg="img/825x200.jpg"></div>
</div>
</div>
</div>
<section class="well well-sm provisional gc-most-requested">
<div class="container">
<div class="row">
<div class="col-md-2">
<h2>Most requested</h2>
</div>
<div class="col-md-10">
<ul class="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>
<li><a href="#">[Top task hyperlink]</a></li>
</ul>
</div>
</div>
</div>
</section>
<div class="container">
<section class="gc-srvinfo">
<h2 class="wb-inv">Services and information</h2>
<div class="row wb-eqht-grd">
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text with action]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Use the following drop down to navigate to a relevant page.</p>
<div class="wb-fieldflow" data-wb-fieldflow='{"inline": true, "defaultselectedlabel": false, "i18n": { "btn": "Go"} }'>
<p>[Navigate to a relevant page]</p>
<ul>
<li><a href="../service-en.html">Service page</a></li>
<li><a href="../institutional/institution-en.html">Institutional page</a></li>
<li><a href="../content-en.html">Content page</a></li>
</ul>
</div>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
<div class="col-md-4">
<h3><a href="#">[Subtopic hyperlink text]</a></h3>
<p>Summary of the information or tasks that can be accomplished on the sub-topic page. Remove prose or promotional messaging. Use action verbs.</p>
</div>
</div>
</section>
<div class="row mrgn-tp-xl">
<div class="col-md-8">
<section class="gc-features">
<h2 class="wb-inv">Features</h2>
<div class="row">
<div class="col-md-6">
<img class="img-responsive thumbnail mrgn-bttm-sm" src="../../components/gc-features/img/feature-360x203.png" alt=""/>
</div>
<div class="col-md-6">
<h3 class="h5"><a class="stretched-link" href="#">[Feature hyperlink text]</a></h3>
<p>Brief description of the feature being promoted.</p>
</div>
</div>
</section>
</div>
<div class="col-md-4"><section class="provisional gc-followus">
<h2>On social media</h2>
<ul>
<li>
<a href="#facebook" class="facebook wb-lbx"><span class="wb-inv">Facebook: </span>FacebookPageName</a>
</li>
<li>
<a href="#" rel="external" class="twitter"><span class="wb-inv">Twitter: </span>@TwitterAccount</a>
</li>
<li>
<a href="#" rel="external" class="youtube"><span class="wb-inv">Youtube: </span>YouTubeName</a>
</li>
<li>
<a href="#" rel="external" class="instagram"><span class="wb-inv">Instagram: </span>InstagramName</a>
</li>
<li>
<a href="#" rel="external" class="linkedin"><span class="wb-inv">LinkedIn: </span>LinkedInName</a>
</li>
</ul>
</section>
<section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">
<header class="modal-header">
<h2 class="modal-title" id="lbx-title">Facebook</h2>
</header>
<div class="modal-body">
<ul class="list-unstyled lst-spcd">
<li>
<a href="#" rel="external">[First Facebook account title]</a>
</li>
<li>
<a href="#" rel="external">[Second Facebook account title]</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary pull-left popup-modal-dismiss">Close<span class="wb-inv">Close overlay</span></button>
</div>
</section>
</div>
</div>
<section class="provisional gc-contributors">
<h2>From:</h2>
<ul>
<li><a href="#">[Department or agency]</a></li>
<li><a href="#">[Department or agency]</a></li>
</ul>
</section>
</div>
CSS
.provisional.gc-topic-bg div {
background: no-repeat;
margin-left: -15px;
min-height: 200px;
overflow: hidden;
width: calc(50vw - 15px);
}
.provisional.gc-most-requested {
border: none;
}
.provisional.gc-most-requested h2 {
font-size: 1.1em;
margin-top: 15px;
}
.provisional.gc-most-requested ul {
margin-bottom: 15px;
margin-top: 15px;
}
.provisional.gc-most-requested ul li {
font-family: Lato,sans-serif;
font-size: 87%;
font-weight: 700;
line-height: 1.5em;
}
.provisional.gc-followus .facebook::before,.provisional.gc-followus .instagram::before,.provisional.gc-followus .linkedin::before,.provisional.gc-followus .twitter::before,.provisional.gc-followus .youtube::before {
background-repeat: no-repeat;
background-size: cover;
content: "";
height: 38px;
margin-right: 10px;
min-width: 38px
}
.provisional.gc-followus h2 {
font-size: 1.1em
}
.provisional.gc-followus ul {
display: block;
font-size: 87%;
font-weight: 700;
list-style: none;
-webkit-margin-before: 1em;
margin-block-start:1em;-webkit-padding-start: calc(1em + 6px);
padding-inline-start:calc(1em + 6px)}
.provisional.gc-followus ul li {
margin-bottom: 21px
}
.provisional.gc-followus ul li:last-child {
margin-bottom: 15px
}
.provisional.gc-followus ul li a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
line-height: 1.54;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
text-decoration: none
}
.provisional.gc-followus ul li a::before {
margin-right: 10px;
margin-top: -6px
}
.provisional.gc-followus ul li a:active,.provisional.gc-followus ul li a:focus,.provisional.gc-followus ul li a:hover {
text-decoration: underline
}
.provisional.gc-followus ul.list-inline {
-webkit-padding-start: 0;
padding-inline-start:0}
.provisional.gc-followus ul.list-inline li {
display: inline-block;
padding-right: 0
}
.provisional.gc-followus ul.list-inline li a {
height: 38px;
overflow: hidden;
width: 38px
}
.provisional.gc-followus ul.list-inline li a::before {
margin-top: 0
}
.provisional.gc-followus ul.list-inline li a:active,.provisional.gc-followus ul.list-inline li a:focus,.provisional.gc-followus ul.list-inline li a:hover {
outline: solid 2px #0535d2
}
.provisional.gc-followus .facebook::before {
background-image: url(../assets/gc-follow-us/facebook.svg)
}
.provisional.gc-followus .twitter::before {
background-image: url(../assets/gc-follow-us/twitter.svg)
}
.provisional.gc-followus .youtube::before {
background-image: url(../assets/gc-follow-us/youtube.svg)
}
.provisional.gc-followus .instagram::before {
background-image: url(../assets/gc-follow-us/instagram.svg)
}
.provisional.gc-followus .linkedin::before {
background-image: url(../assets/gc-follow-us/linkedin.svg)
}
.provisional.gc-contributors {
margin-top: 38px
}
.provisional.gc-contributors h2,.provisional.gc-contributors ul {
display: inline;
font-size: 87%;
margin-top: 0
}
.provisional.gc-contributors ul {
-webkit-padding-start: 0;
padding-inline-start:0}
.provisional.gc-contributors ul li {
display: inline-block;
font-weight: 700;
margin-right: .7em
}
@media screen and (max-width: 991px)
.provisional.gc-contributors ul {
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
@media screen and (max-width: 991px)
.provisional.gc-contributors h2, .provisional.gc-contributors ul {
display: block;
}
@media screen and (max-width: 991px)
.provisional.gc-contributors ul li {
display: list-item;
margin-right: 0;
}
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).
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
Page details
- Date modified: