Commerce block

Map and Results Split

Results on one side, a drawn map on the other, scrolling independently. The map is explicitly decorative and out of the tab order — the list is the content, not its companion.

329 lineslucide-reactAdded 14 Sept 2026

map
listings
real estate
search
property

What's included

components/listing-map-split.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add listing-map-split

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Homes for sale in Bristol

142 properties · sorted by newest listed

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/listing-map-split.tsx

/**
 * <ListingMapSplit> — the map-and-results split every property search uses.
 *
 * Results on the start edge, a map on the end edge, both visible at once.
 * It is the defining screen of the genre — estate agents, holiday lets,
 * restaurant finders, anything where "where is it" is the first filter and
 * "what is it" is the second — and it is the one layout a catalog of
 * marketing sections cannot fake, because the two panes have to scroll
 * independently and the map has to stay put.
 *
 * THE MAP IS DECORATIVE AND SAYS SO. This is the decision worth reading.
 * A drawn map is a picture: it carries no information anyone can get at
 * without sight, and pins on it that duplicate the list beside them make a
 * keyboard user tab through every property twice to reach the pagination.
 * So the whole map pane is `aria-hidden` with no focusable descendants,
 * and the result list is not a companion to it — the list *is* the content,
 * and the map is an illustration of the list. When you swap in a real map,
 * keep that shape: the library's markers should not be in the tab order
 * unless they do something the list cannot.
 *
 * IT IS DRAWN, NOT TILED. No Mapbox token, no Google bill, no network
 * request, no layout shift, and nothing to rate-limit in a preview — an
 * inline SVG of plausible streets, a river and two parks. It is honest
 * about being a placeholder in the sense that nobody will mistake it for
 * their city, and it holds the exact space a real map will occupy, which is
 * the thing a screenshot in an `<img>` does not do at every breakpoint.
 *
 * PINS CARRY PRICE, NOT A GENERIC MARKER. A teardrop tells you a property
 * exists somewhere you can already see there is a property; the price is
 * the thing that makes a map worth scanning at all, and it is how a reader
 * decides which of forty pins to look up in the list.
 *
 * On a phone the map goes above the list at a fixed height rather than
 * disappearing, because "roughly where" is most of what a map is for on a
 * small screen, and a hidden map is the reason those sites ship a
 * map/list toggle nobody finds.
 */

import * as React from 'react'
import { Bed, Bath, Maximize2, MapPin } from 'lucide-react'

function instanceId(...parts: (string | undefined)[]): string {
  const text = parts.filter(Boolean).join('|')
  let hash = 0
  for (let i = 0; i < text.length; i++) hash = (Math.imul(hash, 31) + text.charCodeAt(i)) | 0
  return (hash >>> 0).toString(36).slice(0, 6)
}

export interface MapListing {
  title: string
  address: string
  /** Pre-formatted, currency included. See the note in <PriceTickerStrip>. */
  price: string
  /** The short form for the pin — "£615k". Falls back to `price`. */
  pinLabel?: string
  beds?: number
  baths?: number
  /** Floor area as a string, unit included — "1,240 sq ft", "115 m²". */
  area?: string
  /** A status worth a chip: "Under offer", "New", "Reduced". */
  status?: string
  /** Per-cent coordinates on the map pane, 0–100 from the top-left. */
  x?: number
  y?: number
  href?: string
}

export interface ListingMapSplitProps {
  heading?: string
  /** The result count, as a sentence. "142 homes in Bristol BS8". */
  resultSummary?: string
  listings?: MapListing[]
  className?: string
}

const DEFAULT_LISTINGS: MapListing[] = [
  {
    title: 'Four-bedroom Victorian terrace',
    address: 'Hampton Road, Redland',
    price: '£615,000',
    pinLabel: '£615k',
    beds: 4,
    baths: 2,
    area: '1,540 sq ft',
    status: 'New',
    x: 26,
    y: 30,
    href: '#',
  },
  {
    title: 'Two-bedroom garden flat',
    address: 'Chandos Road, Cotham',
    price: '£385,000',
    pinLabel: '£385k',
    beds: 2,
    baths: 1,
    area: '780 sq ft',
    x: 58,
    y: 22,
    href: '#',
  },
  {
    title: 'Warehouse conversion, top floor',
    address: 'Wapping Wharf, Harbourside',
    price: '£549,950',
    pinLabel: '£550k',
    beds: 3,
    baths: 2,
    area: '1,180 sq ft',
    status: 'Reduced',
    x: 44,
    y: 63,
    href: '#',
  },
  {
    title: 'Three-bedroom semi with studio',
    address: 'Kellaway Avenue, Bishopston',
    price: '£472,500',
    pinLabel: '£473k',
    beds: 3,
    baths: 1,
    area: '1,090 sq ft',
    x: 71,
    y: 48,
    href: '#',
  },
  {
    title: 'One-bedroom period conversion',
    address: 'Pembroke Road, Clifton',
    price: '£289,000',
    pinLabel: '£289k',
    beds: 1,
    baths: 1,
    area: '540 sq ft',
    status: 'Under offer',
    x: 16,
    y: 58,
    href: '#',
  },
  {
    title: 'Five-bedroom detached, corner plot',
    address: 'Downs Park East, Westbury Park',
    price: '£895,000',
    pinLabel: '£895k',
    beds: 5,
    baths: 3,
    area: '2,310 sq ft',
    x: 34,
    y: 12,
    href: '#',
  },
]

/**
 * The drawn map.
 *
 * `aria-hidden` on the whole pane, with the pins as spans rather than
 * links — see the header. `preserveAspectRatio="none"` so the streets
 * stretch to whatever box the pane ends up as rather than letterboxing.
 */
function DrawnMap({ listings }: { listings: MapListing[] }) {
  return (
    <div
      aria-hidden
      className="relative h-full w-full overflow-hidden rounded-2xl border border-border/60 bg-muted/40"
    >
      {/* `aria-hidden` here as well as on the wrapper. The wrapper alone is
          enough for a browser, but the drawing is the thing being hidden
          and saying so on the element itself survives somebody later
          lifting this <svg> out into its own component. */}
      <svg
        aria-hidden
        viewBox="0 0 100 100"
        preserveAspectRatio="none"
        className="h-full w-full text-border"
      >
        {/* Parks — under the streets, as they are on a real map. */}
        <rect x="4" y="4" width="22" height="17" rx="2" className="fill-emerald-500/15" />
        <rect x="72" y="62" width="24" height="26" rx="2" className="fill-emerald-500/15" />

        {/* The river. One curve, wide stroke, no outline. */}
        <path
          d="M-2 78 C 18 70, 30 88, 50 80 S 82 66, 102 74"
          className="fill-none stroke-sky-500/25"
          strokeWidth="6"
          strokeLinecap="round"
        />

        {/* Streets. Two weights, because a map where every road is the same
            width reads as graph paper. */}
        <g className="stroke-current opacity-70" strokeWidth="1.1" strokeLinecap="round">
          <path d="M0 26 H100" />
          <path d="M0 52 H100" />
          <path d="M30 0 V100" />
          <path d="M64 0 V100" />
        </g>
        <g className="stroke-current opacity-35" strokeWidth="0.5" strokeLinecap="round">
          <path d="M0 14 H100" />
          <path d="M0 38 H100" />
          <path d="M0 66 H100" />
          <path d="M0 90 H100" />
          <path d="M14 0 V100" />
          <path d="M46 0 V100" />
          <path d="M80 0 V100" />
          <path d="M92 0 V100" />
        </g>
      </svg>

      {/* Price pins, positioned over the drawing. Logical properties, so
          the layout still reads correctly right-to-left. */}
      {listings.map((listing) =>
        listing.x == null || listing.y == null ? null : (
          <span
            key={listing.title}
            /* The pin is centred on its coordinate, and `insetInlineStart`
               resolves to `right` in RTL — so the same negative shift would
               push it the wrong way there and the pin would sit half a label
               off its point. The `rtl:` counterpart flips it back. */
            className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2"
            style={{ insetInlineStart: `${listing.x}%`, top: `${listing.y}%` }}
          >
            {listing.pinLabel ?? listing.price}
          </span>
        ),
      )}
    </div>
  )
}

function ListingCard({ listing }: { listing: MapListing }) {
  return (
    <li>
      <a
        href={listing.href ?? '#'}
        className="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40"
      >
        {/* The photo slot. A flat tinted panel rather than a remote image:
            it holds the exact space a real photograph will take without a
            request, a licence or a layout shift. */}
        <div
          aria-hidden
          className="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"
        />

        <div className="min-w-0 flex-1">
          <div className="flex items-baseline justify-between gap-3">
            <p className="text-base font-semibold tabular-nums text-card-foreground">
              {listing.price}
            </p>
            {listing.status ? (
              <span className="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">
                {listing.status}
              </span>
            ) : null}
          </div>

          <p className="mt-0.5 truncate text-sm font-medium text-card-foreground">
            {listing.title}
          </p>

          <p className="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
            <MapPin aria-hidden className="h-3 w-3 shrink-0" />
            <span className="min-w-0 truncate">{listing.address}</span>
          </p>

          <p className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
            {listing.beds != null ? (
              <span className="inline-flex items-center gap-1">
                <Bed aria-hidden className="h-3.5 w-3.5" />
                {listing.beds} bed
              </span>
            ) : null}
            {listing.baths != null ? (
              <span className="inline-flex items-center gap-1">
                <Bath aria-hidden className="h-3.5 w-3.5" />
                {listing.baths} bath
              </span>
            ) : null}
            {listing.area ? (
              <span className="inline-flex items-center gap-1">
                <Maximize2 aria-hidden className="h-3.5 w-3.5" />
                {listing.area}
              </span>
            ) : null}
          </p>
        </div>
      </a>
    </li>
  )
}

export function ListingMapSplit({
  heading = 'Homes for sale in Bristol',
  resultSummary = '142 properties · sorted by newest listed',
  listings = DEFAULT_LISTINGS,
  className = '',
}: ListingMapSplitProps) {
  const headingId = `listing-map-heading-${instanceId(heading, resultSummary)}`

  return (
    <section
      aria-labelledby={headingId}
      className={`mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8 ${className}`}
    >
      <header>
        <h2 id={headingId} className="text-2xl font-bold tracking-tight sm:text-3xl">
          {heading}
        </h2>
        <p className="mt-1.5 text-sm text-muted-foreground">{resultSummary}</p>
      </header>

      {/* The map first in source order on narrow screens, beside the list
          on wide ones. `lg:order-last` rather than two renders — one DOM,
          one set of pins, no duplicate content to keep in step. */}
      <div className="mt-6 flex flex-col gap-6 lg:flex-row">
        <div className="h-64 shrink-0 lg:sticky lg:top-6 lg:order-last lg:h-[34rem] lg:w-[46%] lg:self-start">
          <DrawnMap listings={listings} />
        </div>

        <ul className="flex-1 space-y-3">
          {listings.map((listing) => (
            <ListingCard key={listing.title} listing={listing} />
          ))}
        </ul>
      </div>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/listing-map-split.tsx and import it where you need the section:

import { ListingMapSplit } from '@/components/listing-map-split'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`heading`	`string`	`'Homes for sale in Bristol'`
`resultSummary`The result count, as a sentence. "142 homes in Bristol BS8".	`string`	`'142 properties · sorted by newest listed'`
`listings`	`MapListing[]`	`DEFAULT_LISTINGS`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

listing-map-split.html

<!--
  Map and Results Split — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section aria-labelledby="listing-map-heading-gg6ec6" class="mx-auto w-full max-w-7xl px-4 py-12 sm:px-6 lg:px-8 ">
  <header>
    <h2 id="listing-map-heading-gg6ec6" class="text-2xl font-bold tracking-tight sm:text-3xl">Homes for sale in Bristol</h2>
    <p class="mt-1.5 text-sm text-muted-foreground">142 properties · sorted by newest listed</p>
  </header>
  <div class="mt-6 flex flex-col gap-6 lg:flex-row">
    <div class="h-64 shrink-0 lg:sticky lg:top-6 lg:order-last lg:h-[34rem] lg:w-[46%] lg:self-start">
      <div aria-hidden="true" class="relative h-full w-full overflow-hidden rounded-2xl border border-border/60 bg-muted/40">
        <svg aria-hidden="true" viewBox="0 0 100 100" preserveAspectRatio="none" class="h-full w-full text-border">
          <rect x="4" y="4" width="22" height="17" rx="2" class="fill-emerald-500/15"></rect>
          <rect x="72" y="62" width="24" height="26" rx="2" class="fill-emerald-500/15"></rect>
          <path d="M-2 78 C 18 70, 30 88, 50 80 S 82 66, 102 74" class="fill-none stroke-sky-500/25" stroke-width="6" stroke-linecap="round"></path>
          <g class="stroke-current opacity-70" stroke-width="1.1" stroke-linecap="round">
            <path d="M0 26 H100"></path>
            <path d="M0 52 H100"></path>
            <path d="M30 0 V100"></path>
            <path d="M64 0 V100"></path>
          </g>
          <g class="stroke-current opacity-35" stroke-width="0.5" stroke-linecap="round">
            <path d="M0 14 H100"></path>
            <path d="M0 38 H100"></path>
            <path d="M0 66 H100"></path>
            <path d="M0 90 H100"></path>
            <path d="M14 0 V100"></path>
            <path d="M46 0 V100"></path>
            <path d="M80 0 V100"></path>
            <path d="M92 0 V100"></path>
          </g>
        </svg>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:26%;top:30%">£615k</span>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:58%;top:22%">£385k</span>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:44%;top:63%">£550k</span>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:71%;top:48%">£473k</span>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:16%;top:58%">£289k</span>
        <span class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border border-primary/30 bg-background px-2 py-0.5 text-[11px] font-semibold tabular-nums text-primary shadow-sm rtl:translate-x-1/2" style="inset-inline-start:34%;top:12%">£895k</span>
      </div>
    </div>
    <ul class="flex-1 space-y-3">
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£615,000</p>
              <span class="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">New</span>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">Four-bedroom Victorian terrace</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Hampton Road, Redland</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>4 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>2 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>1,540 sq ft</span>
            </p>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£385,000</p>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">Two-bedroom garden flat</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Chandos Road, Cotham</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>2 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>1 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>780 sq ft</span>
            </p>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£549,950</p>
              <span class="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">Reduced</span>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">Warehouse conversion, top floor</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Wapping Wharf, Harbourside</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>3 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>2 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>1,180 sq ft</span>
            </p>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£472,500</p>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">Three-bedroom semi with studio</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Kellaway Avenue, Bishopston</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>3 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>1 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>1,090 sq ft</span>
            </p>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£289,000</p>
              <span class="shrink-0 rounded-full bg-primary/10 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-primary">Under offer</span>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">One-bedroom period conversion</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Pembroke Road, Clifton</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>1 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>1 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>540 sq ft</span>
            </p>
          </div>
        </a>
      </li>
      <li>
        <a href="#" class="group flex gap-4 rounded-xl border border-border/60 bg-card p-3 transition-colors hover:border-primary/40 hover:bg-muted/40">
          <div aria-hidden="true" class="hidden h-[96px] w-[128px] shrink-0 rounded-lg bg-gradient-to-br from-muted to-muted/40 ring-1 ring-inset ring-border/50 sm:block"></div>
          <div class="min-w-0 flex-1">
            <div class="flex items-baseline justify-between gap-3">
              <p class="text-base font-semibold tabular-nums text-card-foreground">£895,000</p>
            </div>
            <p class="mt-0.5 truncate text-sm font-medium text-card-foreground">Five-bedroom detached, corner plot</p>
            <p class="mt-0.5 inline-flex min-w-0 items-center gap-1 text-xs text-muted-foreground">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-map-pin h-3 w-3 shrink-0" aria-hidden="true">
                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                <circle cx="12" cy="10" r="3"></circle>
              </svg>
              <span class="min-w-0 truncate">Downs Park East, Westbury Park</span>
            </p>
            <p class="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground">
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bed h-3.5 w-3.5" aria-hidden="true"><path d="M2 4v16"></path><path d="M2 8h18a2 2 0 0 1 2 2v10"></path><path d="M2 17h20"></path><path d="M6 8v9"></path></svg>5 bed</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bath h-3.5 w-3.5" aria-hidden="true"><path d="M10 4 8 6"></path><path d="M17 19v2"></path><path d="M2 12h20"></path><path d="M7 19v2"></path><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5"></path></svg>3 bath</span>
              <span class="inline-flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-maximize2 lucide-maximize-2 h-3.5 w-3.5" aria-hidden="true"><path d="M15 3h6v6"></path><path d="m21 3-7 7"></path><path d="m3 21 7-7"></path><path d="M9 21H3v-6"></path></svg>2,310 sq ft</span>
            </p>
          </div>
        </a>
      </li>
    </ul>
  </div>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

8 more blocks in Product Listings

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Product Listings

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Product Listings blocks

View category

Product Card Grid

Responsive product cards with sale badges, ratings and a wishlist button layered above the card link so it stays clickable.

Product Listings142 lines1 dep11 Sept

Faceted Filter Sidebar

Category, size, colour and price facets as proper fieldsets, with colour swatches that carry their name as well as their hue.

Product Listings220 lines1 dep2 Sept

Collection Sort Toolbar

Result count, sort and density switch — with the count in an aria-live region, since it is the only feedback a filter change gives some users.

Product Listings131 lines1 dep2 Sept

Scroll-Snap Product Rail

A "you might also like" row on native scroll-snap — touch swiping, momentum and keyboard support for free, with no carousel library.

Product Listings118 linesNo deps

Comparing 3 of 3

Only show differences

2 rows are identical across all 3 and hidden.

Specifications compared across 3 products. 2 identical rows are hidden.
Specification	Field Over-Ear£249	Field Over-Ear Lite£179	Studio Reference£329
Price	£249	£179best	£329
Battery life	38 hours	44 hoursbest	30 hours
Weight	286 g	241 gbest	324 g
Noise cancelling	Adaptive, 3 levels	Passive only	Adaptive, 5 levels
Driver	40 mm dynamic	40 mm dynamic	50 mm planar
Water resistance	IPX4	IPX4	None
Warranty	2 years	2 years	5 yearsbest

Product Comparison Table

Three products side by side with the row labels pinned through a horizontal scroll, an "only show differences" toggle that says how many rows it hid, and "best" marked only where better means something.

Product Listings341 lines1 dep13 Sept

What is actually available

"In stock" on a listing that means "one of nine variants is in stock" is the single most expensive lie in commerce UI — it is discovered at checkout, and the basket is abandoned there.

Stock Availability List

Availability per variant stated before the cart, because discovering it at checkout is where the basket gets abandoned.

Product Listings149 linesNo deps10 Sept

The collection

Made to be repaired, not replaced

A grid of forty products with a one-line title is a search result. For anything considered, the reason the collection exists is what does the selling, and it belongs above the grid rather than on a linked story page nobody opens.

One factory, namedPorto, family-run, thirty years. The address is on the about page rather than implied by a photograph.
Repairs, not warrantiesSend it back at any age. Repair is charged at cost and typically beats replacing it.
Deadstock and offcutsWhich is why sizes run out and do not come back. The stock list says which.
Priced onceNo seasonal markdown, so nobody who bought in March is punished for it in July.

Collection Story Split

The editorial header above a collection grid, carrying the four facts that decide a considered purchase.

Product Listings157 linesNo deps13 Sept

Dinner

Served Wednesday to Sunday, 6pm until 10pm. One kitchen, one menu, changed when the produce changes rather than on a schedule.

To begin

Served until 3pm

Devilled eggs, brown crab, lovage(gf) (s)
9
Six halves. The crab is picked here on the morning it arrives.
Bread and cultured butter(v)
5
Sourdough from the Tuesday bake, salted butter churned in house.
Chicory, pear, hazelnut, aged ewe’s cheese(v) (gf) (n)
11
Bitter, sweet, salt. The pears are from a single orchard in Herefordshire.
Potted shrimp on toast(s)
12
Morecambe Bay brown shrimp, mace and cayenne, clarified butter.

Larger

Hogget shoulder for two, anchovy and rosemary(gf)
58
Four hours in the wood oven, carved at the table. Comes with greens and dripping potatoes.
Whole plaice, brown butter, capers, sea beet(gf)
28
On the bone. Ask and we will take it off for you.
Barley, wild mushroom, pickled walnut, curd(v) (n)
21
The mushrooms change weekly; ask what came in.
Dry-aged rib chop, bone marrow butter(gf)
market price
Thirty-five days. Priced by weight on the day.

To finish

Or a cheese plate, £4 a cut, £14 for four

Burnt honey and thyme tart(v)
10
Crème fraîche. The honey is from the roof of the building next door.
Quince, brown sugar, oat cream(ve) (df)
9
Poached slowly until it goes the colour of a penny.
Salted caramel and malt ice cream(v) (gf)
5 / 8 / 10
One scoop, two scoops, or three if the table is sharing.

(gf): Gluten free
(s): Contains shellfish
(v): Vegetarian
(n): Contains nuts
(ve): Vegan
(df): Dairy free

Please tell us about allergies before you order — we cook in one kitchen and cannot promise any dish is free of a trace. A discretionary 12.5% service charge is added to tables of six or more and goes to the people who served you.

Menu Course List

A restaurant menu typeset as a bill of fare rather than a product grid — dotted leaders to the price, dietary marks as abbreviations with a key, and prices as strings so “market price” still fits.

Product Listings282 linesNo deps