Property Listings

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

51 sectionsView all →
1–5 of 51
Menus & listings

Property Listings

Responsive · Animated
Menus & listings

Restaurant Menu

Responsive · Animated
Menus & listings

Class Timetable

Responsive · Animated
Features

Icon Grid Features

Responsive · Animated
Pricing

Three-Tier Pricing

Responsive · Animated

Property Listings — Free Website Section Template

Menus & listings · v1.0.0 · Updated 2026-10-22 · Responsive · GSAP animation · HTML, React & Vue

CategoryMenus & listings
Tagsreal estatepropertylistingshomescardssvglight
Updated October 20, 2026

What's included

Features

Cards with photo, status badge, price, title and address
Bedrooms, bathrooms and area, each optional
Themed SVG house art until you upload photos
Day, sunset and night illustration variations
Responsive grid of 1 to 12 homes with hover lift
"See all listings" link in the header
Fresh teal theme by default; any preset or brand kit
Export HTML, a ZIP, React or Vue, or fork to My Code

About this section

Property Listings — Free Real Estate Cards Section

Property Listings: Real estate listing cards in a responsive grid. Each card shows a photo with a status badge (For sale, To rent, Sold), the price, a title, the address and key facts such as bedrooms, bathrooms and floor area, and links to the full listing. Until you upload photos, every card shows a themed SVG house illustration, so the section looks finished with any colour preset.

Property Listings shows homes as clear, clickable cards: a photo with a status badge, the price, a short title, the address and the key facts buyers scan for, such as bedrooms, bathrooms and floor area.

Themed SVG art until you add photos

Every card starts with an inline SVG house illustration drawn in your theme colours, in three variations (day, sunset and night with lit windows). Upload a photo and it replaces the illustration on that card only, so the section looks finished from the start with any preset.

Built for browsing

Cards sit in a responsive grid of up to twelve, lift on hover and link to each full listing, with a "See all listings" link in the header. Leave any fact empty and it disappears.

Use it with the Contact Split Form for viewings and valuations. Export HTML, a ZIP, React or Vue.

Why use it

Why Use the Property Listings

🏠
Scannable at a glance
Price first, then location and key facts: the order buyers and renters actually read in.
🎨
Looks finished on day one
The SVG houses follow your colours, so the page never shows grey placeholders.
🔗
Every card is a link
The whole card opens the listing, which is easier to tap on phones than a small button.

How it’s different

How It’s Different From Other Free Section Templates

✎
Editable, not just copyable
Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.
◐
One theme for every section
Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.
⇲
Responsive by container
Container queries make each section adapt to its own width, in a full page, a column or a page builder.
✦
GSAP animation built in
Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.
</>
HTML, React and Vue
Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.
◍
Free, private, saved
No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

  1. 1
    Edit the contentFill in the heading and homes in the panel. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🏡
Estate agent homepage
Feature the newest homes for sale with photos, prices and bedroom counts, linking each card to its listing and the header link to all properties.
🔑
Lettings and rentals
Show rental homes with a "To rent" badge, the monthly price and the area, so renters can shortlist places before booking viewings.
🏗️
New-build development
Present the house types on a new development with "New" badges, floor areas and starting prices, each linking to its floor plan.
🏖️
Holiday homes
List villas and cottages with nightly prices, guest and bedroom counts and a photo, linking each card to its booking page.

Got questions?

Frequently Asked Questions

No. Each card shows a themed SVG house illustration until you upload a photo, so the section looks complete straight away.

The export is static HTML. To make it dynamic, render the same card markup from your property feed or CMS; the CSS works with any number of cards.

Yes. Bedrooms, bathrooms and area are free text, so you can write "2 guests", "EPC B" or "Garage" instead, and empty facts are hidden.

Yes. The houses are inline SVG with named parts, such as windows and roofs, so you can animate them with GSAP, for example in the Website Builder’s scroll animations.

It saves an editable copy of your Property Listings in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.