Language selection

Government of Canada / Gouvernement du Canada

Search

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:

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.

</img>

Beta theme and topic page

Beta template with guidance

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

Page details

Date modified: