- Taxonomic name: O-MASTHEAD-2
- Added on: v2023.01 (16/10/2023)
- Updated on: v2023.01 (16/10/2023)
Masthead 2
For displaying the masthead 2 on a page optionally including site switching, primary navigation, search, login link and call button.
Design and usage
There are three main variations of the masthead:
- Sticky - No main navigation or login link. Just a call button.
- Sticky small - smaller header. No main navigation or login link. Just a call button.
- Standard - Main navigation links open mega dropdown with further navigation.
Shared rules
All three masthead variations carry these rules:
Structure
- To be used as a primary navigation system.
- Site switcher functionality should only be used for the very highest level categories such as Personal / Business.
- Ensure that links within the logged in menu remain consistent within a country.
Placement
- The masthead must be placed at the top of the browser window.
Basic and standard variation shared rules
Structure
- ---
Label
- ---
Accessibility and screen readers
- ---
Examples
Simplified masthead2
Use case
- For forms content pages
Interactive example
Code example
<header class="o-masthead2 o-masthead2--simplified" data-module="o-masthead2" data-module-load="true">
<p class="u-hidden--visually">
<a href="./framework/element-library/components/masthead2/examples/simplified.html#main-example-3">
Accédez au contenu principal
</a>
</p>
<div class="l-content-container">
<a class="o-masthead2__logo"
href="[root URL]" aria-label="Marque">
<img src="..."
decoding="async" width="160" height="80" alt="Marque">
</a>
<div class="o-masthead2__menus">
<ul class="o-masthead2__upper-menu">
<li>
<a href="..." class="a-button a-button--call a-button--inverse-icon o-masthead2__call-btn" itemprop="telephone">
<span>02 59 08 77 64</span>
</a>
</li>
</ul>
</div>
</div>
</header>
Small simplified masthead2
Use case
- For forms content pages
Interactive example
Code example
<header class="o-masthead2 o-masthead2--simplified-small" data-module="o-masthead2" data-module-load="true">
<p class="u-hidden--visually">
<a href="./framework/element-library/components/masthead2/examples/simplified-small.html#main-example-3">
Accédez au contenu principal
</a>
</p>
<div class="l-content-container">
<a class="o-masthead2__logo"
href="[root URL]" aria-label="Marque">
<img src="..."
decoding="async" width="160" height="80" alt="Marque">
</a>
<div class="o-masthead2__menus">
<ul class="o-masthead2__upper-menu">
<li>
<a href="..." class="a-button a-button--call a-button--inverse-icon o-masthead2__call-btn" itemprop="telephone">
<span>02 59 08 77 64</span>
</a>
</li>
</ul>
</div>
</div>
</header>
Navigation masthead2
Use case
- "complete" masthead to display login link, research, navigation
Interactive example
Code example
<header class="o-masthead2" data-module="o-masthead2" data-module-load="true">
<p class="u-hidden--visually">
<a href="./framework/element-library/components/masthead2/examples/navigation.html#main-example-3">
Accédez au contenu principal
</a>
</p>
<div class="l-content-container">
<a class="o-masthead2__logo" href="[root URL]" aria-label="Marque">
<img class="o-masthead2__logo-base" src="..." decoding="async" width="160" height="80" alt="Marque">
<img class="o-masthead2__logo-negative" src="..." decoding="async" width="160" height="80" alt="Marque">
</a>
<div class="o-masthead2__menus">
<ul class="o-masthead2__upper-menu">
<li>
<button class="a-button o-masthead2__search-btn">
<span class="u-hidden--visually">Rechercher</span>
</button>
</li>
<li>
<a href="..." class="a-button a-button--call a-button--inverse-icon o-masthead2__call-btn" itemprop="telephone">
<span>02 59 08 77 64</span>
</a>
</li>
<li class="o-masthead2__login-btn-wrapper">
<a href="..." class="a-button a-button--primary o-masthead2__login-btn">
<span>Espace personnel</span>
</a>
</li>
<li class="o-masthead2__logged-in-wrapper">
<div class="o-masthead2__logged-in">
<a href="..." class="o-masthead2__logged-in__access-btn">
<svg class="o-masthead2-acess-icon" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg">
<path id="Fill-17" fill-rule="evenodd" clip-rule="evenodd" d="M8.14878 9.5C8.10207 9.5027 8.05403 9.5 8.00732 9.5C3.58861 9.49595 0 12.9322 0 17.4851L16 17.5C16.0146 12.9471 12.4968 9.50405 8.14878 9.5Z"/>
<path id="Fill-18" fill-rule="evenodd" clip-rule="evenodd" d="M12.0014 4.50613C11.9986 2.29322 10.2054 0.502725 7.99387 0.5H7.99115H7.98706C5.78505 0.506813 4.00409 2.29186 4 4.49251C3.99728 6.6986 5.78096 8.49182 7.98706 8.5H7.99115H7.99251H7.99387C10.2013 8.49864 11.9918 6.71359 12.0014 4.50613Z"/>
</svg>
<span class="inner-text">
<span class="main-txt">
Espace personnel
</span>
<span class="sub-txt">
Référence : <span>8055487</span>
</span>
</span>
</button>
<button class="o-masthead2__logged-in__logout-btn">
<svg class="o-masthead2-logout-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<path
d="M12.6406 3.18038C12.2614 2.89295 11.708 2.95603 11.4077 3.31964C11.1074 3.68384 11.1727 4.21229 11.5532 4.50031C12.9459 5.55185 13.7442 7.12648 13.7442 8.82133C13.7442 11.8528 11.1671 14.3194 8.00062 14.3194C4.8335 14.3194 2.2564 11.8528 2.2564 8.82133C2.2564 7.12708 3.05409 5.55304 4.44554 4.5021C4.82604 4.21467 4.89132 3.68622 4.59102 3.32142C4.29072 2.95722 3.73924 2.89533 3.3575 3.18217C1.54141 4.55387 0.5 6.60934 0.5 8.82133C0.5 12.7799 3.86483 16 8 16C12.1352 16 15.5 12.7793 15.5 8.82133C15.5 6.60815 14.4573 4.55268 12.6406 3.18038Z" />
<path
d="M7 1.14286V6.85714C7 7.48775 7.44822 8 8 8C8.55178 8 9 7.48775 9 6.85714V1.14286C9 0.512252 8.55178 0 8 0C7.44822 0 7 0.512252 7 1.14286Z" />
</svg>
<span class="u-hidden--visually">
Se déconnecter
</span>
</button>
</div>
</li>
<li class="o-masthead2__burger">
<button class="o-masthead2__burger__btn">
<div></div>
<span class="u-hidden--visually">Ouvrir le menu</span>
</button>
</li>
</ul>
<nav class="o-masthead2__lower-menu">
<ul>
<li>
<a href="#masthead2-auto">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34.3,19.8c0-0.1,0-0.3,0-0.4c0-0.2-0.1-0.3-0.2-0.4c-0.4-1.2-0.8-2.4-1.2-3.4l1.9-1c0.6-0.3,0.8-1,0.5-1.5
c-0.3-0.6-1-0.8-1.5-0.5l-1.9,1c-0.1-0.1-0.1-0.3-0.2-0.4c-0.3-0.7-0.5-1.3-0.8-1.8c-1.2-2.9-4-3.4-5.4-3.3h-11
c-1.3-0.2-4.1,0.3-5.3,3.2c-0.1,0.5-0.4,1.1-0.8,1.8c0,0.2-0.1,0.4-0.2,0.5l-2-1c-0.5-0.3-1.2,0-1.5,0.5c-0.3,0.5,0,1.2,0.5,1.5
l2.1,1c-0.4,1-0.8,2.1-1.2,3.3C6,19,5.9,19.2,5.9,19.3c0,0.1,0,0.1,0,0.2c-0.5,1.7-0.8,3.6-0.9,5.6c-0.1,0.1-0.1,0.3-0.1,0.5v3.8
c0,1.5,1.1,2.5,2.4,2.5h1.9c1.3,0,2.4-1.1,2.3-2.4v-2.7h17v2.7c0,1.4,1.1,2.4,2.4,2.4h1.9c1.3,0,2.3-1.1,2.3-2.4v-3.3
c0.1-0.2,0.1-0.3,0.1-0.5C35.1,23.5,34.8,21.5,34.3,19.8z M10.5,24.6H7.1c0.1-1.3,0.4-2.6,0.6-3.7l4,0.8c0.1,0,0.2,0,0.3,0
c0.5,0,1-0.3,1-0.9c0.1-0.6-0.3-1.2-0.9-1.3l-3.8-0.8c0.3-0.9,0.7-1.8,1-2.6h21.3c0.4,0.8,0.7,1.7,1,2.6l-3.7,0.8
c-0.6,0.2-1,0.7-0.9,1.3c0.1,0.5,0.5,0.9,1,0.9c0.1,0,0.2,0,0.3,0l3.9-0.8c0.3,1.2,0.5,2.4,0.6,3.7h-3.4H10.5z M14.4,10.2L14.4,10.2
h11.1h0.1c0,0,2.3-0.2,3.2,2c0.2,0.6,0.5,1.2,0.8,1.8H10.4c0.3-0.7,0.6-1.2,0.8-1.8C12.1,10,14.4,10.2,14.4,10.2z M9.6,29.5
c0,0.2-0.1,0.3-0.3,0.3H7.4c-0.2,0-0.3-0.1-0.3-0.3v-2.7h2.4L9.6,29.5L9.6,29.5z M33.1,29.5c0,0.2-0.1,0.3-0.3,0.3h-1.9
c-0.2,0-0.3-0.1-0.3-0.3v-2.7h2.5V29.5z" />
</svg>
</span>
Auto
</a>
</li>
<li>
<a href="#masthead2-moto">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M30.5,4.5L30.5,4.5h-2.4c-1.3,0-2.5,0.3-3.6,0.8c-0.5,0.2-0.9,0.5-1.3,0.8c-0.7-1-1.9-1.6-3.2-1.6c-1.3,0-2.4,0.6-3.2,1.6
c-0.4-0.3-0.8-0.5-1.3-0.7c-1.1-0.5-2.3-0.8-3.6-0.8H9.5l0,0c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1h2.4c1,0,1.9,0.2,2.8,0.6
c0.4,0.2,0.7,0.4,1,0.6c-0.5,0.1-0.9,0.4-1.1,0.8c-0.2,0.4-0.3,0.8-0.3,1.2v0.2h-0.8c-0.6-0.1-1.2,0.2-1.6,0.6
c-0.5,0.5-0.6,1.1-0.5,1.7c0.1,0.4,0.3,0.7,0.6,1l1.1,1.1V24c0,0.1,0.2,3.4,3.3,4.6V32c0,0.9,0.4,1.8,1,2.5c0.7,0.6,1.6,1,2.5,0.9
c0.1,0,0.1,0,0.2,0l0,0c0.9,0,2.4-0.3,3.2-1.7c0.2-0.4,0.4-0.9,0.4-1.5v-3.6c2.4-1,3.2-3.4,3.2-4.6v-9.4l1.1-1
c0.3-0.3,0.5-0.6,0.6-1c0.2-0.6,0-1.3-0.5-1.7c-0.4-0.4-1-0.6-1.6-0.6h-0.9V10c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.5-0.6-0.8-1-0.9
c0.3-0.2,0.6-0.4,1-0.6c0.8-0.4,1.8-0.6,2.8-0.6h2.4c0.6,0,1.1-0.5,1.1-1.1C31.5,5,31.1,4.5,30.5,4.5z M20,6.7c1,0,1.9,0.8,1.9,1.9
S21,10.4,20,10.4s-1.9-0.8-1.9-1.9S19,6.7,20,6.7z M21.5,32.2c0,0.2,0,0.3-0.1,0.5C21,33.3,20,33.2,20,33.2c-0.1,0-0.1,0-0.1,0
c-0.4,0-0.7-0.1-1-0.3c-0.2-0.2-0.3-0.5-0.3-0.9V20.1c0-0.2,0-0.3,0.1-0.5C19,19,20,19,20,19c0.1,0,0.1,0,0.1,0c0.4,0,0.7,0.1,1,0.3
c0.2,0.2,0.3,0.5,0.3,0.9v12H21.5z M26.1,12.3L25,13.4c-0.2,0.2-0.3,0.5-0.3,0.8V24c0,0.2-0.1,1.4-1.1,2.2v-5.8c0-0.9-0.4-1.8-1-2.5
c-0.7-0.7-1.5-1-2.5-0.9c-0.9,0-2.6,0.3-3.4,1.7c-0.2,0.4-0.4,0.9-0.4,1.5v6c-1-0.9-1.1-2.1-1.1-2.1v-9.9c0.1-0.3,0-0.6-0.2-0.8
l-1.1-1.1h1.5c0.6,0,1.1-0.5,1.1-1.1v-0.7c0.7,1.2,2,2.1,3.5,2.1s2.8-0.8,3.5-2.1v0.7c0,0.6,0.5,1.1,1.1,1.1H26.1z" />
</svg>
</span>
2 roues
</a>
</li>
<li>
<a href="#masthead2-habitation">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34,12.4l-12.7-7c-0.7-0.4-1.5-0.3-2.2,0L6,12.9c-0.9,0.5-1.4,1.6-1.4,2.7v16.3c0,1.7,1.1,3,2.5,3h25.7
c1.4,0,2.5-1.3,2.4-3V15.1C35.3,13.9,34.8,12.8,34,12.4z M33.3,32c0,0.5-0.3,0.9-0.3,0.9H7.2c-0.1-0.1-0.3-0.3-0.3-0.9V15.7
c0-0.5,0.2-0.8,0.3-0.9l13-7.6l12.7,7c0.2,0.1,0.3,0.4,0.3,0.9V32z" />
<path
d="M23.1,12.2c-1,0.1-1.9,0.7-2.6,1.4c-0.4-0.1-0.8-0.2-1.2-0.2c-2.3,0-4.3,1.7-4.5,4l-5,3.2c-0.2,0.2-0.3,0.4-0.4,0.7
l-0.5,2.3C8.6,24.3,9,24.8,9.5,25l2.3,0.7c0.2,0.1,0.3,0.1,0.3,0.1c0.2,0,0.4-0.1,0.4-0.1l1.1-0.7c0.2-0.2,0.3-0.3,0.4-0.6h0.1
c0.6,0.1,1.2-0.3,1.3-0.9v-0.1h0.1c0.5,0.1,1-0.2,1.2-0.7l0.1-0.2H17c0.2,0.1,0.4,0,0.6-0.1l0.2-0.1c0.1,0,0.1,0,0.2,0
c0,0.2,0,0.5,0.2,0.7c0.1,0.1,0.3,0.3,0.3,0.4l-1,5.2c0,0.3,0,0.5,0.2,0.8l1.1,1.7c0.3,0.3,0.6,0.5,1,0.5c0.3,0,0.4,0,0.6-0.2
l1.8-1c0.3-0.1,0.4-0.3,0.5-0.7v-1.2c0-0.2,0-0.4-0.1-0.6c0.4-0.3,0.5-1,0.3-1.5c0.3-0.3,0.5-0.9,0.3-1.3c0.2-0.2,0.3-0.3,0.3-0.5
v-0.2c0.4-0.2,0.9-0.5,1.2-0.9c0.9-0.9,1.2-2,1.2-3.1c0,0,0.1-0.1,0.1-0.1c1.7-0.9,2.5-2.7,2.3-4.5C27.9,13.6,25.5,11.8,23.1,12.2z
M17.2,20.3l-0.3,0.2l-0.6-0.1c-0.5-0.1-1,0.3-1.1,0.7v0.1h-0.2c-0.5-0.1-1.1,0.3-1.2,0.9h-0.1c-0.3-0.1-0.6,0-0.9,0.2
c-0.3,0.2-0.3,0.4-0.4,0.7l-0.1,0.4L12,23.5l-0.8-0.3l0.2-1l5.1-3.2c0.3-0.2,0.5-0.5,0.5-1c0-1.4,1.1-2.4,2.3-2.4
c-0.1,0.5-0.2,1.1-0.1,1.6c0.1,0.6,0.6,1,1.2,1c0.6-0.1,1-0.6,1-1.2c0,0,0,0,0,0c0.2,0.4,0.3,0.8,0.3,1.2c0,1.4-1.1,2.4-2.4,2.4
c-0.3,0-0.7-0.1-1-0.3c0-0.1-0.1-0.1-0.1-0.1C17.9,20.1,17.5,20.1,17.2,20.3z M23.2,22.4c-0.3,0.3-0.5,0.4-0.9,0.5
c-0.3,0.1-0.6,0.3-0.7,0.7l-0.1,0.3l-0.3,0.3c-0.3,0.3-0.5,0.9-0.3,1.3l-0.1,0.1c-0.4,0.3-0.5,1-0.3,1.4c-0.3,0.2-0.3,0.4-0.4,0.7
c-0.1,0.3,0,0.5,0.2,0.8l0.3,0.3v0.2L20,29.3l-0.3-0.6l1-5.2c0.1-0.3-0.1-0.7-0.3-1c1.4-0.3,2.6-1.3,3.1-2.6
C23.9,20.7,23.8,21.7,23.2,22.4z M25.2,18.6c-0.2-0.3-0.4-0.6-0.6-0.8c-0.2-0.2-0.5-0.4-0.8-0.6c-0.2-0.9-0.6-1.8-1.3-2.4
c0.3-0.2,0.6-0.3,0.9-0.3c1.2-0.2,2.4,0.7,2.6,2C26.2,17.3,25.9,18.1,25.2,18.6z" />
</svg>
</span>
Habitation
</a>
</li>
<li>
<a href="#masthead2-emprunteur">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path
d="M35.1,17.4c-0.5-0.3-1.2,0.1-1.4,0.6c-0.3,0.8-0.5,1.1-0.9,1.4c0-1.1-0.5-1.9-1.1-2.3
c-0.5-0.3-1.2-0.3-1.7-0.1c-0.5,0.3-0.9,0.9-1,1.6c0,0.7,0.2,1.5,0.6,2.1c-0.4,0.2-0.8,0.4-1.2,0.5c-1.6-3.6-5.8-6.2-10.7-6.2
c-0.5,0-1,0-1.7,0.1c-0.1,0-0.2,0-0.3,0h-0.1c-0.3,0.1-0.8-0.2-1.2-0.4c-0.9-0.4-1.9-1-3.2-0.9c-0.5,0.1-1,0.3-1.2,0.7
c-0.3,0.3-0.4,0.9-0.3,1.3l0.2,1.8c-1.1,0.8-2,1.8-2.6,3c-0.6,0.8-1.3,1-1.7,1.1c-0.9,0.2-1.5,1-1.5,1.8v2.4c0,0.9,0.6,1.7,1.5,1.8
c1,0.3,1.5,0.5,1.7,0.7c0.8,1.5,2.1,2.8,3.7,3.7c0.3,0.1,0.3,0.3,0.3,0.5v1.1c0,1,0.8,1.7,1.7,1.7h1.7c0.9,0,1.7-0.7,1.7-1.6
c1,0.1,2,0.1,3-0.1c0,0.9,0.8,1.6,1.7,1.6h1.8c1,0,1.7-0.7,1.7-1.3v-1.5c0-0.2,0.1-0.3,0.2-0.4c2.8-1.8,4.4-4.6,4.4-7.6
c0-0.5-0.1-0.9-0.1-1.4c0.6-0.2,1.8-0.6,2.6-1.4c1.4,0,3-0.3,4.1-3C36,18.3,35.6,17.6,35.1,17.4z M23.6,30.1
c-0.8,0.5-1.2,1.4-1.2,2.3v0.9h-0.7v-2.1l-1.3,0.3c-1.6,0.3-3.1,0.4-4.8,0.1l-1.3-0.3v1.9h-0.7v-0.5c0-1-0.5-1.9-1.4-2.4
c-1.3-0.8-2.3-1.8-3-3l-0.1-0.1c-0.5-0.7-1.4-1.2-2.8-1.6v-2C7,23.4,8,22.9,9,21.7v-0.4c0.6-1,1.4-1.9,2.5-2.7l0.6-0.3l-0.3-2.5
c0.5,0.1,1,0.3,1.5,0.6c0.8,0.4,1.7,0.9,2.7,0.7h0.3c0.5-0.1,1-0.1,1.5-0.1c5.1,0,9.3,3.3,9.3,7.4C27,26.6,25.7,28.7,23.6,30.1z" />
<path
d="M15.6,13.3c2.4,0,4.3-2,4.3-4.3s-2-4.3-4.3-4.3c-2.4-0.1-4.4,1.8-4.4,4.3C11.2,11.3,13.1,13.3,15.6,13.3z
M15.6,6.7c1.2,0,2.2,1,2.2,2.2s-1,2.1-2.2,2.1s-2.2-1-2.2-2.2S14.3,6.7,15.6,6.7z" />
<path d="M20.9,18.4c-1.6-0.4-3.2-0.3-4.8,0.2c-0.6,0.2-0.9,0.8-0.7,1.4c0.2,0.6,0.8,0.9,1.4,0.7
c1.1-0.3,2.3-0.4,3.5-0.1c0.9,0.3,1.7,0.7,2.4,1.4c0.3,0.2,0.5,0.3,0.8,0.3s0.5-0.1,0.8-0.3c0.4-0.4,0.4-1.1,0-1.6
C23.4,19.5,22.2,18.8,20.9,18.4z" />
</svg>
</span>
Emprunteur
</a>
</li>
<li>
<a href="#masthead2-vie-courante">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34,12.4L21.2,5.2c-0.7-0.4-1.5-0.4-2.2,0l-3.7,2.1V7.1c0-0.8-0.7-1.5-1.7-1.5H10c-0.9,0-1.7,0.6-1.7,1.5v4.4l-2.4,1.4
c-0.9,0.5-1.4,1.6-1.4,2.7v16.5c0,1.7,1.1,3,2.5,3H33l0,0c1.4,0,2.5-1.3,2.5-3v-17C35.5,13.9,35,12.8,34,12.4z M10.5,7.8h2.7v0.8
l-2.7,1.6V7.8z M33.3,32.1c0,0.5-0.2,0.8-0.3,0.9H7.1c-0.1,0-0.3-0.3-0.3-0.8V15.6c0-0.5,0.2-0.8,0.3-0.9l13.1-7.6L33,14.3
c0.1,0.1,0.3,0.4,0.3,0.8V32.1z" />
<path d="M20.4,20.6c2.5-0.2,4.4-2.2,4.4-4.7c0-2.6-2.2-4.8-4.8-4.8c-2.7,0-4.8,2.1-4.8,4.8c0,2.5,2,4.5,4.4,4.7
c-3.9,0.2-7.1,3.4-7.1,7.4v1.7c0,0.6,0.5,1.1,1.1,1.1h12.8c0.6,0,1.1-0.5,1.1-1.1V28C27.5,24,24.4,20.8,20.4,20.6z M17.3,15.9
c0-1.4,1.2-2.6,2.7-2.6s2.7,1.2,2.7,2.6c0,1.4-1.2,2.6-2.7,2.6C18.5,18.4,17.3,17.3,17.3,15.9z M25.3,28.6H14.7v-0.7
c0-2.9,2.4-5.2,5.3-5.2s5.3,2.3,5.3,5.2V28.6z" />
</svg>
</span>
Vie courante
</a>
</li>
<li>
<a href="[direct link]">
Avantages
</a>
</li>
<li>
<a href="[direct link]">
Eurofil
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="o-masthead2-navigation">
<!-- recherche -->
<div class="o-masthead2-search" id="o-masthead2-search" aria-hidden="true">
<div class="l-content-container o-masthead2-search__inner">
<form class="m-form-row l-max l-max--8-column-large" action="./search/" method="get"
role="search" itemprop="potentialAction" itemtype="https://schema.org/SearchAction">
<button class="o-masthead2-search__btn-close" type="button">
<span class="u-hidden--visually">
Fermer la recherche
</span>
<svg width="13" height="10" viewBox="0 0 13 10" fill="none"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<path d="M5.91675 10L0.916748 5L5.91675 -6.11959e-07L0.916748 5L12.9167 5"
stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<fieldset class="m-form-row__content">
<input type="text" name="masthead2-search-field" placeholder="Rechercher sur Eurofil..."
class="a-textbox o-masthead2-search__input">
<button class="o-masthead2-search__btn-submit" type="submit">
<span class="u-hidden--visually">
Lancer la recherche
</span>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
xml:space="preserve">
<path
d="M11.7,10.4c2.1-2.7,1.7-6.6-0.9-8.8C8.2-0.6,4.3-0.5,1.9,1.9c-2.4,2.4-2.5,6.3-0.3,8.8c2.2,2.6,6.1,3,8.8,0.9l4.1,4.1
c0.2,0.2,0.4,0.3,0.6,0.3s0.5-0.1,0.6-0.3c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L11.7,10.4z M9.9,9.9L9.9,9.9L9.9,9.9
c-1.4,1.4-3.4,1.8-5.2,1C3,10.2,1.9,8.5,1.9,6.6c0-2.1,1.4-4,3.5-4.5c2.1-0.6,4.2,0.3,5.3,2.2C11.7,6.1,11.4,8.4,9.9,9.9z" />
</svg>
</button>
</fieldset>
</form>
</div>
<div class="o-masthead2-search__backdrop" aria-hidden></div>
</div>
<!-- nav footer -->
<div class="o-masthead2-nav-footer" id="o-masthead2-nav-footer">
<div class="l-content-container">
<a href="..." class="a-button a-button--tertiary o-masthead2-nav-footer__faq-btn">
<span class="a-button__inner">
FAQ générale
</span>
</a>
</div>
</div>
<!-- nav déconnexion espace connecté -->
<div class="o-masthead2-nav-logout t-accent-dark t-accent-dark-1" id="o-masthead2-nav-logout">
<div class="l-content-container">
<p class="o-masthead2-nav-logout__txt-wrapper">
<span class="o-masthead2-nav-logout__txt">Rérérence :</span>
<span class="o-masthead2-nav-logout__txt">8055487</span>
</p>
<button class="a-button a-button--tertiary o-masthead2-nav-logout__btn">
<span class="a-button__inner">
Déconnecter
</span>
</button>
</div>
</div>
<!-- nav auto -->
<div class="o-masthead2-nav" id="masthead2-auto">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Auto
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Formules et garanties
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto au tiers
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto tous risques
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Comparatif formules Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Garanties optionnelles Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
FAQ formules
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Avantages et parrainage
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Avantage assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Parrainage Auto
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Sinistre
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
En cas de sinistre Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
FAQ Sinistre
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav 2 roues DUMMY -->
<div class="o-masthead2-nav" id="masthead2-moto">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet est consecuor
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav Habitation DUMMY -->
<div class="o-masthead2-nav" id="masthead2-habitation">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav emprunteur DUMMY -->
<div class="o-masthead2-nav" id="masthead2-emprunteur">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav vie courante DUMMY -->
<div class="o-masthead2-nav" id="masthead2-vie-courante">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
</div>
Navigation masthead2 logged in
Use case
- "complete" masthead when logged in to display logged & user link, research, navigation
Interactive example
Code example
<header class="o-masthead2 logged-in" data-module="o-masthead2" data-module-load="true">
<p class="u-hidden--visually">
<a href="./framework/element-library/components/masthead2/examples/navigation.html#main-example-3">
Accédez au contenu principal
</a>
</p>
<div class="l-content-container">
<a class="o-masthead2__logo" href="[root URL]" aria-label="Marque">
<img class="o-masthead2__logo-base" src="..." decoding="async" width="160" height="80" alt="Marque">
<img class="o-masthead2__logo-negative" src="..." decoding="async" width="160" height="80" alt="Marque">
</a>
<div class="o-masthead2__menus">
<ul class="o-masthead2__upper-menu">
<li>
<button class="a-button o-masthead2__search-btn">
<span class="u-hidden--visually">Rechercher</span>
</button>
</li>
<li>
<a href="..." class="a-button a-button--call a-button--inverse-icon o-masthead2__call-btn" itemprop="telephone">
<span>02 59 08 77 64</span>
</a>
</li>
<li class="o-masthead2__login-btn-wrapper">
<a href="..." class="a-button a-button--primary o-masthead2__login-btn">
<span>Espace personnel</span>
</a>
</li>
<li class="o-masthead2__logged-in-wrapper">
<div class="o-masthead2__logged-in">
<a href="..." class="o-masthead2__logged-in__access-btn">
<svg class="o-masthead2-acess-icon" viewBox="0 0 16 18" xmlns="http://www.w3.org/2000/svg">
<path id="Fill-17" fill-rule="evenodd" clip-rule="evenodd" d="M8.14878 9.5C8.10207 9.5027 8.05403 9.5 8.00732 9.5C3.58861 9.49595 0 12.9322 0 17.4851L16 17.5C16.0146 12.9471 12.4968 9.50405 8.14878 9.5Z"/>
<path id="Fill-18" fill-rule="evenodd" clip-rule="evenodd" d="M12.0014 4.50613C11.9986 2.29322 10.2054 0.502725 7.99387 0.5H7.99115H7.98706C5.78505 0.506813 4.00409 2.29186 4 4.49251C3.99728 6.6986 5.78096 8.49182 7.98706 8.5H7.99115H7.99251H7.99387C10.2013 8.49864 11.9918 6.71359 12.0014 4.50613Z"/>
</svg>
<span class="inner-text">
<span class="main-txt">
Espace personnel
</span>
<span class="sub-txt">
Référence : <span>8055487</span>
</span>
</span>
</button>
<button class="o-masthead2__logged-in__logout-btn">
<svg class="o-masthead2-logout-icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<path
d="M12.6406 3.18038C12.2614 2.89295 11.708 2.95603 11.4077 3.31964C11.1074 3.68384 11.1727 4.21229 11.5532 4.50031C12.9459 5.55185 13.7442 7.12648 13.7442 8.82133C13.7442 11.8528 11.1671 14.3194 8.00062 14.3194C4.8335 14.3194 2.2564 11.8528 2.2564 8.82133C2.2564 7.12708 3.05409 5.55304 4.44554 4.5021C4.82604 4.21467 4.89132 3.68622 4.59102 3.32142C4.29072 2.95722 3.73924 2.89533 3.3575 3.18217C1.54141 4.55387 0.5 6.60934 0.5 8.82133C0.5 12.7799 3.86483 16 8 16C12.1352 16 15.5 12.7793 15.5 8.82133C15.5 6.60815 14.4573 4.55268 12.6406 3.18038Z" />
<path
d="M7 1.14286V6.85714C7 7.48775 7.44822 8 8 8C8.55178 8 9 7.48775 9 6.85714V1.14286C9 0.512252 8.55178 0 8 0C7.44822 0 7 0.512252 7 1.14286Z" />
</svg>
<span class="u-hidden--visually">
Se déconnecter
</span>
</button>
</div>
</li>
<li class="o-masthead2__burger">
<button class="o-masthead2__burger__btn">
<div></div>
<span class="u-hidden--visually">Ouvrir le menu</span>
</button>
</li>
</ul>
<nav class="o-masthead2__lower-menu">
<ul>
<li>
<a href="#masthead2-auto">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34.3,19.8c0-0.1,0-0.3,0-0.4c0-0.2-0.1-0.3-0.2-0.4c-0.4-1.2-0.8-2.4-1.2-3.4l1.9-1c0.6-0.3,0.8-1,0.5-1.5
c-0.3-0.6-1-0.8-1.5-0.5l-1.9,1c-0.1-0.1-0.1-0.3-0.2-0.4c-0.3-0.7-0.5-1.3-0.8-1.8c-1.2-2.9-4-3.4-5.4-3.3h-11
c-1.3-0.2-4.1,0.3-5.3,3.2c-0.1,0.5-0.4,1.1-0.8,1.8c0,0.2-0.1,0.4-0.2,0.5l-2-1c-0.5-0.3-1.2,0-1.5,0.5c-0.3,0.5,0,1.2,0.5,1.5
l2.1,1c-0.4,1-0.8,2.1-1.2,3.3C6,19,5.9,19.2,5.9,19.3c0,0.1,0,0.1,0,0.2c-0.5,1.7-0.8,3.6-0.9,5.6c-0.1,0.1-0.1,0.3-0.1,0.5v3.8
c0,1.5,1.1,2.5,2.4,2.5h1.9c1.3,0,2.4-1.1,2.3-2.4v-2.7h17v2.7c0,1.4,1.1,2.4,2.4,2.4h1.9c1.3,0,2.3-1.1,2.3-2.4v-3.3
c0.1-0.2,0.1-0.3,0.1-0.5C35.1,23.5,34.8,21.5,34.3,19.8z M10.5,24.6H7.1c0.1-1.3,0.4-2.6,0.6-3.7l4,0.8c0.1,0,0.2,0,0.3,0
c0.5,0,1-0.3,1-0.9c0.1-0.6-0.3-1.2-0.9-1.3l-3.8-0.8c0.3-0.9,0.7-1.8,1-2.6h21.3c0.4,0.8,0.7,1.7,1,2.6l-3.7,0.8
c-0.6,0.2-1,0.7-0.9,1.3c0.1,0.5,0.5,0.9,1,0.9c0.1,0,0.2,0,0.3,0l3.9-0.8c0.3,1.2,0.5,2.4,0.6,3.7h-3.4H10.5z M14.4,10.2L14.4,10.2
h11.1h0.1c0,0,2.3-0.2,3.2,2c0.2,0.6,0.5,1.2,0.8,1.8H10.4c0.3-0.7,0.6-1.2,0.8-1.8C12.1,10,14.4,10.2,14.4,10.2z M9.6,29.5
c0,0.2-0.1,0.3-0.3,0.3H7.4c-0.2,0-0.3-0.1-0.3-0.3v-2.7h2.4L9.6,29.5L9.6,29.5z M33.1,29.5c0,0.2-0.1,0.3-0.3,0.3h-1.9
c-0.2,0-0.3-0.1-0.3-0.3v-2.7h2.5V29.5z" />
</svg>
</span>
Auto
</a>
</li>
<li>
<a href="#masthead2-moto">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M30.5,4.5L30.5,4.5h-2.4c-1.3,0-2.5,0.3-3.6,0.8c-0.5,0.2-0.9,0.5-1.3,0.8c-0.7-1-1.9-1.6-3.2-1.6c-1.3,0-2.4,0.6-3.2,1.6
c-0.4-0.3-0.8-0.5-1.3-0.7c-1.1-0.5-2.3-0.8-3.6-0.8H9.5l0,0c-0.6,0-1.1,0.5-1.1,1.1s0.5,1.1,1.1,1.1h2.4c1,0,1.9,0.2,2.8,0.6
c0.4,0.2,0.7,0.4,1,0.6c-0.5,0.1-0.9,0.4-1.1,0.8c-0.2,0.4-0.3,0.8-0.3,1.2v0.2h-0.8c-0.6-0.1-1.2,0.2-1.6,0.6
c-0.5,0.5-0.6,1.1-0.5,1.7c0.1,0.4,0.3,0.7,0.6,1l1.1,1.1V24c0,0.1,0.2,3.4,3.3,4.6V32c0,0.9,0.4,1.8,1,2.5c0.7,0.6,1.6,1,2.5,0.9
c0.1,0,0.1,0,0.2,0l0,0c0.9,0,2.4-0.3,3.2-1.7c0.2-0.4,0.4-0.9,0.4-1.5v-3.6c2.4-1,3.2-3.4,3.2-4.6v-9.4l1.1-1
c0.3-0.3,0.5-0.6,0.6-1c0.2-0.6,0-1.3-0.5-1.7c-0.4-0.4-1-0.6-1.6-0.6h-0.9V10c0-0.4-0.1-0.8-0.3-1.1c-0.2-0.5-0.6-0.8-1-0.9
c0.3-0.2,0.6-0.4,1-0.6c0.8-0.4,1.8-0.6,2.8-0.6h2.4c0.6,0,1.1-0.5,1.1-1.1C31.5,5,31.1,4.5,30.5,4.5z M20,6.7c1,0,1.9,0.8,1.9,1.9
S21,10.4,20,10.4s-1.9-0.8-1.9-1.9S19,6.7,20,6.7z M21.5,32.2c0,0.2,0,0.3-0.1,0.5C21,33.3,20,33.2,20,33.2c-0.1,0-0.1,0-0.1,0
c-0.4,0-0.7-0.1-1-0.3c-0.2-0.2-0.3-0.5-0.3-0.9V20.1c0-0.2,0-0.3,0.1-0.5C19,19,20,19,20,19c0.1,0,0.1,0,0.1,0c0.4,0,0.7,0.1,1,0.3
c0.2,0.2,0.3,0.5,0.3,0.9v12H21.5z M26.1,12.3L25,13.4c-0.2,0.2-0.3,0.5-0.3,0.8V24c0,0.2-0.1,1.4-1.1,2.2v-5.8c0-0.9-0.4-1.8-1-2.5
c-0.7-0.7-1.5-1-2.5-0.9c-0.9,0-2.6,0.3-3.4,1.7c-0.2,0.4-0.4,0.9-0.4,1.5v6c-1-0.9-1.1-2.1-1.1-2.1v-9.9c0.1-0.3,0-0.6-0.2-0.8
l-1.1-1.1h1.5c0.6,0,1.1-0.5,1.1-1.1v-0.7c0.7,1.2,2,2.1,3.5,2.1s2.8-0.8,3.5-2.1v0.7c0,0.6,0.5,1.1,1.1,1.1H26.1z" />
</svg>
</span>
2 roues
</a>
</li>
<li>
<a href="#masthead2-habitation">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34,12.4l-12.7-7c-0.7-0.4-1.5-0.3-2.2,0L6,12.9c-0.9,0.5-1.4,1.6-1.4,2.7v16.3c0,1.7,1.1,3,2.5,3h25.7
c1.4,0,2.5-1.3,2.4-3V15.1C35.3,13.9,34.8,12.8,34,12.4z M33.3,32c0,0.5-0.3,0.9-0.3,0.9H7.2c-0.1-0.1-0.3-0.3-0.3-0.9V15.7
c0-0.5,0.2-0.8,0.3-0.9l13-7.6l12.7,7c0.2,0.1,0.3,0.4,0.3,0.9V32z" />
<path
d="M23.1,12.2c-1,0.1-1.9,0.7-2.6,1.4c-0.4-0.1-0.8-0.2-1.2-0.2c-2.3,0-4.3,1.7-4.5,4l-5,3.2c-0.2,0.2-0.3,0.4-0.4,0.7
l-0.5,2.3C8.6,24.3,9,24.8,9.5,25l2.3,0.7c0.2,0.1,0.3,0.1,0.3,0.1c0.2,0,0.4-0.1,0.4-0.1l1.1-0.7c0.2-0.2,0.3-0.3,0.4-0.6h0.1
c0.6,0.1,1.2-0.3,1.3-0.9v-0.1h0.1c0.5,0.1,1-0.2,1.2-0.7l0.1-0.2H17c0.2,0.1,0.4,0,0.6-0.1l0.2-0.1c0.1,0,0.1,0,0.2,0
c0,0.2,0,0.5,0.2,0.7c0.1,0.1,0.3,0.3,0.3,0.4l-1,5.2c0,0.3,0,0.5,0.2,0.8l1.1,1.7c0.3,0.3,0.6,0.5,1,0.5c0.3,0,0.4,0,0.6-0.2
l1.8-1c0.3-0.1,0.4-0.3,0.5-0.7v-1.2c0-0.2,0-0.4-0.1-0.6c0.4-0.3,0.5-1,0.3-1.5c0.3-0.3,0.5-0.9,0.3-1.3c0.2-0.2,0.3-0.3,0.3-0.5
v-0.2c0.4-0.2,0.9-0.5,1.2-0.9c0.9-0.9,1.2-2,1.2-3.1c0,0,0.1-0.1,0.1-0.1c1.7-0.9,2.5-2.7,2.3-4.5C27.9,13.6,25.5,11.8,23.1,12.2z
M17.2,20.3l-0.3,0.2l-0.6-0.1c-0.5-0.1-1,0.3-1.1,0.7v0.1h-0.2c-0.5-0.1-1.1,0.3-1.2,0.9h-0.1c-0.3-0.1-0.6,0-0.9,0.2
c-0.3,0.2-0.3,0.4-0.4,0.7l-0.1,0.4L12,23.5l-0.8-0.3l0.2-1l5.1-3.2c0.3-0.2,0.5-0.5,0.5-1c0-1.4,1.1-2.4,2.3-2.4
c-0.1,0.5-0.2,1.1-0.1,1.6c0.1,0.6,0.6,1,1.2,1c0.6-0.1,1-0.6,1-1.2c0,0,0,0,0,0c0.2,0.4,0.3,0.8,0.3,1.2c0,1.4-1.1,2.4-2.4,2.4
c-0.3,0-0.7-0.1-1-0.3c0-0.1-0.1-0.1-0.1-0.1C17.9,20.1,17.5,20.1,17.2,20.3z M23.2,22.4c-0.3,0.3-0.5,0.4-0.9,0.5
c-0.3,0.1-0.6,0.3-0.7,0.7l-0.1,0.3l-0.3,0.3c-0.3,0.3-0.5,0.9-0.3,1.3l-0.1,0.1c-0.4,0.3-0.5,1-0.3,1.4c-0.3,0.2-0.3,0.4-0.4,0.7
c-0.1,0.3,0,0.5,0.2,0.8l0.3,0.3v0.2L20,29.3l-0.3-0.6l1-5.2c0.1-0.3-0.1-0.7-0.3-1c1.4-0.3,2.6-1.3,3.1-2.6
C23.9,20.7,23.8,21.7,23.2,22.4z M25.2,18.6c-0.2-0.3-0.4-0.6-0.6-0.8c-0.2-0.2-0.5-0.4-0.8-0.6c-0.2-0.9-0.6-1.8-1.3-2.4
c0.3-0.2,0.6-0.3,0.9-0.3c1.2-0.2,2.4,0.7,2.6,2C26.2,17.3,25.9,18.1,25.2,18.6z" />
</svg>
</span>
Habitation
</a>
</li>
<li>
<a href="#masthead2-emprunteur">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path
d="M35.1,17.4c-0.5-0.3-1.2,0.1-1.4,0.6c-0.3,0.8-0.5,1.1-0.9,1.4c0-1.1-0.5-1.9-1.1-2.3
c-0.5-0.3-1.2-0.3-1.7-0.1c-0.5,0.3-0.9,0.9-1,1.6c0,0.7,0.2,1.5,0.6,2.1c-0.4,0.2-0.8,0.4-1.2,0.5c-1.6-3.6-5.8-6.2-10.7-6.2
c-0.5,0-1,0-1.7,0.1c-0.1,0-0.2,0-0.3,0h-0.1c-0.3,0.1-0.8-0.2-1.2-0.4c-0.9-0.4-1.9-1-3.2-0.9c-0.5,0.1-1,0.3-1.2,0.7
c-0.3,0.3-0.4,0.9-0.3,1.3l0.2,1.8c-1.1,0.8-2,1.8-2.6,3c-0.6,0.8-1.3,1-1.7,1.1c-0.9,0.2-1.5,1-1.5,1.8v2.4c0,0.9,0.6,1.7,1.5,1.8
c1,0.3,1.5,0.5,1.7,0.7c0.8,1.5,2.1,2.8,3.7,3.7c0.3,0.1,0.3,0.3,0.3,0.5v1.1c0,1,0.8,1.7,1.7,1.7h1.7c0.9,0,1.7-0.7,1.7-1.6
c1,0.1,2,0.1,3-0.1c0,0.9,0.8,1.6,1.7,1.6h1.8c1,0,1.7-0.7,1.7-1.3v-1.5c0-0.2,0.1-0.3,0.2-0.4c2.8-1.8,4.4-4.6,4.4-7.6
c0-0.5-0.1-0.9-0.1-1.4c0.6-0.2,1.8-0.6,2.6-1.4c1.4,0,3-0.3,4.1-3C36,18.3,35.6,17.6,35.1,17.4z M23.6,30.1
c-0.8,0.5-1.2,1.4-1.2,2.3v0.9h-0.7v-2.1l-1.3,0.3c-1.6,0.3-3.1,0.4-4.8,0.1l-1.3-0.3v1.9h-0.7v-0.5c0-1-0.5-1.9-1.4-2.4
c-1.3-0.8-2.3-1.8-3-3l-0.1-0.1c-0.5-0.7-1.4-1.2-2.8-1.6v-2C7,23.4,8,22.9,9,21.7v-0.4c0.6-1,1.4-1.9,2.5-2.7l0.6-0.3l-0.3-2.5
c0.5,0.1,1,0.3,1.5,0.6c0.8,0.4,1.7,0.9,2.7,0.7h0.3c0.5-0.1,1-0.1,1.5-0.1c5.1,0,9.3,3.3,9.3,7.4C27,26.6,25.7,28.7,23.6,30.1z" />
<path
d="M15.6,13.3c2.4,0,4.3-2,4.3-4.3s-2-4.3-4.3-4.3c-2.4-0.1-4.4,1.8-4.4,4.3C11.2,11.3,13.1,13.3,15.6,13.3z
M15.6,6.7c1.2,0,2.2,1,2.2,2.2s-1,2.1-2.2,2.1s-2.2-1-2.2-2.2S14.3,6.7,15.6,6.7z" />
<path d="M20.9,18.4c-1.6-0.4-3.2-0.3-4.8,0.2c-0.6,0.2-0.9,0.8-0.7,1.4c0.2,0.6,0.8,0.9,1.4,0.7
c1.1-0.3,2.3-0.4,3.5-0.1c0.9,0.3,1.7,0.7,2.4,1.4c0.3,0.2,0.5,0.3,0.8,0.3s0.5-0.1,0.8-0.3c0.4-0.4,0.4-1.1,0-1.6
C23.4,19.5,22.2,18.8,20.9,18.4z" />
</svg>
</span>
Emprunteur
</a>
</li>
<li>
<a href="#masthead2-vie-courante">
<span class="svg-icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path d="M34,12.4L21.2,5.2c-0.7-0.4-1.5-0.4-2.2,0l-3.7,2.1V7.1c0-0.8-0.7-1.5-1.7-1.5H10c-0.9,0-1.7,0.6-1.7,1.5v4.4l-2.4,1.4
c-0.9,0.5-1.4,1.6-1.4,2.7v16.5c0,1.7,1.1,3,2.5,3H33l0,0c1.4,0,2.5-1.3,2.5-3v-17C35.5,13.9,35,12.8,34,12.4z M10.5,7.8h2.7v0.8
l-2.7,1.6V7.8z M33.3,32.1c0,0.5-0.2,0.8-0.3,0.9H7.1c-0.1,0-0.3-0.3-0.3-0.8V15.6c0-0.5,0.2-0.8,0.3-0.9l13.1-7.6L33,14.3
c0.1,0.1,0.3,0.4,0.3,0.8V32.1z" />
<path d="M20.4,20.6c2.5-0.2,4.4-2.2,4.4-4.7c0-2.6-2.2-4.8-4.8-4.8c-2.7,0-4.8,2.1-4.8,4.8c0,2.5,2,4.5,4.4,4.7
c-3.9,0.2-7.1,3.4-7.1,7.4v1.7c0,0.6,0.5,1.1,1.1,1.1h12.8c0.6,0,1.1-0.5,1.1-1.1V28C27.5,24,24.4,20.8,20.4,20.6z M17.3,15.9
c0-1.4,1.2-2.6,2.7-2.6s2.7,1.2,2.7,2.6c0,1.4-1.2,2.6-2.7,2.6C18.5,18.4,17.3,17.3,17.3,15.9z M25.3,28.6H14.7v-0.7
c0-2.9,2.4-5.2,5.3-5.2s5.3,2.3,5.3,5.2V28.6z" />
</svg>
</span>
Vie courante
</a>
</li>
<li>
<a href="[direct link]">
Avantages
</a>
</li>
<li>
<a href="[direct link]">
Eurofil
</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="o-masthead2-navigation">
<!-- recherche -->
<div class="o-masthead2-search" id="o-masthead2-search" aria-hidden="true">
<div class="l-content-container o-masthead2-search__inner">
<form class="m-form-row l-max l-max--8-column-large" action="./search/" method="get"
role="search" itemprop="potentialAction" itemtype="https://schema.org/SearchAction">
<button class="o-masthead2-search__btn-close" type="button">
<span class="u-hidden--visually">
Fermer la recherche
</span>
<svg width="13" height="10" viewBox="0 0 13 10" fill="none"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve">
<path d="M5.91675 10L0.916748 5L5.91675 -6.11959e-07L0.916748 5L12.9167 5"
stroke="#000" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<fieldset class="m-form-row__content">
<input type="text" name="masthead2-search-field" placeholder="Rechercher sur Eurofil..."
class="a-textbox o-masthead2-search__input">
<button class="o-masthead2-search__btn-submit" type="submit">
<span class="u-hidden--visually">
Lancer la recherche
</span>
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
xml:space="preserve">
<path
d="M11.7,10.4c2.1-2.7,1.7-6.6-0.9-8.8C8.2-0.6,4.3-0.5,1.9,1.9c-2.4,2.4-2.5,6.3-0.3,8.8c2.2,2.6,6.1,3,8.8,0.9l4.1,4.1
c0.2,0.2,0.4,0.3,0.6,0.3s0.5-0.1,0.6-0.3c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L11.7,10.4z M9.9,9.9L9.9,9.9L9.9,9.9
c-1.4,1.4-3.4,1.8-5.2,1C3,10.2,1.9,8.5,1.9,6.6c0-2.1,1.4-4,3.5-4.5c2.1-0.6,4.2,0.3,5.3,2.2C11.7,6.1,11.4,8.4,9.9,9.9z" />
</svg>
</button>
</fieldset>
</form>
</div>
<div class="o-masthead2-search__backdrop" aria-hidden></div>
</div>
<!-- nav footer -->
<div class="o-masthead2-nav-footer" id="o-masthead2-nav-footer">
<div class="l-content-container">
<a href="..." class="a-button a-button--tertiary o-masthead2-nav-footer__faq-btn">
<span class="a-button__inner">
FAQ générale
</span>
</a>
</div>
</div>
<!-- nav déconnexion espace connecté -->
<div class="o-masthead2-nav-logout t-accent-dark t-accent-dark-1" id="o-masthead2-nav-logout">
<div class="l-content-container">
<p class="o-masthead2-nav-logout__txt-wrapper">
<span class="o-masthead2-nav-logout__txt">Rérérence :</span>
<span class="o-masthead2-nav-logout__txt">8055487</span>
</p>
<button class="a-button a-button--tertiary o-masthead2-nav-logout__btn">
<span class="a-button__inner">
Déconnecter
</span>
</button>
</div>
</div>
<!-- nav auto -->
<div class="o-masthead2-nav" id="masthead2-auto">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Auto
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Formules et garanties
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto au tiers
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Assurance Auto tous risques
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Comparatif formules Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Garanties optionnelles Assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
FAQ formules
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Avantages et parrainage
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Avantage assurance Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Parrainage Auto
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Sinistre
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
En cas de sinistre Auto
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
FAQ Sinistre
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav 2 roues DUMMY -->
<div class="o-masthead2-nav" id="masthead2-moto">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet est consecuor
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav Habitation DUMMY -->
<div class="o-masthead2-nav" id="masthead2-habitation">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav emprunteur DUMMY -->
<div class="o-masthead2-nav" id="masthead2-emprunteur">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
<!-- nav vie courante DUMMY -->
<div class="o-masthead2-nav" id="masthead2-vie-courante">
<div class="l-content-container">
<div class="l-columns l-columns--1-small l-columns--1-medium l-columns--5-large">
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Devis
</h2>
<a href="..." class="a-button a-button--primary">
Devis Lorem
</a>
<a href="..." class="a-button a-button--tertiary a-button--next">
<span class="a-button__inner">
J'ai déjà un devis
</span>
</a>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem ipsum dolor sit amet
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column">
<h2 class="o-masthead2-nav__title">
Lorem
</h2>
<ul class="o-masthead2-nav__list">
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
<li>
<a href="..." class="o-masthead2-nav__link">
<span>
Lorem ipsum
</span>
</a>
</li>
</ul>
</div>
<div class="l-columns__column o-masthead2-nav__promo-wrapper">
<a href="...">
<img src="..."
alt="texte alternatif pour l'image">
</a>
</div>
</div>
</div>
</div>
</div>
Development and test
Notes for developers
Veiller à ce que tous les liens utilisés soient parfaitement compréhensibles
lorsqu'ils sont présentés avec n'importe quel contenu, par exemple le bouton "En savoir plus"
d'une carte promotionnelle comporte un texte accessible indiquant ce à quoi il se réfère.
Pour ce faire, il est possible d'utiliser un texte supplémentaire caché visuellement ou
de fournir un texte plus descriptif dans l'attribut aria-label. Tout lien comportant le même texte
dans la navigation doit également être accompagné d'un texte descriptif supplémentaire s'il renvoie à des endroits différents.
A l'ouverture du sous-menu, le premier élément a, button, input ou select prend automatiquement le focus ;
pour empêcher un 1er élément de prendre le focus,
ajoutez-lui tabindex="-1"
Company logo
Le logo figurant dans le bandeau doit toujours renvoyer à la page d'accueil du site web. Il y a plusieurs raisons à cela :
- Le retour à la page d'accueil est une tâche très courante pour les utilisateurs, qui y reviennent souvent lorsqu'ils sont désorientés, qu'ils sont allés trop loin dans un site ou qu'ils sont simplement prêts à commencer une nouvelle tâche.
- La majorité des utilisateurs accèdent aux sites web par l'intermédiaire des moteurs de recherche, ce qui signifie que qu'ils atterriront le plus souvent sur des pages intérieures et éviteront la page d'accueil entièrement la page d'accueil. Un accès facile à la page d'accueil leur offre un nouveau point de départ s'ils se sont trompés de page ou s'ils veulent explorer d'autres sites.
Notes for testers
---
Classes overview
Le tableau suivant vous donne un aperçu rapide des classes CSS qui peuvent être appliquées.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.o-masthead2
|
Base style for masthead2 | Yes |
header
|
|
.o-masthead2--simplified
|
Set simplified masthead2 styles |
.o-masthead2
|
||
.o-masthead2--simplified-small
|
Set small simplified masthead2 styles |
.o-masthead2
|
||
.logged-in
|
Define user as logged in to change masthead2 aspect |
.o-masthead2
|
remove login button for a user access in header (only on
desktop)
add a log out button in header (only on desktop) add a user identification and logout section in subnav (only in tablet & mobile) |
|
.o-masthead2__logo
|
logo container | Yes |
.o-masthead2 > .l-content-container > a
|
|
.o-masthead2__logo-base
|
basic logo |
.o-masthead2 > .l-content-container > .o-masthead2__logo > img
|
Displays basic logo | |
.o-masthead2__logo-negative
|
negative logo |
.o-masthead2 > .l-content-container > .o-masthead2__logo > img
|
Displays negative logo, visible when the burger menu is open on mobile | |
.o-masthead2__menus
|
menus container | Yes |
.o-masthead2 > .l-content-container > div
|
nécessaire pour les masthead avec menus uniquement |
.o-masthead2__upper-menu
|
upper menus container | Yes |
.o-masthead2__menus > ul
|
|
.o-masthead2__search-btn
|
bouton de recherche |
.o-masthead2__upper-menu > li > button.a-button
|
||
.o-masthead2__call-btn
|
bouton d'appel | Yes |
.o-masthead2__upper-menu > li > button.a-button.a-button--call
|
le <span> contenant le numéro d'appel est nécessaire |
.o-masthead2__login-btn-wrapper
|
conteneur pour le bouton de login |
.o-masthead2__upper-menu > li
|
||
.o-masthead2__login-btn
|
bouton de login |
.o-masthead2__login-btn-wrapper > a.a-button.a-button--primary
|
||
.o-masthead2__logged-in-wrapper
|
conteneur pour la section connecté du header |
.o-masthead2__upper-menu > li
|
||
.o-masthead2__logged-in
|
section connecté du header |
.o-masthead2__logged-in-wrapper > div.o-masthead2__logged-in
|
||
.o-masthead2__logged-in__access-btn
|
bouton d'accès à l'espace personnel |
.o-masthead2__logged-in > a
|
||
.o-masthead2-acess-icon
|
icône du bouton d'accès à l'espace personnel |
.o-masthead2__logged-in__access-btn > svg
|
Le svg et tous ses enfants ne doivent pas avoir d'attribut ou style en ligne pour "fill" | |
.inner-text
|
conteneur pour le texte du bouton d'accès à l'espace personnel |
.o-masthead2__logged-in__access-btn > span
|
||
.main-txt
|
titre pour le texte du bouton d'accès à l'espace personnel |
.inner-text > span
|
||
.sub-txt
|
identifiant pour le texte du bouton d'accès à l'espace personnel |
.inner-text > span
|
||
.o-masthead2__logged-in__logout-btn
|
bouton de déconnexion |
.o-masthead2__logged-in > button
|
||
.o-masthead2-logout-icon
|
icône du bouton de déconnexion |
.o-masthead2__logged-in__logout-btn > svg
|
Le svg et tous ses enfants ne doivent pas avoir d'attribut ou
style en ligne pour "fill"
un span.u-hidden--visually contient également le texte du bouton pour l'accessibilité dans .o-masthead2__logged-in__logout-btn |
|
.o-masthead2__burger
|
bouton de burger menu pour mobile et tablette |
.o-masthead2__upper-menu > li > button
|
Le <div> vide à l'intérieur est nécessaire | |
.o-masthead2__lower-menu
|
Conteneur pour la partie basse du menu desktop |
.o-masthead2__menus > nav
|
les item de .o-masthead2__lower-menu sont constitués de la sorte
pour chaque item :
ul > li > a les items présentants un sous-menu verront leur href pointer vers un ID de l'item o-masthead2-nav |
|
.svg-icon
|
conteneur pour l'icône d'un item .o-masthead2__lower-menu |
.o-masthead2__lower-menu > ul > li > a > span
|
Le .svg-icon doit directement intégrer un svg sans attribut ou style "fill" sur lui même ou ses enfants. | |
#o-masthead2-navigation
|
conteneur pour les sous-menus |
div < footer.m-footer
|
conteneur à placer juste avant le footer dans la page. | |
#o-masthead2-search
|
conteneur pour le champ de recherche |
#o-masthead2-navigation > div.o-masthead2-search[aria-hidden="true"]
|
#o-masthead2-search doit également posséder :
- la classe .o-masthead2-search - l'attribut aria-hidden="true" |
|
.o-masthead2-search__inner
|
conteneur pour le champ de recherche |
#o-masthead2-search > div.l-content-container
|
||
.o-masthead2-search__btn-close
|
bouton de fermeture du champ de recherche |
.o-masthead2-search__inner > form.m-form-row.l-max.l-max--8-column-large > button[type="button"]
|
||
.o-masthead2-search__input
|
input du champ de recherche |
.o-masthead2-search__inner > form.m-form-row.l-max.l-max--8-column-large > fieldset.m-form-row__content > input[type="text"]
|
||
.o-masthead2-search__btn-submit
|
bouton de validation du champ de recherche du champ de recherche |
.o-masthead2-search__inner > form.m-form-row.l-max.l-max--8-column-large > fieldset.m-form-row__content > button[type="submit"]
|
||
.o-masthead2-search__backdrop
|
bouton de validation du champ de recherche du champ de recherche |
#o-masthead2-search > div
|
le backdrop possède l'atrribut aria-hidden | |
#o-masthead2-nav-footer
|
conteneur pour le footer du sous menu |
#o-masthead2-navigation > div.o-masthead2-nav-footer
|
#o-masthead2-nav-footer doit également posséder la classe .o-masthead2-nav-footer | |
.o-masthead2-nav-footer__faq-btn
|
classe spécifique pour le bouton FAQ |
#o-masthead2-nav-footer > div.l-content-container > a.a-button.a-button--tertiary
|
Comme tous les boutons tertiary, ce dernier porte son texte dans un span.a-button__inner à l'intérieur du <a> | |
#o-masthead2-nav-logout
|
conteneur pour le logout du sous menu |
#o-masthead2-navigation > div.o-masthead2-nav-logout
|
#o-masthead2-nav-logout doit également posséder la classe .o-masthead2-nav-logout | |
.o-masthead2-nav-logout__txt-wrapper
|
conteneur pour l'identifiant dans le logout du sous menu |
#o-masthead2-nav-logout > p
|
||
.o-masthead2-nav-logout__txt
|
section de texte dans le conteneur pour l'identifiant dans le logout du sous menu |
.o-masthead2-nav-logout__txt-wrapper > span
|
||
.o-masthead2-nav-logout__btn
|
bouton de déconnexion dans le logout du sous menu |
.o-masthead2-nav-logout > button.a-button.a-button--tertiary
|
comme tous les boutons tertiary, ce dernier contient un span.a-button__inner pour son texte | |
.o-masthead2-nav
|
Conteneur du contenu principal d'un sous menu de rubrique |
#o-masthead2-navigation > div
|
Chaque .o-masthead2-nav possède un ID correspondant à la cible d'un lien du .o-masthead2__lower-menu | |
.o-masthead2-nav__title
|
titre d'une rubrique du sous menu |
.o-masthead2-nav > h2
|
||
.o-masthead2-nav__list
|
Conteneur pour les listes de liens simple du sous-menu |
.o-masthead2-nav > ul
|
||
.o-masthead2-nav__link
|
Liens simple du sous-menu |
.o-masthead2-nav__list > a
|
||
.o-masthead2-nav__promo-wrapper
|
Liens promo du sous-menu |
.o-masthead2-nav > div
|
.o-masthead2-nav__promo-wrapper contient un <a> contenant lui même une image <img> |
Keyboard operations
- TAB
-
Tabbing to a link should make the link clearly visually different so that the focus point on the page is obvious to the user. If a mega menu is open the user should only be able to navigate to links within the open mega menu and masthead.
- Enter
-
When JavaScript is available hitting enter on a masthead link to the country selector, main menu, search or login should open the megamenu if it is not already open, change the opened content if the menu is already open or close the menu if the menus content is already open.