Sélecteur de couleur
Des pastilles de couleur rondes ; celle choisie reçoit un anneau animé et son nom s’affiche dessous.
Réglages
Code
<div class="uv-fcl"><div class="tt">Couleur</div><div class="rw"><button class="" style="--k2:#1d1d1f"><i></i></button><button class="on" style="--k2:#0071e3"><i></i></button><button class="" style="--k2:#34c759"><i></i></button><button class="" style="--k2:#ff9f0a"><i></i></button><button class="" style="--k2:#ff375f"><i></i></button><button class="" style="--k2:#af52de"><i></i></button></div><b class="nm">Bleu</b></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
La rangée de couleurs d’une fiche produit, c’est souvent là qu’on craque. Imaginez une boutique de sacs à dos en six teintes : on en touche une, un anneau se referme autour et le nom s’affiche en dessous. Changer la photo du produit en conséquence est l’étape suivante logique. Le terme courant : sélecteur de variantes, ou nuancier produit.
Affichez toujours le nom de la couleur, pas seulement la pastille : à l’écran, « Bleu marine » et « Noir » se confondent facilement. Ajoutez une bordure légère aux teintes très claires, sinon le blanc disparaît sur une page blanche.