Property Listing Pro for HubSpot

A real-estate listing module for HubSpot CMS with nested collections, two layouts (grid, list), live search across address and MLS, property type / status / bedroom filters, status and photo badges, specs row, rich detail drawer with photo gallery and inquiry form, and Schema.org RealEstateListing JSON-LD. 80+ style controls. No HubDB. Works on CMS Starter.

Demo 1

Grid Layout · Sidebar Filters · Drawer Detail

3-column grid on a subtle zinc-50 background. Left sidebar filters (property type, status, bedrooms) and live search. Bordered cards, monochrome status badges, beds / baths / sqft / lot specs row. Click View Full Listing on the Malibu or Manhattan Beach property to open the detail drawer with gallery, long description, property details table, features, and inquiry form.

Demo 2

List Layout · Top Toolbar · Expand Detail

Photo-left horizontal rows on a white background. Top toolbar with live search and property type / status pills. Mixed for-sale and for-rent inventory with /mo price suffixes. Click View Details on the Broadway penthouse to expand the in-line detail with gallery, features, and a tour-request form.

About Property Listing Pro

Property Listing Pro is a standalone HubSpot CMS module that turns any page into a real-estate listing portal. Nested collections + property repeaters edited from the page editor, two layouts (grid, list), live search across title / address / MLS, property-type / status / bedroom filters, status and special badges, specs row, and a rich detail view (expand-below or side-drawer modal) with photo gallery, long description, property details table, features, and inquiry form. Schema.org RealEstateListing JSON-LD built in. 140+ style controls. Defaults ship in shadcn-monochrome out of the box. No HubDB. Works on CMS Starter.

Features at a Glance

Nested repeaters — Up to 10 collections × 50 listings each. 500 properties per instance.
Two layouts, both fully carded — Grid (photo cards, 1–4 columns with auto-reflow) and List (horizontal photo-left rows). Both share the same card border / radius / shadow / hover styling.
Auto-reflow grid — Cards never collapse below your configured minimum width (default 260 px). Below that, the grid drops a column automatically; above it, the user's columns setting caps the layout.
10 property types — Single Family, Condo, Townhouse, Multi-Family, Apartment, Loft, Land, Commercial, Villa, Penthouse. Auto-generated filter pills.
7 listing statuses — For Sale, For Rent, Sold, Pending, New Construction, Coming Soon, Off Market. Independent color control per status.
Auto bedroom filter — Generates 1 bd / 2 bd / 3 bd / 4+ bd pills from actual listing data.
11 special badges — New Listing, Open House, Price Drop, Hot Property, Waterfront, Luxury, Investment, Reduced, Must See, Virtual Tour.
Full real-estate data model — Address, city, state, ZIP, neighborhood, beds, baths, square footage, lot size, year built, HOA fee, property tax, MLS #, listing ID, price per sqft.
Live search — Matches title, full address, city, ZIP, neighborhood, and MLS # in real time. Combines with filter pills.
Detail view (expand or drawer) — Rich per-listing detail view, expand-below-the-card or side-drawer-modal with single-scroll architecture (header always visible, body scrolls), or disable for a direct external link.
Long description (richtext) — Per-listing richtext field rendered in the detail view. Falls back to the short description if empty.
Photo gallery — Up to 12 additional images per listing with clickable thumbnails.
Features & amenities list — Up to 30 icon + text entries per listing.
Additional property details — Up to 40 custom label/value rows, merged with built-in fields.
Inquiry form — HubSpot form rendered inside every detail view with editable heading and description copy.
Price handling — Numeric price with currency symbol, short suffix (/mo, /yr) appended, or long suffix replacing numeric.
Multi-currency — 17 ISO 4217 currency codes (USD, EUR, GBP, CAD, AUD, JPY, CHF, SEK, NOK, DKK, RON, PLN, MXN, BRL, INR, AED, SGD).
Area unit — Square feet (sqft, Schema.org FTK) or square meters (sqm, Schema.org MTK).
Schema.org RealEstateListing JSON-LD — RealEstateAgent + RealEstateListing + nested itemOffered (SingleFamilyResidence / Apartment / House) + Offer with price, currency, availability, businessFunction.
Full i18n — Every label editable.
Two font pickers — Heading and body fonts with theme inheritance defaults.

Style controls (140+ fields, every value editable)

Colors (40+) — bg, heading, eyebrow, subtitle, every status badge, every text variant (title / address / spec-label / spec-value / price / desc / broker), search states, filter states, CTA states, drawer surfaces, shadow color.
Typography sizes — heading, eyebrow, subtitle, cat_name, title, address, spec, price, desc, badge, broker, filter, search, cta, detail heading.
Font weights (21 fields) — Per-element weights for eyebrow, heading, subtitle, cat_name, title, price, price_unit, stat_value, address_street, address_city, broker, desc, filter, filter_active, filter_label, badge, cta, count, cat_nav_active, detail_subhead, spec_value.
Letter spacing (11 fields) — heading, eyebrow, cat_name, title, price, broker, badge, filter_label, cta, detail_subhead, detail_title (em values, ±).
Line heights (10 fields) — heading, subtitle, cat_name, cat_desc, address, broker, desc, stats, detail_richtext, detail_title.
Card — padding, border_radius, border_width, shadow (none/sm/md/lg) and shadow intensity multiplier, hover_shadow (+xl), hover_lift, image_height + radius, list_photo_width / height, mobile_image_height, gap, content_padding, content_top_gap, section_gap, stat_gap, cta_top_gap, badge_inset / padding / radius, cta_radius / padding.
Toolbar — search radius / padding, filter radius / padding, toolbar_gap.
Spacing — section padding top/bottom, header_gap, toolbar_cards_gap, category_gap, cat_header_gap.
Drawer — width (px) and max-vw cap, left border width, easing curve (Material / Soft expo / Sharp / iOS / ease / etc.), slide duration, shadow blur / offset / opacity, backdrop color / opacity / blur.
Detail view — bg, text, heading, label, divider colors; close button bg / text / size / radius / border / hover opacity / hover scale; padding, body gap, header gap / padding, form padding, gallery gap, thumb min, specs and features gaps, feature icon size, form input padding, textarea min-height.
Advanced — subtitle max-width, eyebrow / heading margins, cat icon container + svg sizes, cat header padding + inner gap, search icon offset + input pad, filter pills gap + label gap + groups divider padding, cat-nav top / inner gap / link padding / underline width, scroll-margin, sidebar offset / width / gap / inner gap / toolbar gap, min card width, address gap, CTA icon gap, transition duration (ms), focus outline width, no-results padding, expand reveal offset.
Responsive — bp_tablet, bp_mobile (custom breakpoints).

Responsive Behavior

Desktop — Auto-fill grid honors your columns setting. Sidebar filters or top toolbar. All specs visible.
Tablet / narrow desktop — Grid reflows automatically when card width drops below the configured minimum (no hard breakpoint needed). Sidebar layout stacks above grid below the tablet breakpoint.
Mobile — Single-column grid and list. Toolbar stacks. Drawer goes full-width. CTA buttons full-width.
Fluid typography — Heading, collection name, price, detail title, and detail price all use clamp() for fluid sizing — they shrink smoothly with viewport width inside the drawer too, no awkward step-downs.
Address / broker line wrapping — Long addresses, neighborhoods, and broker lines wrap onto multiple lines instead of truncating with an ellipsis.

Drawer UX

Single scroll context — Drawer header (status badge, title, address, price, close) is always visible. Only the body scrolls.
Body-scroll lock — Page underneath does not scroll while drawer is open.
Dismiss — Backdrop click, Esc, and the close button all dismiss. Focus returns to the trigger on close.
Customizable everything — bg, shadow blur / offset / opacity, backdrop blur, slide easing curve, slide duration, left border, max width (px) and max-vw cap, close button radius / border / hover opacity / hover scale.

Accessibility

Semantic HTML — Section landmarks, proper heading hierarchy, article tags on each listing card.
Keyboard navigation — Search, filter pills, CTA buttons, drawer close, and gallery thumbs fully keyboard operable.
ARIA labels — Search input, filter groups, section landmarks, status badges labeled. Drawer uses role="dialog" with aria-modal.
Focus indicators — Visible focus rings (width configurable). Focus returns to trigger on drawer close.
Color contrast — Default color combinations meet WCAG 2.1 AA.

Demo Notes

Demo 1 — Grid layout, 3 columns on zinc-50 #fafafa with left sidebar filters (property type, status, bedrooms + search). Bordered cards, monochrome status badges, six California coastal listings. Detail mode: side drawer — click "View Full Listing" on the Malibu oceanfront or Manhattan Beach bungalow.
Demo 2 — List layout on white background. Top toolbar with live search and type/status pills. Six downtown LA listings mixing for-sale and for-rent with /mo suffixes. Detail mode: expand-below-card — click "View Details" on the Broadway penthouse.