Aller au contenu
BDU Cauriv0.1.0
Utilitaires

Liens

Les utilitaires de liens règlent l’opacité du lien, le décalage et l’opacité du soulignement. Ils se combinent avec les couleurs de lien de la page Liens colorés.

Opacité du lien#

Les classes link-opacity-{10|25|50|75|100} fixent l’opacité de la couleur du lien. Ajoutez le suffixe -hover pour la modifier uniquement au survol.

<p><a class="link-opacity-10" href="#">Opacité 10 : conditions de la carte</a></p>
<p><a class="link-opacity-25" href="#">Opacité 25 : conditions de la carte</a></p>
<p><a class="link-opacity-50" href="#">Opacité 50 : conditions de la carte</a></p>
<p><a class="link-opacity-75" href="#">Opacité 75 : conditions de la carte</a></p>
<p class="mb-0"><a class="link-opacity-100" href="#">Opacité 100 : conditions de la carte</a></p>

Opacité au survol#

Associez une couleur de lien, une opacité de base et une opacité de survol pour un retour visuel discret.

<p><a class="link-primary link-opacity-50 link-opacity-100-hover" href="#">Consulter mon solde</a></p>
<p class="mb-0"><a class="link-success link-opacity-25 link-opacity-75-hover" href="#">Ouvrir un compte épargne</a></p>

Décalage du soulignement#

Les classes link-offset-{1|2|3} éloignent le trait du texte. Leur variante -hover ne s’applique qu’au survol.

<p><a href="#">Décalage par défaut : demander un virement</a></p>
<p><a class="link-offset-1" href="#">Décalage 1 : demander un virement</a></p>
<p><a class="link-offset-2" href="#">Décalage 2 : demander un virement</a></p>
<p><a class="link-offset-3" href="#">Décalage 3 : demander un virement</a></p>
<p class="mb-0"><a class="link-offset-3-hover" href="#">Décalage 3 au survol : demander un virement</a></p>

Couleur et opacité du soulignement#

Les classes link-underline-{couleur} colorent le trait. Les classes link-underline-opacity-* règlent son opacité : utilisez-les avec link-underline (couleur du lien) ou avec une classe de couleur.

<p><a class="link-underline link-underline-opacity-0" href="#">Trait invisible : simuler un prêt</a></p>
<p><a class="link-underline link-underline-opacity-25" href="#">Trait à 25 % : simuler un prêt</a></p>
<p><a class="link-underline link-underline-opacity-75" href="#">Trait à 75 % : simuler un prêt</a></p>
<p><a class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover" href="#">Trait visible au survol : simuler un prêt</a></p>
<p><a class="link-underline-primary" href="#">Trait primaire</a>
  · <a class="link-underline-success" href="#">Trait succès</a>
  · <a class="link-underline-danger" href="#">Trait danger</a>
  · <a class="link-underline-warning" href="#">Trait avertissement</a></p>
<p class="mb-0"><a class="link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#">Combinaison complète : trouver une agence</a></p>

Classes de liens

ClasseEffet
link-opacity-10, -25, -50, -75, -100Définit --bs-link-opacity (0,1 / 0,25 / 0,5 / 0,75 / 1).
link-opacity-*-hoverMême réglage, uniquement au survol.
link-offset-1, -2, -3Décalage du soulignement : 0,125em, 0,25em, 0,375em.
link-offset-*-hoverMême décalage, uniquement au survol.
link-underlineColore le trait avec la couleur du lien, en tenant compte de --bs-link-underline-opacity.
link-underline-primary, -secondary, -success, -danger, -warning, -info, -light, -darkColorent le trait avec la couleur du thème.
link-underline-opacity-0, -10, -25, -50, -75, -100Définit --bs-link-underline-opacity.
link-underline-opacity-*-hoverMême opacité, uniquement au survol.

Variables associées

VariableRôle
--bs-link-color, --bs-link-color-rgbCouleur des liens (bleu foncé BDU, #0856A1).
--bs-link-hover-color, --bs-link-hover-color-rgbCouleur au survol.
--bs-link-opacityOpacité du texte du lien (1 par défaut).
--bs-link-underline-opacityOpacité du trait de soulignement.
$link-color, $link-hover-color, $link-decoration, $link-shade-percentageVariables Sass qui définissent la couleur, le survol, la décoration et l’assombrissement au survol (20 % par défaut).

Bonnes pratiques

À faire

  • Gardez un soulignement visible sur les liens placés dans un paragraphe : la couleur seule ne suffit pas à les repérer.
  • Utilisez les variantes -hover pour accentuer le survol, sans jamais cacher le lien au repos.

À éviter

  • N’abaissez pas l’opacité d’un lien de texte au point de rendre le contraste insuffisant.

Accessibilité

  • Un texte de lien doit garder un rapport de contraste d’au moins 4,5:1 avec son fond, même avec une opacité réduite.
  • Le survol ne doit pas être le seul indice d’interaction : le focus clavier reste visible.
Charte provisoire, déduite du site public de la BDU CI. Elle sera remplacée par la charte officielle.