Canada Strong theme

Working examples

• Landing page layout
• Support page layout

CSS classes

canada-strong

Wrapper for the campaign content. The classes below are scoped to it.

hero

The fade over the image is part of the image, so the hero only sets the image position. Use it with bg-cover and data-bgimg-srcset, with the no-image value at 1199w to remove the decorative image on screens narrower than 1200 pixels.

title-bar

Maroon title bar with white text, applied directly on the heading.

card-audience

Maroon card with white text and links, and a short red underline below the heading. Use it with p-3 mb-3 for the spacing, and with hght-inhrt inside a wb-eqht-grd row for cards of equal height.

card-support

Bordered card with a round icon. Use it with panel panel-default, and with hght-inhrt inside a wb-eqht-grd row for cards of equal height. Add position-relative to the card and stretched-link to the heading link to make the whole card clickable.

end-page-promo

Navy promotion with a round white icon, and white text and links. Place it after the page content, in a full-width section using bg-light py-3 for the grey band.

support-banner

Maroon banner with a white h1 and an image, used on sub pages. Put the heading before the image in the source order. This class is used with panel.

Theme elements

Add the canada-strong class to the element wrapping the page content. Layout and spacing use the WET and GCWeb utility classes. In the working examples, the hero and the banner use a h2 so the documentation page keeps a single h1, and the hero container is a container-fluid since the examples already sit inside a container. On a real page, use <h1 property="name" id="wb-cont"> and a container.

Hero

The fade over the image is part of the image, so the hero only sets the image position. Use it with bg-cover and data-bgimg-srcset, with the no-image value at 1199w to remove the decorative image on screens narrower than 1200 pixels.

Working example

Code

<div class="canada-strong">
	<div class="hero bg-cover" data-bgimg-srcset="[image path]/hero_banner.png 1920w, https://wet-boew.github.io/vocab/wb/utilities#no-image 1199w">
		<div class="container py-4">
			<div class="row">
				<div class="col-xs-12 col-md-6">
					<h1 property="name" id="wb-cont" class="mt-0">[Title]</h1>
					<p>[Description]</p>
				</div>
			</div>
			<p class="mb-0"><a class="btn btn-call-to-action" href="#">[Call to action]</a></p>
		</div>
	</div>
	[...]
</div>

Title bar

Maroon title bar with white text, applied directly on the heading.

Working example

Code

<div class="canada-strong">
	<h2 class="title-bar mt-4 mb-3">[Title]</h2>
</div>

Audience cards

Maroon card with white text and links, and a short red underline below the heading. Use it with p-3 mb-3 for the spacing, and with hght-inhrt inside a wb-eqht-grd row for cards of equal height.

Working example

Businesses

Funding, financing and other supports to help your business adapt, grow and reach new markets.

Explore supports for businesses

Workers

Programs and services to help you find work, access training and plan your next step.

Explore support for workers

Employers

Programs and services to help you manage and support your workforce.

Explore support for employers

Code

<div class="canada-strong">
	<div class="row wb-eqht-grd">
		<div class="col-sm-4">
			<div class="p-3 mb-3 card-audience hght-inhrt">
				<img src="[image path]/[icon]" width="64" height="64" alt="" decoding="async">
				<h3 class="h5">[Title]</h3>
				<p>[Description]</p>
				<p><a href="#">[Link]</a></p>
			</div>
		</div>
		[...]
	</div>
</div>

Support cards

Bordered card with a round icon. Use it with panel panel-default, and with hght-inhrt inside a wb-eqht-grd row for cards of equal height. Add position-relative to the card and stretched-link to the heading link to make the whole card clickable.

Working example

New support measures

Workforce Retention and Retraining Program

This program will provide flexible and easy-to-access support for businesses facing economic challenges.

Regional tariff response initiative

This will help small and medium-sized enterprises respond to tariff pressures.

BDC's Pivot to Grow program

Working capital for businesses facing cash-flow shortfalls as a result of U.S. tariffs.

Canada Strong Diversification Fund

Support for tariff-impacted companies with shovel-ready projects.

Code

<div class="canada-strong">
	<h2 class="title-bar h3 mt-4 mb-3">[Title]</h2>
	<div class="row wb-eqht-grd">
		<div class="col-xs-12 col-md-6 col-lg-3">
			<article class="panel panel-default brdr-rds-0 card-support hght-inhrt position-relative">
				<div class="panel-body">
					<img src="[image path]/[icon]" width="58" height="58" alt="" loading="lazy" decoding="async">
					<h3 class="h4"><a class="stretched-link" href="#">[Title]</a></h3>
					<p>[Description]</p>
				</div>
			</article>
		</div>
		[...]
	</div>
</div>

End of page promotion

Navy promotion with a round white icon, and white text and links. Place it after the page content, in a full-width section using bg-light py-3 for the grey band.

Working example

Together, let’s build a strong Canada

Investing in our workers, our industries, and our communities. Building an economy by Canadians, for Canadians.

Building a strong economy

Code

<div class="canada-strong">
	<section class="bg-light py-3">
		<div class="container">
			<div class="end-page-promo">
				<img src="[image path]/strong_canada.svg" width="60" height="60" alt="" loading="lazy" decoding="async">
				<h2>[Title]</h2>
				<p>[Description]</p>
				<p><a href="#">[Link]</a></p>
			</div>
		</div>
	</section>
</div>

Banner

Maroon banner with a white h1 and an image, used on sub pages. Put the heading before the image in the source order. This class is used with panel.

Working example

Support for businesses impacted by tariffs

Code

<div class="canada-strong">
	<div class="panel support-banner container-fluid mrgn-tp-md">
		<div class="row">
			<div class="col-md-6 col-xs-12">
				<h1 property="name" id="wb-cont" class="mrgn-tp-lg mrgn-bttm-lg mrgn-lft-lg">[Title]</h1>
			</div>
			<div class="col-md-6 col-xs-12">
				<img src="[image path]/support_banner.jpg" class="img-responsive mrgn-tp-0" alt="">
			</div>
		</div>
	</div>
</div>

Lists of links

Lists of links, like on the support page, use the Services and information pattern (gc-srvinfo).

Migrating from the embedded CSS

Remove the media player that embeds the custom CSS and rename the classes as follows. The text-white spans and classes in the maroon and navy areas are no longer needed.