Latest news - Canada.ca design pattern

The Latest news pattern features the most recent news items posted by the institution, organization or entity.

On this page

When to use

Use this pattern on the following templates:

What to avoid

Make sure this pattern doesn't get in the way of top task content.

How to implement

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

Beta latest news

The beta version is used on the institutional landing page. The code is still under review. It may still be subject to minor changes.

The beta version will eventually replace the stable version.

Code
<div class="row col-lg-12">
<section class="col-md-4 wb-feeds limit-3 gc-nws">
 <h2 class="h3">News</h2>
<!-- demonstrates the layout - 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">
   <div class="col-md-6 mrgn-bttm-md">
    <a class="figcaption hght-inhrt" href="#">
     <figure 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">
      <figcaption class="h5">[Featured hyperlink text]</figcaption>
        <p>Brief description of the feature being promoted.</p>
        </figure>
       </a>
      </div>
    <div class="col-md-6 mrgn-bttm-md">
     <a class="figcaption hght-inhrt" href="https://www.canada.ca/en/revenue-agency/campaigns/my-benefits-credits.html">
     <figure 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">
      <figcaption class="h5">[Featured hyperlink text]</figcaption>
      <p>Brief description of the feature being promoted.</p>
        </figure>
     </a>
     </div>
    </div>
  </section>
 </div>
</div>

Stable latest news

The beta version will eventually replace the stable version.

Guidance for the latest news stable version
  • It features the most recent news items posted by the entity
  • The heading is labelled “Latest”
  • 2 of the featured news items must include an image, a headline hyperlink, additional information and a description text:
    • can include promotional content, and be prioritized at the institution’s discretion
    • keep description text short and concise
  • The types of news products that must be listed as text-only are limited to only those available through news.gc.ca:
    • media advisories
    • backgrounders
    • news releases
    • speeches
    • statements
  • Consult the Canada.ca GitHub page for details on image sizing

Working example

Examples

Latest news pattern: 2 images
Screenshot illustrating the latest news pattern with 2 images on Canada.ca. Details on this graphic can be found in the surrounding text.

Discussion

Discuss the pattern in github issues

Date modified: