webdevpuneet.com

Property Listings

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

Related Section Templates

4 sectionsView all →
Menus & listings

Property Listings

Responsive · Animated
Menus & listings

Restaurant Menu

Responsive · Animated
Menus & listings

Product Grid

Responsive · Animated
Menus & listings

Class Timetable

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

Extend with AI

Take This Section Further With AI

Ask an AI assistant to add a filter bar for price and bedrooms, a favourite heart on each card, or a map view that highlights the hovered listing.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Create a property listings section in HTML and CSS.

- A header with eyebrow, heading and a "See all listings" link.
- A responsive grid (auto-fill, min 300px) of link cards; each has a 3:2 media area with a photo or an inline SVG house illustration coloured with CSS custom properties, a status pill, then price, title, address and a row of facts (beds, baths, area).
- Hover lift and focus-visible outline; theme colours as CSS custom properties.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

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.

Getting the most from it

Write the title as what makes the home special, such as "Corner house with a garden", and keep the address to the street and area so it reads quickly. Show the same facts on every card, price, bedrooms and size, so visitors can compare at a glance, and use the status badge for "For sale", "To let" or "Under offer". If you have more than a dozen homes, show your best six to twelve here and link "See all listings" to your property portal.

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.

In real websites

Website Templates That Use the Property Listings Section

The Property Listings section is part of 1 complete website template in the free Website Builder, so you can see it in a full page before you use it on its own: Real Estate Agency Website. Open any of them in the builder to edit the whole page, or keep customising this section by itself.

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. Every section is free for personal and commercial work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.