Section reference › Real estate

Property listings `"type": "properties"`

Real estate listing cards with price, address, beds, baths and area, plus save and compare buttons. Can add a filter sidebar, sort bar, grid/list switch and pagination. Use it for featured homes, search results, rentals or a saved-homes page.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "properties",
  "tone": "alt",
  "eyebrow": "Featured listings",
  "title": "Handpicked homes this week",
  "items": {
    "$data": "properties",
    "limit": 6
  },
  "buttons": [
    {
      "label": "View all homes",
      "href": "properties.html",
      "style": "outline"
    }
  ]
}

Options#

Option	Type	Default	Description
`eyebrow`	string	—	Small label shown above the title.
`title`	string (HTML allowed)	—	Section heading. You can use <em> or <br> inside it.
`text`	string	—	Short intro paragraph under the title.
`headAlign`	string	`center`	Alignment of the eyebrow/title/text block. "start" puts it on the left. Values: `center \| start`
`items`	{"$data": "properties", ...} \| array	—	The listings, normally pulled from data.json, e.g. {"$data": "properties", "limit": 6} or {"$data": "properties", "where": {"status": "For Rent"}}.
`layout`	string	`grid`	"list" shows wide horizontal cards with the excerpt. Values: `grid \| list`
`columns`	number	`3`	Cards per row in the grid layout. With a sidebar it is always 2. Values: `2 \| 3`
`sidebar`	boolean	`false`	Adds a filter panel (keyword, status, city, type, bedrooms, max price, min area). It also reads filters from the page address, so the search section can send visitors here. Values: `true \| false`
`toolbar`	boolean	`on with a sidebar, else off`	Bar with the result count, a sort menu and a grid/list switch. Values: `true \| false`
`perPage`	number	—	Show this many listings per page with page buttons. Leave out to show all.
`mode`	string	—	"favorites" only shows homes the visitor saved with the heart button (stored in their browser). Use it for a "Saved homes" page. Values: `favorites`
`buttons`	array	—	Buttons shown centred below the section. See the "buttons" fields.

Also accepts the options every section accepts: id, tone, padding, fluid, class, hidden.

Fields of each entry in `items`#

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.
`excerpt`	string	—	Short description, shown in the list layout.
`date`	string	—	Listing date as YYYY-MM-DD, used by "Newest first" sorting.

Fields of each entry in `buttons`#

Option	Type	Default	Description
`label`	string	—	Button text. A button without a label is not shown.
`href`	string	—	Link address, e.g. "contact.html" or "#pricing". Default "#".
`style`	string	—	primary (default) \| outline \| light \| dark \| accent \| link. "link" is a text link with an arrow.
`icon`	string	—	Bootstrap Icons name shown after the label, without "bi-" (e.g. "arrow-right").
`video`	string	—	A YouTube/Vimeo embed URL. The button then opens the video in a pop-up instead of following href.

Variants and styles#

grid#

Default. Cards in a 3-column grid, e.g. featured listings on the home page.

JSON

{
  "type": "properties",
  "tone": "alt",
  "eyebrow": "Featured listings",
  "title": "Handpicked homes this week",
  "items": {
    "$data": "properties",
    "limit": 6
  },
  "buttons": [
    {
      "label": "View all homes",
      "href": "properties.html",
      "style": "outline"
    }
  ]
}

list#

Wide cards with the excerpt, here with the filter sidebar, toolbar and pagination for a full listings page.

JSON

{
  "type": "properties",
  "layout": "list",
  "sidebar": true,
  "toolbar": true,
  "perPage": 5,
  "padding": "sm",
  "items": {
    "$data": "properties"
  }
}

Tips#

This is a real estate section: it reads the "properties" (and "agents") lists in the real estate demo's data.json. Add, remove or edit homes there and every listing, filter and property page updates.
"$data" options: "limit": 6 (first six), "where": {"status": "For Rent"} (only matching homes), "slugs": ["azure-bay-villa", ...] (these homes, in this order), "exclude": "@item" (on a property page, leave out the current home).
Cards link to property-<slug>.html, which is generated by the property page (pages/property.json with "each": "properties"). Keep that page, or the links will be broken.
The favorites mode shows an empty-state message with a link to properties.html until the visitor saves a home.

Editing it in the HTML files#

Cards are built from data.json, so change listings there and rebuild. Each card is an article.prop-card whose data-* attributes (price, city, beds...) are what the filters and sorting read, so keep them in step with the visible text if you edit HTML by hand.

Where it's used#

Open these pages in template/ to see it working:

Real Estate: template/real-estate/agent-olivia-bennett.html (source src/demos/real-estate/pages/agent.json)

Property listings "type": "properties"

Example#

Options#

Fields of each entry in items#

Fields of each entry in buttons#

Variants and styles#

grid#

list#

Tips#

Editing it in the HTML files#

Where it's used#

Property listings `"type": "properties"`

Fields of each entry in `items`#

Fields of each entry in `buttons`#