En-tête
- Statut
- Stable
- Type
- Fonctionnalité du site Canada.ca
- Dernière révision
- 2022-08-31
Objectif
Affiche la portion de l'en-tête qui se trouve sous la bannière.
Peut contenir les composants suivants :
- Menu GCWeb
- Authentification
Example pratique
- Page de contenu incluant l'en-tête v4.0
- Page de contenu incluant l'en-tête v4.0 ainsi que la section d'authentification.
Comment mettre en œuvre
Cette version requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".
Évaluation et rapport
Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.
API (version 2.0)
| Versions du composants | Classes CSS | Gabarit | Rendu visuel | Schéma |
|---|---|---|---|---|
| Version 4.0.0 | n.a. | Version 4.0 | Version 1.0 | n.a. |
Version obsolète
| Version du composant | Classes CSS | Gabarit | Rendu visuel | Schéma |
|---|---|---|---|---|
| Version 3.0.0 | n.a. | Version 3.0 | Version 1.0 | n.a. |
| Version 2.0.0 | n.a. | Version 2.0 | Version 1.0 | n.a. |
| Version 1.0 | n.a. | Version 1.0 | Version 1.0 | n.a. |
Gabarit
Avant et après
Version 4.0
Aucun changement.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.1] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
</div>
</div>
<!-- Fil d'Ariane [version 1.0] -->
</header>Incluant la section d'authentification (optionnelle)
La différence avec la verion 3.0 est que la valeur pour col-xs-5 et col-xs-offset-7 a été ajusté à un "6" afin que le texte du bouton ne brise pas et demeure sur une seule ligne pour toutes les fenêtre d'affichage d'extra-extra-petite à extra-large (xs, xxs, sm, md, lg et xl).
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.1] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
<!-- Section d'authentification optionnelle [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 3.0 (obsolète)
Aucun changement.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Menu du site [version 2.0] -->
</div>
</div>
</div>
<!-- Fil d'Ariane [version 1.0] -->
</header>Incluant la section d'authentification (optionnelle)
La version 3.0 de l'en-tête incluant la section d'authentification est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Section d'authentification optionnelle [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Versions précédentes
Version 3.0 vs Version 2.0
Version 3.0 (obsolète)
La seule différence avec la version 2.0 est que les colonnes vont rester à 8 même si la section d'authentification est présente.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
</div>
</div>
<!-- Fil d'Ariane [version 1.0] -->
</header>Incluant la section d'authentification (optionnelle)
Aucun changement.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Section d'authentification optionnelle [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 (obsolète)
La version 2.0 de l'en-tête est obsolète mais toujours supportée et requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Menu du site [version 2.0] -->
</div>
</div>
</div>
<!-- Fil d'Ariane [version 1.0] -->
</header>Incluant la section d'authentification (optionnelle)
Aucun changement.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Section d'authentification optionnelle [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 vs Version 1.0
Version 2.0 (obsolète)
Cette version requière l'implémentation de la version 2.0 du menu GCWeb ou le code <div class="container"> a été relocalisé dans l'en-tête donc l'extérieur du composant "gcweb-menu".
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Menu du site [version 2.0] -->
</div>
</div>
</div>
<!-- Fil d'Ariane [version 1.0] -->
</header>Incluant la section d'authentification (optionnelle)
Ajout de la section d'authentification.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Changer de langue [version 1.0] -->
<!-- Image de marque [version 1.0] -->
<!-- Recherche [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Menu du site [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Section d'authentification optionnelle [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 1 (obsolète)
La version 1.0 de l'en-tête est obsolète mais toujours supportée.
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.0] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<!-- GCWeb Menu [Version 1.0] -->
<!-- Breadcrumbs [version 1.0] -->
</header>