Botella térmica 750 ml
Mantiene el frío 24 h y el calor 12 h.
34,90 €
HTML + CSSCards
Producto con selector de color
Una botella flota sobre un círculo de color; al elegir otro acabado cambian la botella y el fondo.
Ajustes
16px
1x
Código
<article class="uv-kpc" style="--p:#2f8f6b"><div class="st"><i class="bg"></i><span class="bt"><i class="cp"></i><i class="bd"></i><i class="lb"></i></span><i class="sh"></i></div><div class="tx"><h3>Botella térmica 750 ml</h3><p>Mantiene el frío 24 h y el calor 12 h.</p><fieldset><legend>Acabado</legend><label style="--c:#2f8f6b"><input type="radio" name="uv-kpc" checked><span aria-label="Salvia"></span></label><label style="--c:#e9785a"><input type="radio" name="uv-kpc"><span aria-label="Coral"></span></label><label style="--c:#4a6cf7"><input type="radio" name="uv-kpc"><span aria-label="Océano"></span></label><label style="--c:#1f2937"><input type="radio" name="uv-kpc"><span aria-label="Grafito"></span></label></fieldset><div class="ft"><b>34,90 €</b><button type="button">Añadir</button></div></div></article>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Cards
Ver todos: CardsDónde usarlo
Las tiendas online venden más cuando se ve la variante elegida, no solo su nombre. Esta tarjeta dibuja en CSS una botella térmica que flota suave sobre un círculo; cuatro muestras de acabado debajo cambian a la vez el color de la botella y del círculo con una transición suave. Precio y botón de añadir completan la tarjeta.
Las muestras son radios nativos, así que el acabado elegido viaja con el formulario y funciona con teclado. Cambia la botella dibujada por una foto del producto con fondo transparente y mantén la lógica de color.