property real-estate listing detail apartment house agent property real-estate listing apartment house agent price viewing detail real estate property detail page apartment listing with sidebar and agent
Property Listing Base
Fetch pattern JSON:
curl https://webspire.de/patterns/property-listing/base.json base.html
<section class="ws-property-listing bg-[var(--ws-property-listing-bg)] py-16">
<div class="mx-auto max-w-6xl px-6">
<article>
<!-- Image Grid -->
<div class="grid grid-cols-1 gap-3 sm:grid-cols-3 sm:grid-rows-2">
<div class="sm:col-span-2 sm:row-span-2">
<div class="h-64 w-full rounded-xl bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 sm:h-full" aria-label="Main property photo"></div>
</div>
<div>
<div class="h-40 w-full rounded-xl bg-gradient-to-br from-blue-100 to-slate-200 dark:from-blue-900/30 dark:to-slate-800 sm:h-full" aria-label="Property photo 2"></div>
</div>
<div>
<div class="h-40 w-full rounded-xl bg-gradient-to-br from-emerald-100 to-slate-200 dark:from-emerald-900/30 dark:to-slate-800 sm:h-full" aria-label="Property photo 3"></div>
</div>
</div>
<!-- Title & Address -->
<div class="mt-8">
<h1 class="text-3xl font-bold text-slate-900">Modern Loft Apartment with City Views</h1>
<p class="mt-2 text-lg text-slate-500">Schönhauser Allee 42, 10435 Berlin Prenzlauer Berg</p>
</div>
<!-- Attribute Strip -->
<dl class="mt-6 flex flex-wrap gap-6 border-y border-slate-200 py-4">
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4"/></svg>
<div>
<dt class="sr-only">Bedrooms</dt>
<dd class="text-sm font-semibold text-slate-900">3 Beds</dd>
</div>
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M4 12h16M6 12V8a4 4 0 018 0v4"/></svg>
<div>
<dt class="sr-only">Bathrooms</dt>
<dd class="text-sm font-semibold text-slate-900">2 Baths</dd>
</div>
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5"/></svg>
<div>
<dt class="sr-only">Area</dt>
<dd class="text-sm font-semibold text-slate-900">120 m²</dd>
</div>
</div>
<div class="flex items-center gap-2">
<svg class="h-5 w-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<div>
<dt class="sr-only">Year Built</dt>
<dd class="text-sm font-semibold text-slate-900">Built 2020</dd>
</div>
</div>
</dl>
<!-- 2-Column Layout -->
<div class="mt-10 grid grid-cols-1 gap-10 lg:grid-cols-3">
<!-- Left: Description + Features -->
<div class="lg:col-span-2">
<h2 class="text-xl font-bold text-slate-900">About this property</h2>
<div class="mt-4 space-y-4 text-slate-600">
<p>This stunning loft apartment is located in the heart of Prenzlauer Berg, one of Berlin's most desirable neighborhoods. Floor-to-ceiling windows flood the open-plan living area with natural light, offering panoramic views of the city skyline.</p>
<p>The modern kitchen features premium appliances and a breakfast bar. The primary bedroom includes an en-suite bathroom with rainfall shower and heated floors. Two additional bedrooms provide flexibility for a home office or guest room.</p>
</div>
<h3 class="mt-8 text-lg font-semibold text-slate-900">Features</h3>
<ul class="mt-4 grid grid-cols-1 gap-2 sm:grid-cols-2">
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Floor-to-ceiling windows
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Underfloor heating
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Private balcony
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Elevator access
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Secure underground parking
</li>
<li class="flex items-center gap-2 text-sm text-slate-600">
<svg class="h-4 w-4 text-emerald-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Energy rating A+
</li>
</ul>
</div>
<!-- Right: Sticky Sidebar -->
<aside class="lg:sticky lg:top-8 lg:self-start">
<div class="rounded-2xl border border-slate-200 bg-[var(--ws-color-surface)] p-6 shadow-sm">
<p class="text-3xl font-bold text-slate-900">€485,000</p>
<p class="mt-1 text-sm text-slate-500">Est. €1,850/mo mortgage</p>
<a href="#" class="mt-6 block w-full rounded-xl bg-indigo-600 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-slate-800">Schedule Viewing</a>
<hr class="my-6 border-slate-200">
<!-- Agent Card -->
<div class="flex items-center gap-3">
<div class="h-12 w-12 shrink-0 rounded-full bg-gradient-to-br from-indigo-200 to-blue-300 dark:from-indigo-700 dark:to-blue-800" aria-hidden="true"></div>
<div>
<p class="text-sm font-semibold text-slate-900">Anna Schneider</p>
<p class="text-xs text-slate-500">Berlin Realty Group</p>
</div>
</div>
<a href="tel:+4930123456" class="mt-4 block w-full rounded-xl border border-slate-200 px-6 py-2.5 text-center text-sm font-medium text-slate-700 transition hover:bg-slate-50 dark:hover:bg-slate-700">Call Agent</a>
</div>
</aside>
</div>
</article>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Experimental Draft
propertyreal-estatelistingdetailapartmenthouseagent
Slots
| Name | Required | Description |
|---|---|---|
| image-grid | Yes | Image gallery with 1 large and 2 smaller property photos. |
| title-address | Yes | Property title and address line. |
| attributes | Yes | Attribute strip with key property stats (beds, baths, area, year). |
| description | Yes | Property description and features list. |
| sidebar | Yes | Sticky sidebar with price, CTA, and agent contact card. |