Omnira Section reference › Real estate
Property page "type": "property-detail"
The complete body of a single listing page: photo gallery, price, key facts, description, details table, features, floor plans, video tour, map, nearby places, mortgage calculator, agent contact card and tour booking form. Use it on the page generated for each property.
Example#
Paste this into the sections list of a page file:
JSON
{
"type": "property-detail",
"property": "@item"
}Options#
| Option | Type | Default | Description |
|---|---|---|---|
property | "@item" | object | — | The home to show. On a page with "each": "properties" use "@item". Without it the section renders nothing. |
Fields of each entry in property#
| Option | Type | Default | Description |
|---|---|---|---|
slug | string | — | Unique id (lowercase, dashes). Cards link to property-<slug>.html. |
title | string | — | Listing name. |
type | string | — | e.g. "House", "Apartment", "Villa", "Office". Used for the type filter and icon. |
status | string | — | "For Sale" or "For Rent" (exact spelling). |
price | number | — | Price as a plain number, e.g. 850000. Shown with the demo currency. |
period | string | — | For rentals, e.g. "/mo". |
city | string | — | City (used by the city filter). |
address | string | — | Street address. |
beds | number | — | Bedrooms (leave out or 0 for offices). |
baths | number | — | Bathrooms. |
area | number | — | Living area in sqft. |
image | string | — | Main photo. |
gallery | array of strings | — | Extra photos (the card shows the photo count). |
featured | boolean | — | Adds a "Featured" badge. |
agent | string | — | Slug of an agent in data.json "agents"; shows their photo and name on the card. |
date | string | — | Listing date as YYYY-MM-DD, used by "Newest first" sorting. |
description | string | array of strings | — | The Description block (one paragraph per array entry). |
features | array of strings | — | "Features & amenities" check list. |
garage | number | — | Garage spaces. |
year | number | — | Year built. |
lot | string | — | Lot size, e.g. "0.6 acres". |
hoa | string | — | HOA fees, e.g. "$450/mo". Shows "None" when left out. |
deposit | string | — | Rentals only: deposit text, e.g. "two months". Default "one month". |
id | string | — | Property ID shown in the details table. Defaults to the start of the slug in capitals. |
floorPlans | array | — | Floor plan accordion: [{"name": "Ground floor", "area": "2,950 sqft", "rooms": "Living, kitchen", "image": "assets/img/plan.svg", "text": "..."}]. |
video | string | — | YouTube/Vimeo embed URL for a "Video tour" block. |
map | string | — | What to search on the Google map. Defaults to "address, city". |
nearby | array | — | "What's nearby" columns: [{"title": "Schools", "icon": "mortarboard", "items": [{"name": "Bayside Elementary", "distance": "0.6 mi"}]}]. |
Fields of each entry in agents (data.json)#
| Option | Type | Default | Description |
|---|---|---|---|
slug | string | — | Matches the property's "agent" field. |
name | string | — | Agent name. |
role | string | — | Job title. |
image | string | — | Portrait. |
phone | string | — | Phone number. Required when the agent card is shown. |
email | string | — | Email address. Required when the agent card is shown. |
rating | number | — | Star rating out of 5 (optional). |
Tips#
- Used in the real estate demo on pages/property.json: {"each": "properties", "title": "{item.title}", "sections": [{"type": "property-detail", "property": "@item"}, ...]}. "each" makes the build create one page per home in data.json (property-azure-bay-villa.html...), and "@item" is the home each page is built for.
- Homes "For Sale" get a mortgage calculator; "For Rent" homes get a short rent and deposit note instead.
- The gallery shows 5 photos; the rest open in the full-screen viewer ("View all photos").
- The breadcrumb always links to index.html and properties.html. Keep those pages or edit the links in the built HTML.
- The common options (id, tone, padding...) are ignored by this section; only "hidden" works.
Editing it in the HTML files#
These pages are generated from data.json, so edit the home there and rebuild. In a built page the title is h1.pd-title, the price is .pd-price, the photos are the links in .pd-gallery (their data-src is the full-size image) and each block (Overview, Description...) is a section.pd-block.
Where it's used#
Open these pages in template/ to see it working:
- Real Estate:
template/real-estate/property-azure-bay-villa.html(sourcesrc/demos/real-estate/pages/property.json)