Institutional landing page - Canada.ca mandatory template
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:
- mandate and organizational structure
- contact information
- news and promotions
- reports and publications
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
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
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
-
Content
- this component is mandatory for all institutions listed under Schedule I of the FAA; otherwise, it is optional
- use the Social media channels block (follow box) pattern
-
Presentation
- appears to the right of the institutional mandate
5: Latest news
Conditional
Features current news items related to the institution
-
Content
- this component is mandatory for all institutions listed under Schedule I of the FAA; otherwise, it is optional
- use the Latest news pattern
-
Presentation
- appears below “Institutional social media channels”
6: Services and information
Mandatory
Lists the institution-specific topics or top tasks
-
Content
- use the Link and description pattern
-
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
- go to Contact information - use either the contact address pattern or contact links pattern
-
Presentation
- appears below “Latest news” and to the right of “Services and information”
9: More information for
Optional
Links to related audience information
-
Content
- use the More information for pattern
-
Presentation
- appears below “Most requested”
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
-
- mandatory, if content exists (see Institutional service performance reporting pages)
- links to a landing page for institution-specific 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
-
Content
- use the Context-specific features component
-
Presentation
- heading is labelled “Features”
How to use the arms-length branding
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
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
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.
Latest changes
2020-07-23:
- Front-end code review, creating changes to overall HTML/CSS
- Remove opacity from featured link for contrast
- Improvements to background image layout
2020-07-13:
- Changes to fix accessibility issues
- Most requested pattern updated to bullets
- Changes to doormat columns in tablet view
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
- Date modified: