Last updated: {{ page.dateModified }}
+Latest news is a pattern to display the most recent Government of Canada newsroom items directly associated with the content of the page.
+- The Latest news pattern features the most recent news items posted by the institution, organization or entity. -
-- Use this pattern on the following templates: -
-- Make sure this pattern doesn't get in the way of top task content. -
-- You can use either the - - beta - - or the - - stable - - version of this pattern. -
-- 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. -
-- More: - - [Institution] news - -
-
- <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>Use the latest news pattern to offer news items that directly relate to your page content or your organization.
+Don’t use this pattern if your organization doesn’t regularly issue news.
+Don't use this pattern to display news by a different organization or for unrelated content.
+Don’t use this pattern to display Features, which is a type of promotional product, not news.
+Don’t use this pattern on navigational pages.
+Don’t use this pattern when you want people to stay on the page and do their task.
+The label for the heading is “News” in English and “Nouvelles” in French.
+Include three news items, followed by the link “More:” that directs people to the full newsroom feed, such as “More: [Institution] news”. Use descriptive link text so it's clear where the user will go if they click on the link.
+Each news item is formatted in the following manner:
- The beta version will eventually replace the stable version.
+ [link to news release]
+ [YYYY-MM-DD HH:MM]
-
+ + A heading, News, is followed by three links. Each link title is [News title]. Under each link is a placeholder for the date and time, presented as YYYY-MM-DD HH:MM. Below the list of links and dates there is a line that + says More: [Institution] news. +
+Find working examples and code for implementing the latest news pattern.
+The implementation reference includes how to configure elements of the design system.
+Determine what best suits the type of page you're creating.
+For the Government of Canada Adobe Experience Manager (AEM):
+ +The latest news pattern is an optional pattern for the following mandatory templates:
+ +