Ancre
Note d'accessibilité
Attention! N'oubliez pas de définir le aria-label de votre groupe d'ancres!
Ancres dans un encadré
Fond Bleu HQ (bleu 80)
Dans cette page :
<section class="hq-ancres-groupees hq-bg-bleu-80" data-theme="sombre" aria-label="Liens raccourcis">
<h2 class="hq-titre-ancres">Dans cette page :</h2>
<ul>
<li>
<a href="#anchor-1" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 1
</a>
</li>
<li>
<a href="#anchor-2" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 2
</a>
</li>
<li>
<a href="#anchor-3" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 3
</a>
</li>
<li>
<a href="#anchor-4" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 4
</a>
</li>
<li>
<a href="#anchor-5" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 5
</a>
</li>
</ul>
</section>
Fond Bleu 90
Dans cette page :
<section class="hq-ancres-groupees hq-bg-bleu-90" data-theme="sombre" aria-label="Liens raccourcis">
<h2 class="hq-titre-ancres">Dans cette page :</h2>
<ul>
<li>
<a href="#anchor-1" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 1
</a>
</li>
<li>
<a href="#anchor-2" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 2
</a>
</li>
<li>
<a href="#anchor-3" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 3
</a>
</li>
<li>
<a href="#anchor-4" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 4
</a>
</li>
<li>
<a href="#anchor-5" class="hq-ancre" data-theme="sombre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 5
</a>
</li>
</ul>
</section>
Fond Blanc
Dans cette page :
<section class="hq-ancres-groupees hq-bg-blanc" aria-label="Liens raccourcis">
<h2 class="hq-titre-ancres">Dans cette page :</h2>
<ul>
<li>
<a href="#anchor-1" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 1
</a>
</li>
<li>
<a href="#anchor-2" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 2
</a>
</li>
<li>
<a href="#anchor-3" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 3
</a>
</li>
<li>
<a href="#anchor-4" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 4
</a>
</li>
<li>
<a href="#anchor-5" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 5
</a>
</li>
</ul>
</section>
Fond Gris Bleu 05
Dans cette page :
<section class="hq-ancres-groupees hq-bg-gris-bleu-05" aria-label="Liens raccourcis">
<h2 class="hq-titre-ancres">Dans cette page :</h2>
<ul>
<li>
<a href="#anchor-1" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 1
</a>
</li>
<li>
<a href="#anchor-2" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 2
</a>
</li>
<li>
<a href="#anchor-3" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 3
</a>
</li>
<li>
<a href="#anchor-4" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 4
</a>
</li>
<li>
<a href="#anchor-5" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 5
</a>
</li>
</ul>
</section>
Fond Blanc - Ancres alignées avec le texte
Dans cette page :
<section class="hq-ancres-groupees" aria-label="Liens raccourcis">
<h2 class="hq-titre-ancres">Dans cette page :</h2>
<ul>
<li>
<a href="#anchor-1" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 1
</a>
</li>
<li>
<a href="#anchor-2" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 2
</a>
</li>
<li>
<a href="#anchor-3" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 3
</a>
</li>
<li>
<a href="#anchor-4" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 4
</a>
</li>
<li>
<a href="#anchor-5" class="hq-ancre">
<svg class="hq-icone-medium">
<use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-ancre"></use>
</svg> Ancre 5
</a>
</li>
</ul>
</section>