Fonctionalités provisoires - Thème de GCWeb

Dans cette page

• Disponibilité des fonctionalités
• Documentation des fonctionalités provisoires
• Exemples pratiques provisoires

Disponibilité des fonctionalités

Le tableau suivant décrit jusqu’à quelle version de GCWeb chaque fonctionnalité sera disponible. La disponibilité des fonctionnalités sera réévaluée chaque fois qu’une version est publiée. Une fonctionnalité expérimentale retirée sera communiquée une version à l’avance.

Pour plus de fonctionnalités provisoires, consultez la page des fonctionnalités provisoires de la WET-BOEW.

Documentation des fonctionalités provisoires

Les fonctionalités CSS provisoires doivent être accompagné avec la classe .provisional au sein de leur contexte d'utilisation.

Examples pratiques provisoires

Dans cette section

• En-tête adaptable de la boîte grise avec une image de fond
• En-tête adaptable de la boîte grise avec une image de fond et des contrôles de remplissage
• Marge du bas pour la vue à partir d'un petit écran et plus
• Couleurs du gabarit de thème
• Image de fond sur l'en-tête
• Section Features avec des liens élargis
• Icon warning color
• Widget succès de page
• Chat wizard
• GC Service initiation template
• Cases à cocher et boutons radio

En-tête adaptable de la boîte grise avec une image de fond

En-tête adaptable de la boîte grise avec une image de fond et des contrôles de remplissage

Principalement pour des pages de campagne ayant une largeur adaptable au contenu.

<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">En-tête</h4>
			<p>En-tête secondaire</p>
		</div>
	</div>
</div>

Marge du bas pour la vue à partir d'un petit écran et plus

En-tête

En-tête secondaire

Couleurs du gabarit de thème

• Journée rose
• Thème sombre

( 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 );

Image de fond sur l'en-tête

Principalement pour la section Services et information.

Section Features avec des liens élargis

Dans l'exemple suivant, ajouter la classe .stretched-link à l'hyperlien situé à l'intérieur de la balise <h3> résulera en une propagation de la zone cliquable jusqu'au <div> parent qui contient la classe .col-xy-z parce que celui-ci est en position « relative ».

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