Section reference › People & social proof

Team `"type": "team"`

Portrait cards for your team with name, role, a short bio and social icons that appear on the photo. Use it for staff, doctors, teachers, speakers or partners.

Example#

Paste this into the sections list of a page file:

JSON

{
  "type": "team",
  "tone": "alt",
  "eyebrow": "Our people",
  "title": "Meet the team",
  "columns": 4,
  "members": [
    {
      "name": "Sarah Whitfield",
      "role": "Founder & CEO",
      "image": "placeholder",
      "bio": "Built the studio from her kitchen table in 2011.",
      "social": {
        "linkedin": "#",
        "x": "#"
      }
    },
    {
      "name": "David Chen",
      "role": "Creative Director",
      "image": "placeholder",
      "bio": "Leads every brand project from first sketch to launch.",
      "social": {
        "linkedin": "#",
        "instagram": "#"
      }
    },
    {
      "name": "Amara Okafor",
      "role": "Head of Strategy",
      "image": "placeholder",
      "bio": "Turns research into plans that teams can act on.",
      "social": {
        "linkedin": "#"
      }
    },
    {
      "name": "Lucas Moreau",
      "role": "Lead Developer",
      "image": "placeholder",
      "bio": "Makes sure everything we design is fast and accessible.",
      "social": {
        "github": "#",
        "linkedin": "#"
      }
    }
  ]
}

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`
`members`	array \| {"$data": "..."}	—	The people. Write them out, or in a multi-page demo pull them from data.json, e.g. {"$data": "doctors", "limit": 4}.
`columns`	number	`4`	Cards per row on large screens. Values: `2 \| 3 \| 4 \| 6`

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

Fields of each entry in `members`#

Option	Type	Default	Description
`name`	string	—	Full name.
`role`	string	—	Job title.
`image`	string	—	Portrait photo (portrait orientation works best).
`bio`	string \| array	—	Short bio under the role. For an array only the first entry is shown.
`social`	object	—	Social icons on the photo: {"linkedin": "https://...", "instagram": "https://..."}. Keys are Bootstrap Icons names; "x" shows the X logo.
`link`	string	—	Makes the name a link, e.g. to a profile page. "href" also works; data records with their own page get it automatically.

Tips#

Use photos with the same shape and background for a tidy row.
Use 4 or 8 people with 4 columns, or 3 or 6 with 3 columns.
Use "#" as a social link while you do not have the real address yet, or leave "social" out.

Editing it in the HTML files#

Each person is a .member: the photo is in .member-img (with the social icons in .social-links), the name in h3.member-name and the role in .member-role.

Where it's used#

Open these pages in template/ to see it working:

Creative Agency: template/creative-agency/about.html (source src/demos/creative-agency/pages/about.json)
Corporate: template/corporate/about.html (source src/demos/corporate/pages/about.json)
Finance: template/finance/about.html (source src/demos/finance/pages/about.json)
Law Firm: template/law-firm/about.html (source src/demos/law-firm/pages/about.json)
SaaS Product: template/saas/about.html (source src/demos/saas/pages/about.json)
Mobile App: template/mobile-app/about.html (source src/demos/mobile-app/pages/about.json)
Tech Conference: template/conference/home-2.html (source src/demos/conference/pages/home-2.json)
Online Academy: template/education/about.html (source src/demos/education/pages/about.json)
Restaurant: template/restaurant/about.html (source src/demos/restaurant/pages/about.json)
Coffee Shop: template/cafe/about.html (source src/demos/cafe/pages/about.json)
Hotel & Resort: template/hotel/about.html (source src/demos/hotel/pages/about.json)
Wedding: template/wedding/about.html (source src/demos/wedding/pages/about.json)
Gym & Fitness: template/gym/index.html (source src/demos/gym/pages/index.json)
Yoga Studio: template/yoga/about.html (source src/demos/yoga/pages/about.json)
Day Spa & Salon: template/spa/about.html (source src/demos/spa/pages/about.json)
Medical Clinic: template/medical/about.html (source src/demos/medical/pages/about.json)
Dental Clinic: template/dental/dentist-dr-maya-lindqvist.html (source src/demos/dental/pages/dentist.json)
Pet Care: template/pet-care/about.html (source src/demos/pet-care/pages/about.json)
Construction: template/construction/about.html (source src/demos/construction/pages/about.json)
Car Dealer: template/car-dealer/about.html (source src/demos/car-dealer/pages/about.json)
Travel Agency: template/travel/about.html (source src/demos/travel/pages/about.json)
Photographer: template/photography/about.html (source src/demos/photography/pages/about.json)
Architecture Studio: template/architecture/index.html (source src/demos/architecture/pages/index.json)
Interior Design: template/interior-design/about.html (source src/demos/interior-design/pages/about.json)
Music Festival: template/music-festival/artist-luma-vale.html (source src/demos/music-festival/pages/artist.json)
Fashion Store: template/fashion-store/about.html (source src/demos/fashion-store/pages/about.json)
Charity: template/charity/about.html (source src/demos/charity/pages/about.json)
Logistics: template/logistics/about.html (source src/demos/logistics/pages/about.json)

Team "type": "team"