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="ip-cover-img">
  <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="btn btn-call-to-action ip-btn" href="#">Super task button [optional]</a>
      </div>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
<section class="featured opct-90">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="wb-inv">Featured</h2>
        <a class="h5" href="#">Featured link [optional]</a>
      </div>
    </div>
  </div>
</section>
<section class="most-requested well well-sm brdr-0">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <h2 class="mrgn-tp-md">Most requested</h2>
        <ul class="wb-eqht list-unstyled mrgn-tp-md mrgn-bttm-sm lst-spcd-2 list-responsive-3">
          <!-- can use 'list-responsive' to get 4 column option -->
          <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 mrgn-bttm-lg">
  <div class="container">
    <div class="row">
      <h2 class="wb-inv">Services and information</h2>
      <div class="wb-eqht">
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <section class="col-md-4">
          <h3><a href="#">[Hyperlink text]</a></h3>
          <p>
            Use action verbs, or simply list keywords to summarize of the
            information or tasks that can be accomplished on the page it
            links to.
          </p>
        </section>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</section>
<div class="most-requested well well-sm brdr-0">
  <div class="container">
    <div class="row">
      <div class="wb-eqht">
        <h2 class="col-lg-3 h3">Contact us</h2>
        <span class="clearfix"></span>
        <section class="col-lg-4 col-sm-6">
          <h3 class="h5"><a href="#">Contact [Institution]</a></h3>
        </section>
        <section class="col-lg-4 col-sm-6">
          <h3 class="h5"><a href="#">[Top contact task 2]</a></h3>
        </section>
        <section class="col-lg-4 col-sm-6">
          <h3 class="h5"><a href="#">[Top contact task 3]</a></h3>
        </section>
      </div>
    </div>
    <div class="row">
      <section class="col-md-8 pull-left mrgn-bttm-lg">
        <h2 class="h3">About the [Institution]</h2>
        <div class="wb-eqht row">
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Mandate</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Organizational structure</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#" rel="external">Transparency</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#" rel="external">Job opportunities</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Reports</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Compliance</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Enforcement notifications</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Institutional link</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                <a href="#">Institutional link</a>
              </h3>
            </section>
          </div>
          <div class="col-md-6">
            <section>
              <h3 class="h5">
                More:
                <a href="#" rel="external">About the [Institution]</a>
              </h3>
            </section>
          </div>
        </div>
      </section>
      <div class="col-md-4 col-sm-5 pull-right mobile-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="followus experimental">
          <h2 class="mrgn-tp-lg h3">Follow us</h2>
          <ul>
            <li><a href="https://www.facebook.com/canrevagency" class="facebook" rel="external"><span class="wb-inv">Facebook</span></a></li>
            <li><a href="https://twitter.com/CanRevAgency" class="twitter" rel="external"><span class="wb-inv">Twitter</span></a></li>
            <li><a href="https://www.youtube.com/user/CanRevAgency" class="youtube" rel="external"><span class="wb-inv">YouTube</span></a></li>
            <li><a href="https://www.linkedin.com/company/cra-arc" class="linkedin" rel="external"><span class="wb-inv">LinkedIn</span></a></li>
          </ul>
        </section>
      </div>
    </div>
  </div>
</div>
<!-- News bar start -->
<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>
      <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">
        <div class="col-md-6 mrgn-bttm-md">
          <a class="hght-inhrt" href="#">
            <section class="well well-sm brdr-rds-0 hght-inhrt">
              <img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" />
              <h3 class="h5 mrgn-lft-sm">[Featured hyperlink text]</h3>
              <p class="mrgn-lft-sm">Brief description of the feature being promoted.</p>
            </section>
          </a>
        </div>
        <div class="col-md-6 mrgn-bttm-md">
          <a class="hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
            <section class="well well-sm brdr-rds-0 hght-inhrt">
              <img class="img-responsive full-width" alt="#" src="https://wet-boew.github.io/themes-dist/GCWeb/img/360x203.png" />
              <h3 class="h5 mrgn-lft-sm">[Featured hyperlink text]</h3>
              <p class="mrgn-lft-sm">Brief description of the feature being promoted.</p>
            </section>
          </a>
        </div>
      </div>
    </section>
  </div>
</div>
CSS
.ip-cover-img {
  background-image: url("https://test.canada.ca/experimental/working-on/images/ip-cover-image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  margin-top: 15px;
  padding-bottom: 25px;
}

.most-requested li {
  font-family: "Lato", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 26px;
  margin-top: 0
}

.most-requested h2 {
  font-size: 1.2em;
}

.ip-btn {
  font-size: 1em;
}

/* supports the 3 column layout for MR instead of 4 columns */
.list-responsive-3 > li {
  float: left;
  padding-right: 5px;
  width: 50%
}

.list-responsive-3 > li:nth-child(2n+2) {
  clear: right
}

.list-responsive-3:before,
.list-responsive-3:after {
  content: " ";
  display: table
}

.list-responsive-3:after {
  clear: both
}

.followus.experimental {
  background-color: #f5f5f5;
  padding: 0;
}

.followus.experimental h2 {
  display: block;
}

.followus.experimental h2,
.followus.experimental ul {
  margin-left: 0;
}

.followus.experimental ul li a {
  border: solid 2px #f5f5f5;
}

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

.featured a {
  color:#fff
}

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

@media screen and (max-width: 1200px) {
  .featured {
    padding-left:.8em;
  }
}

@media screen and (min-width: 1200px) {
  .list-responsive-3 > li {
    width: 33%;
  }
}

@media screen and (max-width: 767px) {
  .btn-call-to-action {
    font-size: 19px !important;
  }

  .most-requested li {
    font-size: 19px;
  }

  .list-responsive-3 > li {
    clear: right;
    width: 100%
  }

  .mobile-left {
    float: left !important;
  }

  .ip-cover-hide-mobile {
    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

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

Discussion

Discuss the template in github issues

Date modified: