Documentation about News template

Status

Stable

Type

Canada.ca template

Last review

2024-09-13

Conforming to

Content and IA spec 3.0

Specification

News pages - Canada.ca mandatory template

Template version

Version 3.0

Available instances

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

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

Working examples

• News landing page template - Version 3.0
• Gabarit de la page d'accueil des nouvelles - Version 3.0

List of changes

• 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 2.0

News landing page template - Version 2.0

Transition from version 2.0 to 3.0

• Promotions:
  • Remove the promotions section at the top of the page.
  • Add introduction text to the left of the "Follow" section and change pull-right class to text-sm-right on the <div> wrapping the "Follow" section. See working example for HTML markup.

• Features:
  • Add the attribute data-wb-randomize='{ "toggle": "hide" }' to each <div class="col-lg-4 col-sm-6 hght-inhrt"> element wrapping the features groups.
  • Change the HTML tag for features from <div> to <section>
  • Add the class hide to the <section class="well well-sm eqht-trgt"> elements (feature elements).
  • Above the <div class="row"> element, add a <ul class="nojs-show"> with a list of the links for all the features contained in all the <div class="col-lg-4 col-sm-6 hght-inhrt"> elements. This step is necessary for users of the basic HTML version.

• News articles:
  • Update the advanced search link to the following: https://www.canada.ca/en/news/advanced-news-search/news-results.html

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.