Language selection

Search


Documentation about News template

Status
Stable
Type
Canada.ca template
Last review
2019-01-30
Conforming to
Content and IA spec 2.1
Specification
News pages - Canada.ca mandatory template
Template version
Version 2.0

Working examples

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.

Page details

Date modified: