Section reference › Real estate

Agent profile `"type": "agent-profile"`

The top of a real-estate agent's personal page: photo card with contact details, bio, stats, specialties, languages and a message form. It is filled from one agent record, so it belongs on a generated page (one page per agent).

Example#

Paste this into the sections list of a page file:

JSON

{
  "each": "agents",
  "title": "{item.name}",
  "description": "{item.role} at Omnira Estates.",
  "sections": [
    {
      "type": "agent-profile",
      "agent": "@item"
    }
  ]
}

Options#

Option	Type	Default	Description
`agent`	object	—	The agent record. On an agent page use "@item" (the current record). Required: nothing is rendered without it.

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

Fields of each entry in `agent`#

Option	Type	Default	Description
`slug`	string	—	Unique id used in the page file name (agent-<slug>.html) and to match listings (properties with "agent": "<slug>").
`name`	string	—	Full name. The first word is used in "About Olivia" and "Send Olivia a message".
`role`	string	—	Job title under the name.
`image`	string	—	Portrait photo.
`phone`	string	—	Phone number shown and linked with tel:. Required.
`email`	string	—	Email address shown and linked with mailto:. Required.
`office`	string	—	Office name or address.
`license`	string	—	Licence number, shown as "License #…".
`area`	string	—	Speciality line shown as the small label above the bio. Defaults to "Agent profile".
`sold`	number	—	Homes sold (stat). Shows "—" if missing.
`experience`	number	—	Years of experience (stat). Shows "—" if missing.
`rating`	number	—	Client rating out of 5, e.g. 4.9. Shows stars and the stat.
`reviews`	number	—	Number of reviews shown next to the stars.
`bio`	string \| array	—	Biography; an array gives several paragraphs.
`specialties`	array	—	List of specialties (strings).
`languages`	array	—	Languages spoken (strings).
`social`	object	—	Social links: { "linkedin": "https://…", "instagram": "https://…" }. Keys are Bootstrap Icons names ("x" becomes the X logo).

Tips#

The example above is a whole page file, src/demos/<demo>/pages/agent.json. "each": "agents" makes the build create one page per record in data.json → "agents", and "@item" is that record. Keep the file name agent.json so the pages are called agent-<slug>.html, which is where the agents section and property cards link to.
A record shaped like the fields listed above goes in data.json: { "agents": [ { "slug": "olivia-bennett", "name": "Olivia Bennett", "role": "Senior Agent", "image": "placeholder", "phone": "+1 (555) 014-2201", "email": "olivia@example.com", "bio": "…" } ] }.
"Active listings" counts the properties in data.json whose "agent" is this agent's slug.
The message form fields are fixed; the form posts to formAction in site.json.
Default padding is "sm". The section contains the page's h1, so you do not need a page-header above it.

Editing it in the HTML files#

Each agent gets its own file, e.g. agent-olivia-bennett.html. Edit the bio in .col-lg-8, the contact list in ul.agent-contact and the four numbers in .agent-stats.

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)

Agent profile "type": "agent-profile"