HTML + CSSRadio buttons
Radio cards with icons
Each option is a small card with an icon; the chosen one lifts up and its border lights up.
Settings
16px
1x
Code
<div class="uv-rdc"><label><input type="radio" name="rdc" checked><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11l8-7 8 7v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/></svg><b>Home</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h18v12H3zM8 7V4h8v3"/></svg><b>Office</b></span></label><label><input type="radio" name="rdc"><span class="cd"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 7v9H3v-9z M9 19v-5h6v5"/></svg><b>Shop</b></span></label></div>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 Radio buttons
Where to use it
Cards make a choice feel concrete when you can picture each option. Think of a cleaning service asking what kind of place you have, or the address type in a delivery form: house, office or shop, each with its own icon. Radio button cards in HTML and CSS that are easy to tap on a phone.
Icons do half the work here, so pick ones that really tell the options apart. Three or four cards fit in a row; with more, let them wrap onto a second line rather than shrinking them.