Botella térmica 750 ml
Mantiene el frío 24 h y el calor 12 h.
34,90 €
HTML + CSSCards
Product card with color picker
A bottle floats over a colored circle; choosing another finish recolors the bottle and the background.
Settings
16px
1x
Code
<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>Insulated bottle 750 ml</h3><p>Keeps drinks cold for 24 h and hot for 12 h.</p><fieldset><legend>Finish</legend><label style="--c:#2f8f6b"><input type="radio" name="uv-kpc" checked><span aria-label="Sage"></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="Ocean"></span></label><label style="--c:#1f2937"><input type="radio" name="uv-kpc"><span aria-label="Graphite"></span></label></fieldset><div class="ft"><b>34,90 €</b><button type="button">Add</button></div></div></article>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Cards
See all CardsWhere to use it
Online shops sell more when shoppers can see the variant they picked, not just a label. This product card draws a thermal bottle in CSS, floating gently over a soft circle; four finish swatches below recolor both the bottle and the circle at once, with a smooth transition. Price and an add button complete the card.
The swatches are native radio buttons, so the chosen finish submits with a form and works with the keyboard. Replace the drawn bottle with a product photo on a transparent background and keep the color logic as is.