Timbres pour le mode de livraison
Chaque mode de livraison est un timbre dentelé : quand tu le choisis, un cachet d'encre tombe dessus avec ses ondulations.
Réglages
Code
<fieldset class="uvq04-pst2"><legend>Livraison</legend><div class="op"><label style="--c:#2f7f73"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>2,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 18h13.5c2.5 0 4-1.6 4-3.6V12"/><circle cx="10" cy="12" r="5.2"/><path d="M10 12a2 2 0 1 1 2-2"/><path d="M18.5 12V7.5M20.5 12V8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Économique</span><small>5-7 jours</small></label><label style="--c:#c98a2b"><input type="radio" name="uvq04-pst2" checked><span class="sp"><span class="st"><span class="in"><em>4,50 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 7h11v9h-11zM13.5 10h4l3 3v3h-7"/><circle cx="6.5" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Standard</span><small>2-3 jours</small></label><label style="--c:#b23a3a"><input type="radio" name="uvq04-pst2"><span class="sp"><span class="st"><span class="in"><em>7,90 €</em><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M2.5 13.5l19-7-5.5 13-4-5z"/><path d="M12 14.5l9.5-8"/></svg></span></span><svg class="pm" viewBox="0 0 60 40" aria-hidden="true"><circle cx="20" cy="20" r="13"/><circle cx="20" cy="20" r="9.5"/><path d="M36 12q4-3 8 0t8 0t8 0M36 20q4-3 8 0t8 0t8 0M36 28q4-3 8 0t8 0t8 0"/></svg></span><span class="nm">Urgent</span><small>24 h</small></label></div></fieldset>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 Boutons radio
Voir tout : Boutons radioOù l’utiliser
Les modes de livraison prennent la forme de trois timbres-poste aux vraies dentelures, obtenues avec un masque CSS, chacun avec un prix, une icône au trait et une couleur rétro adoucie. En choisir un l'incline légèrement et fait tomber dessus un cachet rond aux lignes ondulées, avec un petit rebond. Idéal pour un tunnel de paiement, une papeterie ou une livraison soignée.
La couleur principale est l'encre du cachet et la secondaire le papier du timbre. Chaque timbre prend sa couleur dans l'attribut style : accorde-les à ta marque et garde court le nom et le délai sous chacun.