Header
- Status
- Stable
- Type
- Canada.ca site functionality
- Last review
- 2022-08-31
Purpose
Displays the portion of the header section that's underneath the banner.
Can contain the following components:
- GCWeb Menu
- Authentication
Working example
How to implement
This version requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
Evaluation and report
There is no evaluation and report available for this component.
API (Version 2.0)
| Component version | CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|---|
| Version 4.0.0 | n.a. | Version 4.0 | Version 1.0 | n.a. |
Deprecated version
| Component version | CSS Class | Template | Visual rendering | Schema |
|---|---|---|---|---|
| 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. |
Template
Before and After
Version 4.0
No change
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.1] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
The difference with version 3.0 is the value for col-xs-5 and col-xs-offset-7 have been adjusted to a "6" so the button text don't brake and stays on one line for every viewports from extra-extra-small to extra-large (xxs, xxs, sm, md, lg and xl).
<header>
<div id="wb-bnr" class="container">
<div class="row">
<!-- Language toggle [version 1.1] -->
<!-- Branding [version 1.0] -->
<!-- Search [version 1.0] -->
</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-6 col-xs-offset-6 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 3.0 (deprecated)
No change
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
The header version 3.0 including the authentication section is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Previous versions
Version 3.0 vs Version 2.0
Version 3.0 (deprecated)
The only difference with version 2.0 is that the column will remain at 8 whether there is an authentication section or not.
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
No change
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 (deprecated)
The header version 2.0 is deprecated but still supported and requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
No change
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
No change.
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 2.0 vs Version 1.0
Version 2.0 (deprecated)
This version requires the implementation of the gcweb-menu version 2.0 where the <div class="container"> has been relocated in the header so outside the "gcweb-menu" component.
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Site Menu [version 2.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Including authentication section (optional)
Addition of the authentication section.
<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>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- Site Menu [version 2.0] -->
</div>
<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4">
<!-- Optional Authentication Section [version 1.0] -->
</div>
</div>
</div>
<!-- Breadcrumbs [version 1.0] -->
</header>Version 1.0 (deprecated)
The header version 1.0 is deprecated but still supported.
<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>
<!-- Site Menu [Version 1.0]
<!-- Breadcrumbs [version 1.0] -->
</header>