CMS Real Estate Card is a fully interactive property listing component featuring a cinematic hover reveal on the front and a 3D flip to expose detailed property information on the back. Every content field sits at the top level for direct Framer CMS variable binding, making it ready for dynamic property listings at scale. Ideal for real estate agencies, vacation rental platforms, Airbnb-style directories, and property investment portfolios.
3D flip with back-face details — Click or hover to flip the card and reveal a scrollable detail panel with property specs, full description, and agent branding.
Cinematic hover reveal — The property image expands edge-to-edge with a gradient overlay, while text, pills, and the CTA transition to a dark-on-image layout.
Full CMS compatibility — All content controls (price, address, beds, baths, agent, description, details) are ready to bind to any Framer CMS collection.
5 built-in themes + full custom palette — Light, Dark, Warm, Ocean, and Midnight presets, plus a Custom mode with 13 individually adjustable color controls.
Premium micro-interactions — Animated divider lines, accent bar expansion on flip, detail grid hover-lift effects, heart favourite animation, and flip icon rotation.
Photo (Responsive Image)
Price
Price Label (e.g. "List Price", "/night")
Address
Location
Bedrooms
Bathrooms
Area (with units)
Show/hide toggles for each
Show/hide badge
Badge text
Badge color preset (Gold, Green, Red, Blue, Gray)
Agent Photo (Responsive Image)
Agent Name
Time Label (e.g. "2 days ago", "Just listed")
Button text
Button link (native Framer Link)
Show/hide favourite heart
Back title
Full description (textarea)
4 configurable detail pairs (label + value)
Agency name
Theme selector (Light, Dark, Warm, Ocean, Midnight, Custom)
Border radius
Custom Colors (13 controls: card background, text, secondary, accent, button background, button text, pill background, border, divider, badge background, badge text, flip icon background, flip icon color)
Flip trigger (Click or Hover)
Flip speed (300–1200ms)
Hover reveal speed (200–1000ms)
Heading font (price, property name, detail values)
Body font (address, description, labels)
Button font
Real estate agency websites — Showcase property listings with at-a-glance pricing and features on the front, and comprehensive specs on the back.
Vacation rental and Airbnb-style platforms — Display nightly rates, amenities, and property descriptions with a premium interactive feel.
Property investment portfolios — Present development projects or investment opportunities with detailed information behind a clean card interface.
CMS-powered listing directories — Bind every field to a Framer CMS collection and generate dozens of unique property cards from a single component instance.
Drop it onto any property page and have a polished, interactive listing card that keeps visitors engaged longer.
We design and build custom Framer components. Get in touch at contact@teampixel.com.au.
Aidan Looker
