Provisional functionality - GCWeb theme

On this page

• Feature availability
• Provisional feature documentation
• Provisional feature working examples

Feature availability

The following table describes until which version of GCWeb each provisional feature will be available. The features' availability will be re-evaluated at every release. A withdrawn provisional feature would be notified one version in advance.

For more provisional features, check out the WET-BOEW provisional features page.

Provisional feature documentation

CSS provisional features must be accompanied by the class .provisional within his context of use.

Provisional feature working examples

In this section

• Responsive well header with a background image
• Responsive well header with background image and padding controls
• Margin bottom small view port and up
• Theme template colors
• Background image on headings
• Features section with stretched links
• Icon warning color
• Page success widget
• GC Subway map navigation
• Checkboxes and radio-buttons

Responsive well header with a background image

Responsive well header with background image and padding controls

Mostly for campaing pages with content-fluid width.

<div class="provisional bg-cover" data-bgimg="https://wet-boew.github.io/v4.0-ci/demos/tabs/img/investinourfuture.jpg">
	<div class="container p-0 p-sm-3">
		<div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0">
			<h4 class="mrgn-tp-md">Heading</h4>
			<p>Secondary title</p>
		</div>
	</div>
</div>

Margin bottom small view port and up

Heading

Secondary title

Theme template colors

• Pink day
• Dark theme

( function( d ) {
"use strict";

var t = new Date(),
	msT = t.getTime(),
	s = new Date( 2019, 3, 10, 0, 1 ),
	e = new Date( 2019, 3, 10, 23, 59 );

if ( s.getTime() < msT && msT < e.getTime() ) {
	d.getElementsByTagName( "html" )[ 0 ].classList.add ("pnkDy-theme", "provisional");
}

} )( document );

Background image on heading

Mostly for Services and information section.

Features section with stretched links

In the following example, adding the .stretched-link class to the hyperlink found inside the <h3> tag will result in propagating the clickable area all the way up to the parent <div> with the .col-xy-z class because it has a "relative" position.

Learn more about Canada’s Digital Charter

Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.

National Indigenous History Month

Celebrate National Indigenous History Month in June

Icon warning color

Adding provisional icon-warning-light in the class will change the color