Lien

Liens de texte soulignés aux couleurs d’action du DSBJ, avec variantes de taille et disposition d’icônes. Un lien ouvrant un nouvel onglet affiche automatiquement une icône « externe » lorsque target="_blank" est utilisé.

Exemple

Consulter la démarche

<a href="#" class="bj-link">Consulter la démarche</a>

Variantes

Lien petit Lien grand Retour à la liste Suite

Dans un paragraphe : lien reset reprend la couleur du texte.

Site officiel (nouvel onglet)

<a href="#" class="bj-link bj-link--sm">…</a>
<a href="#" class="bj-link bj-link--icon-left"><i class="ri-arrow-left-line"></i> …</a>
<a href="https://…" class="bj-link" target="_blank" rel="noopener noreferrer">…</a>

Tailles

Petit Moyen (défaut)Grand

<a href="#" class="bj-link bj-link--sm">Petit</a>
<a href="#" class="bj-link">Moyen (défaut)</a>
<a href="#" class="bj-link bj-link--lg">Grand</a>

Icônes × tailles

Gauche sm Gauche md Gauche lg

Droite sm Droite md Droite lg

<!-- Icône à gauche : sm, md, lg -->
<a href="#" class="bj-link bj-link--icon-left bj-link--sm"><i class="ri-arrow-left-line"></i> …</a>
<a href="#" class="bj-link bj-link--icon-left"><i class="ri-arrow-left-line"></i> …</a>
<a href="#" class="bj-link bj-link--icon-left bj-link--lg"><i class="ri-arrow-left-line"></i> …</a>
<!-- Icône à droite : sm, md, lg -->
<a href="#" class="bj-link bj-link--icon-right bj-link--sm">… <i class="ri-arrow-right-line"></i></a>
<a href="#" class="bj-link bj-link--icon-right">… <i class="ri-arrow-right-line"></i></a>
<a href="#" class="bj-link bj-link--icon-right bj-link--lg">… <i class="ri-arrow-right-line"></i></a>

Reset avec icônes

Reset et icône à gauche

Reset et icône à droite

<a href="#" class="bj-link bj-link--reset bj-link--icon-left"><i class="ri-arrow-left-line"></i> …</a>
<a href="#" class="bj-link bj-link--reset bj-link--icon-right">… <i class="ri-arrow-right-line"></i></a>

Classes CSS

Classe	Description
`bj-link`	Lien standard : couleur d’action, soulignement, survol renforcé.
`bj-link--sm / bj-link--lg`	Corps de texte plus petit ou plus grand.
`bj-link--icon-left`	Flex avec icône avant le libellé.
`bj-link--icon-right`	Flex avec icône après le libellé.
`bj-link--reset`	Hérite de la couleur du texte ; soulignement au survol.

Avec target="_blank", le DSBJ ajoute une glyphe externe via pseudo-élément (police Remix Icon).