Hyperliens

Hyperlien

Restera sur l'onglet

Fond blanc

Voir le code

<a class="hq-lien" href="#">Ceci est un lien.</a>

Fond sombre

Voir le code

<a class="hq-lien" href="#" data-theme="sombre">Ceci est un lien avec un arrière-plan sombre.</a>

Ouvrira un nouvel onglet

Fond blanc

Voir le code

<a class="hq-lien" href="#" target="_blank" rel="noopener">Ceci est un lien ouvrant sur un nouvel onglet.
  <svg class="hq-icone-petite" aria-label="Ce lien ouvrira un nouvel onglet.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>

Fond sombre

Voir le code

<a class="hq-lien" href="#" data-theme="sombre" target="_blank" rel="noopener">Ceci est un lien avec un arrière-plan sombre ouvrant sur un nouvel onglet.
  <svg class="hq-icone-petite" aria-label="Ce lien ouvrira un nouvel onglet.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>

Icone large

Voir le code

<a class="hq-lien" href="#" target="_blank" rel="noopener">Ceci est un lien avec un icone large.
  <svg class="hq-icone-large" aria-label="Ce lien ouvrira un nouvel onglet.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>

Document téléchargeable

Restera sur l'onglet

Fond blanc

Voir le code

<a class="hq-lien" href="#">Ceci est un document. [DOC&nbsp;8,9&nbsp;
  <abbr title="méga-octet">Mo</abbr>] 
</a>

Fond sombre

Voir le code

<a class="hq-lien" href="#" data-theme="sombre">Ceci est un document sombre. [PDF&nbsp;259,2&nbsp;
  <abbr title="kilo-octet">ko</abbr>] 
</a>

Ouvrira un nouvel onglet

Voir le code

<a class="hq-lien" href="#" target="_blank" rel="noopener">Je suis un document qui ouvrira sur un nouvel onglet. [DOC&nbsp;324,4&nbsp;
  <abbr title="kilo-octet">ko</abbr>] 
  <svg class="hq-icone-petite" aria-label="Ce lien ouvrira un nouvel onglet.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>

Version anglaise

Hyperlien

Ouvrira un nouvel onglet

Voir le code

<a class="hq-lien" href="#" target="_blank" rel="noopener">Ceci est un lien ouvrant un nouvel onglet en anglais.
  <svg class="hq-icone-petite" aria-label="This link will open a new tab.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>

Document téléchargeable

Kilobytes - KB

Voir le code

<a class="hq-lien" href="#">Ceci est un document en anglais. [PDF&nbsp;600.1&nbsp;
  <abbr title="kilobyte">kB</abbr>] 
</a>

Megabytes - MB

Voir le code

<a class="hq-lien" href="#">Ceci est un document en anglais. [PDF&nbsp;89.9&nbsp;
  <abbr title="megabyte">MB</abbr>] 
</a>

Document disponible en français seulement

Voir le code

<a class="hq-lien" href="#">Ceci est un document anglais disponible en français seulement. [PDF&nbsp;851&nbsp;
  <abbr title="kilobyte">kB</abbr> – in French only] 
</a>

Document ouvrirant un nouvel onglet

Voir le code

<a class="hq-lien" href="#" target="_blank" rel="noopener">Ceci est un document en anglais qui ouvrira dans un nouvel onglet. [XLS&nbsp;111.2&nbsp;
  <abbr title="megabyte">MB</abbr>] 
  <svg class="hq-icone-petite" aria-label="This link will open a new tab.">
    <use href="/@hydroquebec/assets/dist/icones/sprite.svg#hq-icone-lien-externe"></use>
  </svg>
</a>