Superanfitrión
Ático con terraza en Malasaña
2 hab.1 baño68 m²
1.450 € al mes
HTML + CSSCards
Property listing card with gallery
A rental listing whose photos change as you move across them, with dots and a save button.
Settings
16px
1x
Code
<article class="uv-kpg"><div class="ph" tabindex="0" aria-label="Photos, use the arrow keys"><i style="background:linear-gradient(180deg,#bfe3ff 0 45%,#f4e9da 45%),linear-gradient(90deg,#0000 30%,#c99f73 30% 70%,#0000 70%)" class="on"></i><i style="background:radial-gradient(60% 50% at 70% 30%,#fff6d8,#0000 70%),linear-gradient(135deg,#f3e3cc,#d9b892)"></i><i style="background:linear-gradient(180deg,#e8eef5 0 60%,#9fb2c6 60%),radial-gradient(30% 25% at 30% 35%,#ffd59a,#0000)"></i><i style="background:linear-gradient(160deg,#7fb0d9,#2f5d86 70%),linear-gradient(0deg,#3f6e4a 0 25%,#0000 25%)"></i><span class="dots"><b class="on"></b><b></b><b></b><b></b></span><button type="button" class="sv" aria-pressed="false" aria-label="Save"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z"/></svg></button><span class="bg">Superhost</span></div><div class="tx"><h3>Penthouse with terrace in Malasaña</h3><p class="mt"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 18v-6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6M3 15h18M6 10V7a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v3"/></svg>2 bed</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14v3a4 4 0 0 1-4 4H9a4 4 0 0 1-4-4zM7 12V6a2 2 0 0 1 3.5-1.3"/></svg>1 bath</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M4 10h16M10 10v10"/></svg>68 m²</span></p><p class="pr"><b>1.450 €</b> <span>per month</span></p></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
Rental and real estate sites let people preview several photos without opening the listing. This card splits the image into invisible zones, so moving the pointer across it flips through four photos with a gentle zoom, and the dots below follow. Arrow keys do the same when the gallery has focus. A heart in the corner saves the listing with a pop.
Details stay short: rooms, bathroom and size with small icons, then the monthly price. Replace the gradient placeholders with real photos and keep the zones and dots as they are.