Documentation about News template

Status

Stable

Type

Canada.ca template

Last review

2024-12-19

Conforming to

Content and IA spec 3.0

Specification

News pages - Canada.ca mandatory template

Template version

Version 4.0

Available instances

https://www.canada.ca/en/news.html

https://www.canada.ca/fr/nouvelles.html

Working example

News landing page template - Version 4.0

List of changes

• Version 4.0:
  • Changed paragraph above news items.
  • Added basic HTML list of links.
  • Changed paragraph below news items.
• Version 3.0:
  • Removal of the promotions section at the top of the page.
  • Addition of introduction text to the left of the Follow section.
  • Addition of randomized functionality for the three items in the features section.
  • Update of the advanced search link URL.

Previous version

Version 3.0

News landing page template - Version 3.0

Transition from version 3.0 to 4.0

• Change paragraph above news items from:
  

  <p>To access all articles, please visit the <a href="https://www.canada.ca/en/news/advanced-news-search/news-results.html">advanced search</a>.</p>

  to:
  

  <p class="nojs-hide"><a href="https://www.canada.ca/en/news/advanced-news-search.html">Perform an advanced search</a></p>

• Change paragraph below news items from:
  

  <p>To access all articles, please visit the <a href="https://www.canada.ca/en/news/advanced-news-search/news-results.html">advanced search</a>.</p>

  to:
  

  <p class="text-center nojs-hide"><a href="https://www.canada.ca/en/news/advanced-news-search/news-results.html">All news products</a></p>

• Add the following block right after the first paragraph, before the news products table (only visible in basic HTML):

  <div class="nojs-show"><p>While using basic HTML visit:</p>
  			<ul>
  				<li><a href="https://www.canada.ca/en/news/advanced-news-search/news-results.html">All news products</a></li>
  				<li><a href="https://www.canada.ca/en/news/advanced-news-search.html">News search</a></li>
  			</ul>
  		</div>

Deprecated layout

As of version 5.0.0 of GCWeb, the promotions use version 5.0 of Context-specific features. The following code sample is therefore deprecated.

<header>
...
</header>

<aside class="prm-flpr">
	<div class="container">
		<h2 class="wb-inv">Promotions</h2>
		<div class="wb-tabs carousel-s2 show-thumbs playing slow">
			<ul role="tablist">
				<li class="active">
					<a href="#tab1"><img src="./img/promos/1170x347-1.png" alt="><span class="wb-inv">Tab 1: Banff National Park</span></a>
				</li>
				<li>
					<a href="#tab2"><img src="./img/promos/1170x347-2.png" alt="><span class="wb-inv">Tab 2: Algonquin Provincial Park</span></a>
				</li>
				<li>
					<a href="#tab3"><img src="./img/promos/1170x347-3.png" alt="><span class="wb-inv">Tab 3: Rideau Canal</span></a>
				</li>
			</ul>
			<div class="tabpanels">
				<div role="tabpanel" id="tab1" class="in fade">
					<a href="#" class="learnmore">
						<figure>
							<img src="./img/promos/1170x347-1.png" alt=">
							<figcaption>
								<p>Banff National Park </p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="tab2" class="out fade">
					<a href="#" class="learnmore">
						<figure>
							<img src="./img/promos/1170x347-2.png" alt=">
							<figcaption>
								<p>Algonquin Provincial Park </p>
							</figcaption>
						</figure>
					</a>
				</div>
				<div role="tabpanel" id="tab3" class="out fade">
					<a href="#" class="learnmore">
						<figure>
							<img src="./img/promos/1170x347-3.png" alt=">
							<figcaption>
								<p>Rideau Canal </p>
							</figcaption>
						</figure>
					</a>
				</div>
			</div>
		</div>
	</div>
</aside>

<main>
...
</main>

Evaluation and report

There is no evaluation and report available for this component.