Institutional landing page - Canada.ca mandatory template

From: Treasury Board of Canada Secretariat

Mandatory

Use this template as the landing page for Government of Canada institutions and organizations.

The purpose of this page is to enable people to find information and services offered by that institution, with a focus on top tasks.

It should also allow people to find all the other content owned by that institution, including:

On this page

When to use

All Government of Canada institutions and organizations subject to the Directive on the Management of Communications must use this template as their landing page.

Consult the Canada.ca Institutions list for the full list.

What to avoid

Only use this template as the landing page of official institutions and organizations from the Canada.ca Institutions list.

Don't use this template for specific programs or entities that are not official institutions or organizations of the Government of Canada.

How to implement

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

Beta institutional landing 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 institutional landing page

Template with guidance

Code
HTML

<div class="provisional bg-cover bg-right bg-hide-sm bg-hide-xs mrgn-tp-md pb-3" data-bgimg="put your image link here">
				<div class="container">
					<div class="row">
						<div class="col-md-7">
							<h1 property="name" id="wb-cont">[Institution name]</h1>
							<p>Short description of the institution’s mandate.</p>
							<a class="provisional btn btn-call-to-action" href="#">Super task button [optional]</a>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<section class="provisional gc-featured-lnk">
				<div class="container">
					<h2 class="wb-inv">Featured link</h2>
					<a class="h5" href="#">Featured link [optional]</a>
				</div>
			</section>
			<section class="provisional most-requested-bullets well well-sm brdr-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">
							<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>
			<section class="gc-srvinfo col-md-12 mrgn-bttm-lg">
				<div class="container">
					<div class="row">
						<h2 class="wb-inv">Services and information</h2>
						<div class="wb-eqht">
							<div class="col-lg-4 col-md-6">
								<h3><a href="#">[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="#">[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="#">[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="#">[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="#">[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="#">[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="#">[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="#">[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="#">[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="clearfix"></div>
						</div>
					</div>
				</div>
			</section>
			<div class="clearfix"></div>
			<section class="well well-sm brdr-0 mrgn-bttm-0">
				<div class="container">
					<div class="wb-eqht">
						<h2 class="h3 mrgn-tp-md">Contact us</h2>
						<ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-3">
							<li><a href="#">Contact [Institution]</a></li>
							<li><a href="#">[Top contact task 2]</a></li>
							<li><a href="#">[Top contact task 3]</a></li>
						</ul>
					</div>
					<div class="row">
						<section class="col-md-8 pull-left mrgn-bttm-lg">
							<h2 class="h3 mrgn-tp-md">About the [Institution]</h2>
							<ul class="provisional list-bld list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2">
								<li><a href="#">Mandate</a></li>
								<li><a href="#">Organizational structure</a></li>
								<li><a href="#">Transparency</a></li>
								<li><a href="#">Job opportunities</a></li>
								<li><a href="#">Reports</a></li>
								<li><a href="#">Compliance</a></li>
								<li><a href="#">Enforcement notifications</a></li>
								<li><a href="#">[Institutional link]</a></li>
								<li><a href="#">[Institutional link]</a></li>
								<li>More: <a href="#">About the [Institution]</a></li>
							</ul>
						</section>
						<div class="provisional col-md-4 col-sm-5 pull-right xs-left">
							<section class="lnkbx">
								<h2 class="h3">Minister</h2>
								<p>
									<a href="#">[(Honourable) first and last name]</a><br>
									<small>Minister's official title</small>
								</p>
								<p>
									<a href="#">[(Honourable) first and last name]</a><br>
									<small>Minister's official title</small>
								</p>
								<p>
									<a href="#">[(Honourable) first and last name]</a><br>
									<small>Minister's official title</small>
								</p>
							</section>
							<section class="provisional followus">
								<h2 class="mrgn-tp-lg h3">Follow us</h2>
								<ul>
									<li><a href="#" class="facebook" rel="external"><span class="wb-inv">Facebook</span></a></li>
									<li><a href="#" class="twitter" rel="external"><span class="wb-inv">Twitter</span></a></li>
									<li><a href="#" class="youtube" rel="external"><span class="wb-inv">YouTube</span></a></li>
									<li><a href="#" class="linkedin" rel="external"><span class="wb-inv">LinkedIn</span></a></li>
								</ul>
							</section>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</section>
			<div class="container">
				<div class="row">
					<section class="col-md-4 wb-feeds limit-3 gc-nws">
						<h2 class="h3">News</h2>
						<!-- demonstrate the look - use json feed where applicable -->
						<ul class="feeds-cont list-unstyled lst-spcd feed-active">
							<li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
							<li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
							<li><a href="#">[News title]</a><br> <small class="feeds-date">YYYY-MM-DD HH:MM</small></li>
						</ul>
						<!-- json feed for news example
						<ul class="feeds-cont list-unstyled lst-spcd">
							<li> <a data-ajax="https://www.canada.ca/content/canadasite/api/nws/fds/en/web-feeds/revenue-agency.json" href="https://www.canada.ca/en/revenue-agency.atom.xml" rel="external">Canada Revenue Agency news items</a> </li>
						</ul>-->
						<p>More: <a href="#" class="admin">[Institution] news</a></p>
					</section>
					<section class="col-md-8 gc-prtts">
						<h2 class="h3">Features</h2>
						<div class="row wb-eqht gc-srvinfo">
							<div class="col-sm-6">
								<div class="well well-sm brdr-rds-0 eqht-trgt">
									<img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt="">
									<h3 class="h5"><a href="#" class="stretched-link">[Feature hyperlink text]</a></h3>
									<p>Brief description of the feature being promoted.</p>
								</div>
							</div>
							<div class="col-sm-6">
								<div class="well well-sm brdr-rds-0 eqht-trgt">
									<img class="img-responsive full-width" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" alt="">
									<h3 class="h5"><a href="#" class="stretched-link">[Feature hyperlink text]</a></h3>
									<p>Brief description of the feature being promoted.</p>
								</div>
							</div>
						</div>
					</section>
				</div>
			</div>
CSS

.provisional.bg-cover {
	background-size: cover;
}

.provisional.bg-right {
	background-position: right;
}

.provisional.pb-3 {
	padding-bottom: 15px;
}

.provisional.btn-call-to-action {
	font-size: 1em;
}

.provisional.gc-featured-lnk {
	background: #31708f;
	margin-bottom: 0em;
	padding-top:20px;
	padding-bottom:20px;
}

.provisional.gc-featured-lnk a {
	color:#fff
}

ul.feeds-cont li a {
	font-weight: bold;
}

.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,
.provisional.followus .linkedin {
	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 (max-width: 767px) {
	.provisional.bg-hide-xs {
		background-image: url("none") !important;
	}

	.provisional.btn-call-to-action {
		font-size: .9em;
	}

	.provisional.xs-left {
		float: left !important;
	}
}

@media (min-width:768px) and (max-width:991px) {
	.provisional.bg-hide-sm {
		background-image: url("none") !important;
	}
}

Stable institutional landing page

The beta version will eventually replace this stable version.

Guidance for the stable institutional landing page

Profile page

Profile page template
Template of institutional profile page for large institutions showing sections that make up its structure. Read top to bottom and left to right. Specifications detailed below.

1: Institution name

Mandatory

Provides the applied title of the institution

  • Content
    • use the applied title of the institution, as specified in the Registry of Applied Titles
    • use the legal title if the applied title is not available
    • do not use acronyms or abbreviations
  • Presentation
    • institutional profile title must be a unique H1
    • must be the first component on the page

2a: Insignia

Conditional

Provides identification of the Royal Canadian Mounted Police

  • Content
    • this component is only allowed for the Royal Canadian Mounted Police, to display their primary approved insignia
  • Presentation
    • the insignia appears to the right of the institutional mandate
    • the image is not hyperlinked

3: Institutional mandate

Mandatory

Provides 1 or 2 sentences that describe the institution’s mandate

  • Content
    • lists the applied title of the institution followed by a brief, plain language overview of how the institution serves the public
    • keep the text short and concise
    • written for a grade 6-8 reading level
  • Presentation
    • the institutional mandate appears directly below the institutional profile page title

4: Institutional social media channels

Conditional

Features institution-specific social media channels

5: Latest news

Conditional

Features current news items related to the institution

  • Content
  • Presentation
    • appears below “Institutional social media channels”

6: Services and information

Mandatory

Lists the institution-specific topics or top tasks

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

7: Most requested

Conditional

Features institution-specific top tasks

  • Content
    • this component in mandatory to provide shortcuts to the institution's top tasks. However, it should not be used if all of the institution's top tasks are already included as direct links under Services and information.
    • use the Most requested pattern
  • Presentation
    • appears to the right of “Services and information”

8: Contact us

Mandatory

Provides access to institutional contact information

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

9: More information for

Optional

Links to related audience information

10: What we are doing

Conditional

Provides links to the institution’s program and policy development content

  • Content
    • this component is mandatory when the institution has program and policy development content to present
    • use the What we are doing pattern
  • Presentation
    • appears below “Services and information”

11: Corporate information

Mandatory

Provides consistent access to key corporate information

  • Content
    • consists of a series of links to institution-specific content not presented elsewhere on the page
    • heading is labelled “Corporate information”
    • only the “Mandate” and “Transparency” links are mandatory; all other links are optional
    • links must be labelled and ordered as follows:
      Mandate
      • mandatory
      • links to a page providing the institution’s mandate, vision and objectives
      Programs
      • optional
      • links to a page providing the institution’s list of programs
      Organizational structure
      • optional
      • links to a page providing the institution’s organizational chart or structure
      Portfolio
      • optional
      • links to a page providing the institution’s ministerial portfolio
      Partners
      • optional
      • links to a page providing the institution’s existing formal partnerships (for example, federal/provincial/territorial, international or non-governmental organizations)
      Transparency
      • mandatory
      • links to institution-specific transparency information prescribed by the Treasury Board of Canada Secretariat, such as forward regulatory plans and proactive disclosure
      Job opportunities
      • optional
      • links to a landing page for institution-specific job opportunities
      Service performance reporting
  • Presentation
    • appears above “Features”

12a: Minister of a department or head of a quasi-judicial arm’s-length institution

Conditional

Provides a single profile for each GC minister or institutional head

  • Content
    • this component is mandatory for all institutions, unless you are using the portfolio ministers component (12b)
    • includes hyperlinked images of either an institution’s minister(s), including associate minister(s), or its institutional head (in the case of arm’s-length or quasi-judicial institutions).
      • no other individuals may be displayed on the institutional profile
    • images and texts are hyperlinked to the appropriate ministerial profile page (see Ministerial profile pages)
    • the hyperlink text is limited to the minister’s or institutional head’s honorific (“The Honourable”) and first and last name
    • non-hyperlinked text is limited to the minister’s or institutional head’s official title
    • the following headings must be presented above the appropriate elected official:
      • “Minister”
      • “Parliamentary secretary”
      • “Associate minister”
    • the heading of “Management” or “Ombudsman”, must be presented, as appropriate, above the senior-most public servant who is the institutional head
  • Presentation
    • appears to the right of “Corporate information”
    • priority sequencing is from left to right
    • when more than 3 images are required, continue the list on a second row
    • when fewer than 3 images are required, the image must be left-aligned to the corporate information block
    • go to the Canada.ca GitHub page for image sizing details

13: Institution features

Optional

Promotes institution-specific current activities being led by the institution

How to use the arms-length branding

Arm’s length branding example
Image of arm’s-length identification showing components that make up its structure. Read top to bottom and left to right. Specifications detailed below.

2b: Arm’s-length branding

Conditional

Displays approved identifier for institutions that meet the criteria for Arm’s Length

  • Content
    • this component is conditional. Only institutions categorized as administrative tribunals under the rules for Governor in Council appointments have the option to display their approved brand identification
    • institutions categorized as agencies or boards that have a core mandate to make binding decisions or rulings may also have the option to display their approved, primary brand identification, as determined on a case-by-case basis by central agencies
    • the branding must follow the Federal Identity Program (FIP) rules for identifying federal institutions
  • Presentation
    • the arm’s-length branding appears at the top of the page
    • the image must be formatted according to FIP design specifications, where applicable (i.e. for institutions not exempt from FIP)
    • the image must be configured to scale automatically to screen size (SVG is the recommended format), in line with responsive web design
    • the image is not hyperlinked

3a: Arm’s-length statement

Conditional

Explains the arm’s-length nature of the institution

  • Content
    • this component is conditional. Only institutions categorized as administrative tribunals under the rules for Governor in Council appointments have the option to include the arm’s length statement
    • institutions categorized as agencies or boards that have a core mandate to make binding decisions or rulings may also have the option to include this statement, as determined on a case-by-case basis by central agencies
    • the statement gives a concise explanation of the autonomous nature of the arm’s-length institution
  • Presentation
    • it is presented in boldface

How to use the portfolio ministers pattern

Portfolio ministers example
Image of portfolio ministers component showing elements that make up its structure. Read top to bottom and left to right. Specifications detailed below.

12b: Portfolio ministers

Optional

Provides access to the profiles of all portfolio ministers under the institution’s portfolio

  • Content
    • must not be used when a minister or institutional head is listed under “Corporate information” (see 12a)
    • can only be used when 3 or more ministers are presented
    • it provides hyperlinked images of an institution’s minister(s)
      • no other individuals can be displayed on the institutional profile
    • images and texts are hyperlinked to the appropriate ministerial profile page (see Ministerial profile pages)
    • hyperlink text is limited to minister’s honorific, first and last name only: Honourable [name of minister]
    • non-hyperlinked text is limited to the minister’s official title
  • Presentation
    • appears above “Corporate information”
    • priority sequencing is from left to right
    • when more than 3 images are required, continue the list on a second row
    • go to the Canada.ca GitHub page for image sizing details

How to use the portfolio organizations pattern

Portfolio organizations example
Image of portfolio organizations component showing elements that make up its structure. Read top to bottom and left to right. Specifications detailed below.

14: Portfolio organizations

Optional

Provides navigation to portfolio organizations within the institution

  • Content
    • lists all portfolio organizations under an institution
    • heading is labelled “Portfolio organizations”
    • links must be directed to an organizational profile page (see Organizational profile pages)
  • Presentation
    • appears below “What we are doing”

Research

We succesfully tested the new beta institutional landing page during 2 optimization projects with the Canada Revenue Agency.

Research summary: Contact the CRA

Latest changes

2020-07-23:

2020-07-13:

2020-03-05: added an optional CSS class to hide the top image in tablet view

2019-11-28: a new beta version of this template was added

Discussion

Discuss the template in github issues

Date modified: