Section reference › People & social proof

Person profile `"type": "person"`

A full profile page for one person: photo card with contact details on the left, biography, quote, stats, specialties, education and a contact form on the right. Use it on generated pages for doctors, lawyers, trainers, speakers, chefs and other team members.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "person",
  "person": "@item",
  "formTitle": "Request an appointment",
  "button": "Request appointment",
  "fields": [
    {
      "label": "Full name",
      "name": "name",
      "col": 6,
      "required": true
    },
    {
      "label": "Phone",
      "name": "phone",
      "type": "tel",
      "col": 6,
      "required": true
    },
    {
      "label": "Preferred date",
      "name": "date",
      "type": "date",
      "col": 6
    },
    {
      "label": "Visit type",
      "name": "type",
      "type": "select",
      "col": 6,
      "options": [
        "In person",
        "Video appointment"
      ]
    },
    {
      "label": "Reason for visit",
      "name": "message",
      "type": "textarea",
      "rows": 3
    }
  ]
}

Options#

Option	Type	Default	Description
`person`	object \| "@item"	—	The person to show. On a page with "each" use "@item" (the current record). You can also write the fields out by hand or map them one by one, e.g. {"name": "@item.name", "bio": "@item.about"}. Without a person the section renders nothing.
`aboutTitle`	string	`About <first name>`	Heading above the biography. The first name skips titles such as "Dr." automatically.
`form`	boolean	`true`	Set to false to hide the contact form. Values: `true \| false`
`formTitle`	string	`Contact <first name>`	Heading above the contact form.
`fields`	array	`Name, Email, Message`	Custom form fields. See the "fields" entries.
`button`	string	`Send message`	Text on the form's submit button.
`padding`	string	`sm`	Common option; this section defaults it to "sm". Values: `none \| sm \| md \| lg`

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

Fields of each entry in `person`#

Option	Type	Default	Description
`name`	string	—	Full name, shown as the page H1. Required.
`firstName`	string	—	Used in "About ..." and "Contact ...". Worked out from name if left out.
`role`	string	—	Job title under the name.
`image`	string	—	Portrait photo.
`tagline`	string	—	Small label above the "About" heading, e.g. "Family Medicine".
`bio`	string \| array of strings	—	Biography. An array gives one paragraph per entry.
`quote`	string	—	A personal quote shown in a highlighted block.
`stats`	array	—	Key numbers: [{"number": "16", "label": "Years in practice"}].
`list`	array of strings	—	Specialties / skills, shown as a check list.
`listTitle`	string	—	Heading of that list. Default "Specialties".
`education`	array of strings	—	Degrees and certificates, shown with a cap icon.
`educationTitle`	string	—	Heading of that list. Default "Education".
`phone`	string	—	Phone number (becomes a tap-to-call link).
`email`	string	—	Email address (becomes a mailto link).
`location`	string	—	Office or city. Only shown when phone or email is also set.
`social`	object	—	Social links: {"linkedin": "https://...", "instagram": "https://..."}. Keys are Bootstrap Icons names; "x" shows the X logo.

Fields of each entry in `fields`#

Option	Type	Default	Description
`label`	string	—	Label above the field.
`name`	string	—	Field name sent with the form.
`type`	string	—	text (default) \| email \| tel \| date \| number \| select \| textarea.
`placeholder`	string	—	Grey hint text inside the field.
`options`	array of strings	—	Choices for a "select" field.
`required`	boolean	—	true makes the field mandatory.
`rows`	number	—	Height of a textarea in lines. Default 4.
`col`	number	—	6 makes the field half width (two per row); otherwise full width.

Tips#

This section is meant for generated pages. In a multi-page demo, add the records to data.json (e.g. "doctors": [{"slug": "amelia-hart", "name": "Dr. Amelia Hart", ...}]) and create a page file such as pages/doctor.json with "each": "doctors" and this section inside. The build makes one page per record: doctor-amelia-hart.html, and so on.
"@item" means "the record this page is being built for". "@item.about" means one field of it, which lets you map a field with a different name (the medical demo maps "bio": "@item.about").
Every record needs a unique "slug" (lowercase, dashes): it becomes part of the file name.
The contact form posts to "formAction" in site.json. Until you set it, visitors see a thank-you message and nothing is sent.
Link to the profiles from a team section: records with their own page get an "href" automatically, so "members": {"$data": "doctors"} links each card to its profile.

Editing it in the HTML files#

Profile pages are generated from data.json, so edit the record there and rebuild. If you edit a built page directly: the name is h1.agent-name, the biography is the paragraphs after h2.section-title, and the form is form.form-o.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/member-maya-okafor.html (source src/demos/creative-agency/pages/member.json)
Corporate: template/corporate/leader-eleanor-whitfield.html (source src/demos/corporate/pages/leader.json)
Finance: template/finance/advisor-margaret-ellison.html (source src/demos/finance/pages/advisor.json)
Law Firm: template/law-firm/attorney-eleanor-harrow.html (source src/demos/law-firm/pages/attorney.json)
Tech Conference: template/conference/speaker-amara-okonkwo.html (source src/demos/conference/pages/speaker.json)
Online Academy: template/education/instructor-hannah-cole.html (source src/demos/education/pages/instructor.json)
Restaurant: template/restaurant/chef-elias-moreau.html (source src/demos/restaurant/pages/chef.json)
Gym & Fitness: template/gym/trainer-marcus-hale.html (source src/demos/gym/pages/trainer.json)
Yoga Studio: template/yoga/teacher-maya-lindqvist.html (source src/demos/yoga/pages/teacher.json)
Day Spa & Salon: template/spa/therapist-clara-whitfield.html (source src/demos/spa/pages/therapist.json)
Medical Clinic: template/medical/doctor-amelia-hart.html (source src/demos/medical/pages/doctor.json)
Dental Clinic: template/dental/dentist-dr-maya-lindqvist.html (source src/demos/dental/pages/dentist.json)
Pet Care: template/pet-care/team-dr-amara-nwosu.html (source src/demos/pet-care/pages/team-member.json)
Travel Agency: template/travel/guide-tomas-rivera.html (source src/demos/travel/pages/guide.json)
Architecture Studio: template/architecture/member-mira-halden.html (source src/demos/architecture/pages/member.json)
Music Festival: template/music-festival/artist-luma-vale.html (source src/demos/music-festival/pages/artist.json)
Charity: template/charity/member-amara-okafor.html (source src/demos/charity/pages/member.json)
Logistics: template/logistics/member-marcus-hale.html (source src/demos/logistics/pages/member.json)

Person profile "type": "person"