About CMS Real Estate Card

What is CMS Real Estate Card?

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.

Core Features

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.

Controls inside Framer

Property Content

Photo (Responsive Image)
Price
Price Label (e.g. "List Price", "/night")
Address
Location

Features

Bedrooms
Bathrooms
Area (with units)
Show/hide toggles for each

Badge

Show/hide badge
Badge text
Badge color preset (Gold, Green, Red, Blue, Gray)

Agent

Agent Photo (Responsive Image)
Agent Name
Time Label (e.g. "2 days ago", "Just listed")

CTA and Actions

Button text
Button link (native Framer Link)
Show/hide favourite heart

Back Content

Back title
Full description (textarea)
4 configurable detail pairs (label + value)
Agency name

Style

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)

Animation

Flip trigger (Click or Hover)
Flip speed (300–1200ms)
Hover reveal speed (200–1000ms)

Typography

Heading font (price, property name, detail values)
Body font (address, description, labels)
Button font

Best use cases

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.