Oakfield Property. Free estate agency HTML & Astro template

About Oakfield Property

Oakfield Property is a nine-page estate agency template with a conventional agency header, photographic homepage and a prominent search panel. Forest green, white, Lora headings and consistent property cards give it a familiar residential-agency character. All three sample property cards link to their own complete detail pages, with galleries, specification tables, price context and property-specific enquiry links.

Best suited to: Small estate agencies and independent agents presenting a limited, manually maintained collection of homes for sale or rent.

Desktop and mobile screenshots

Captured from version 1.0.0 on 29 October 2026. Open a screenshot to inspect the full page.

Choose your download

Both ZIPs contain the same 9-page design. Neither requires an account, subscription, or license key.

What’s in the design

• Home places a buy/rent, location and property-type search panel below the photo hero. Search opens Properties with the selected query values.
• The collection has three sample listings: two houses for sale and one apartment to rent. Market, type, minimum bedrooms, budget, text search and saved-only filters combine, with result counts, reset and empty states.
• Budget filtering and price sorting require a selected market, so monthly rents are never compared with sale prices. Switching to both markets resets price sorting and disables the budget control.
• Willow House, Maple House and Station Apartment each have a complete separate page with two illustrative photographs, room/area facts, feature list, tenure and energy-information placeholders, cost context and viewing enquiry link.
• The browser-local shortlist persists selected property IDs across same-origin pages and tabs. It has a clear action and a current-page fallback if storage is unavailable; there is no account or cross-device sync.
• Native keyboard image viewing and property-preselected email enquiries are included. Buying & Selling contains practical prompts for buyers, sellers and renters. No live inventory, valuation or appointment booking is implied.

Verified page layouts

These 9 pages are included in both archives. Each link opens the live preview.

• Home ↗index.html
• Properties ↗properties.html
• Willow House ↗willow-house.html
• Maple House ↗maple-house.html
• Station Apartment ↗station-apartment.html
• About ↗about.html
• Buying & selling ↗buying-selling.html
• Contact ↗contact.html
• 404 ↗404.html

How the shortlist and viewing enquiries work

The shortlist stores only selected property IDs under a scoped localStorage key in the visitor’s browser. It does not create an account, transmit an enquiry, sync across devices or reserve a property. Clear shortlist removes this template’s saved IDs.

Each property enquiry link preselects the relevant listing on Contact. Required fields are validated, then the site prepares an encoded email draft. Nothing is sent or stored; the visitor opens an email app, reviews and sends it. No viewing or availability is confirmed. The [email protected] mailbox cannot receive email.

Set up the Astro edition

Extract the source ZIP and run these commands from its folder:

npm ci
npm run dev
npm run check
npm run build

The build produces a dist/ folder for static hosting. The source includes its shared template kit under vendor/template-kit, so it builds independently of our development workspace. Astro 7.4.4 and the Astro checker 0.9.12 are pinned; TypeScript 6.0.3 is the latest supported by that checker’s declared peer range.

Before you launch

• Choose HTML for direct file editing, or Astro for shared layouts and source-driven content.
• Replace the fictional identity, email, office details and property facts, prices, availability, tenure and energy information with accurate listing data.
• Edit src/site.ts for the three property records. src/pages/[property].astro generates a separate flat .html page for each record.
• Replace photos with properly licensed imagery. Update variants, src/images.json dimensions, alt text and ASSETS.md credits together.
• Keep property IDs unique. When changing the inventory, update the Contact select options to match; test property preselection, filters and shortlist. Update the scoped storage key for a separate deployment if needed.
• Set PUBLIC_SITE_URL to the real domain/folder URL with a trailing slash for canonical/social metadata, robots.txt and a 8-page sitemap. Leave PUBLIC_PREVIEW unset for production.
• Upload the entire HTML folder or Astro dist/. Configure unknown URLs to return 404.html with HTTP 404 status. Connect a separately tested delivery backend if enquiries must send directly.

A static, manually maintained three-property collection. No MLS/IDX/live feed, cloud accounts, valuation engine, confirmed viewings, tenancy workflow or message-delivery backend. Shortlist storage stays on the current browser; price controls separate sale prices and monthly rents.

License and assets

The original template code is released under the included MIT license. It permits personal and commercial use; retain the license notice when redistributing the code. Visible footer attribution is optional.

Exterior images are by Dillon Kydd and interiors by Francesca Tosolini under the Unsplash License. Each gallery uses illustrative photographs of separate spaces; the images do not verify one actual listing or its sample specification. Lora and Source Sans 3 use SIL OFL. The original house/tree mark and code are MIT. Unsplash License. Full asset credits.

Release verification

Both exact release archives were extracted and inspected. Each standalone source passed a clean npm ci, Astro check and production build outside our workspace; its HTML output matched the HTML edition byte for byte. Production domain/subfolder metadata, sitemap generation and noindex preview mode were tested. All page layouts fit 320px without document overflow. Local Lighthouse runs across every page on mobile and representative desktop pages scored 98–100 performance and 100 automated accessibility. These are lab results, not complete accessibility certification.

Version 1.0.0, reviewed 29 October 2026. Live preview. Plain HTML checksum. Standalone Astro source checksum. Oakfield Property is a fictional agency. Listings, locations, prices, specifications and office details are illustrative; photographs do not document one real property per listing.