Aides

Lien étendu

La classe .stretched-link étend la zone cliquable d’un lien à tout son bloc parent positionné, par exemple une carte entière. Un seul lien reste dans le code, mais toute la carte devient cliquable.

.stretched-link ajoute au lien un pseudo-élément ::after positionné en absolu qui recouvre le plus proche ancêtre de position relative. Les cartes sont déjà positionnées ; pour tout autre bloc, ajoutez .position-relative au parent.

Carte entièrement cliquable#

Cliquer n’importe où sur la carte ouvre le lien. Le lien « Voir le livret » étend sa zone à toute la carte.

Livret A

Solde disponible : 1 250 000 FCFA

Voir le livret

<div class="card" style="max-width: 20rem">
  <div class="card-body">
    <h3 class="card-title h5">Livret A</h3>
    <p class="card-text">Solde disponible : 1 250 000 FCFA</p>
    <a href="#" class="stretched-link">Voir le livret</a>
  </div>
</div>

Élément positionné#

Hors d’une carte, ajoutez .position-relative au parent pour délimiter la zone cliquable.

Actif

Prêt scolaire

Voir le détail

<div class="d-flex align-items-center gap-3 border rounded p-3 position-relative" style="max-width: 24rem">
  <span class="badge text-bg-success">Actif</span>
  <div>
    <h3 class="h6 mb-0">Prêt scolaire</h3>
    <a href="#" class="stretched-link link-secondary">Voir le détail</a>
  </div>
</div>

Un autre lien reste cliquable#

Pour garder un second lien utilisable dans la zone étendue, donnez-lui .position-relative, qui le place au-dessus du pseudo-élément.

Carte Visa Classic

Plafond de paiement : 500 000 FCFA. Modifier le plafond

Gérer la carte

<div class="card" style="max-width: 20rem">
  <div class="card-body">
    <h3 class="card-title h5">Carte Visa Classic</h3>
    <p class="card-text">
      Plafond de paiement : 500 000 FCFA.
      <a href="#" class="position-relative">Modifier le plafond</a>
    </p>
    <a href="#" class="stretched-link">Gérer la carte</a>
  </div>
</div>

Classes et variables

Classes et variables
Élément	Valeur par défaut	Rôle
`.stretched-link`	—	Ajoute un pseudo-élément qui recouvre le parent positionné le plus proche.
`.position-relative`	—	Délimite la zone cliquable pour un bloc qui ne l’est pas déjà.
`$stretched-link-pseudo-element`	`after`	Pseudo-élément utilisé.
`$stretched-link-z-index`	`1`	Niveau de superposition du pseudo-élément.

Bonnes pratiques

À faire

Gardez un seul lien étendu par bloc, avec un texte explicite qui décrit la destination.
Placez les autres liens ou boutons du bloc au-dessus avec .position-relative.
Appliquez un style de focus visible sur le lien : l’anneau doit entourer tout le bloc (voir Anneau de focus).

À éviter

N’utilisez pas .stretched-link sur plusieurs liens du même bloc : ils se recouvriraient.
N’utilisez pas .stretched-link sur un parent avec transform, filter ou will-change : il devient la référence de positionnement.

Accessibilité

Le lecteur d’écran n’annonce qu’un seul lien : son texte doit suffire à comprendre la cible, hors contexte.
Le texte du bloc ne se sélectionne plus facilement à la souris, car le pseudo-élément le recouvre : évitez cette classe quand l’utilisateur doit pouvoir copier le texte.
Un bloc entièrement cliquable doit rester utilisable au clavier : le lien reçoit le focus comme n’importe quel lien.