The team grid section displays team members in a responsive grid layout. It supports two variants: a full grid layout with photos, names, roles, bios, and social links, and a compact layout for larger teams that omits bios and uses smaller photos.
- sectionType: team-grid
containerTag: aside
text:
title: 'Our Team'
prose: 'Meet the talented people behind our success.'
team:
source: 'team-example' # Loads from lib/data/team/team-example.json
layout: 'grid' # Options: grid, compact
| Property | Type | Required | Description |
|---|---|---|---|
team.layout | string | No | Layout type ('grid', 'compact'). Defaults to 'grid' |
team.source | string | Yes | Data file name in lib/data/team/ directory |
| Property | Type | Required | Description |
|---|---|---|---|
text | object | No | Optional intro text with title, subtitle, and prose |
Each member in the data file should follow this structure:
{
"name": "Sarah Chen",
"role": "CEO & Founder",
"bio": "Passionate about building products that make a difference.",
"extendedBio": "<p>Extended biography with HTML markup...</p>",
"image": {
"src": "/assets/images/team/sarah.jpg",
"alt": "Sarah Chen"
},
"social": [
{ "platform": "linkedin", "url": "https://linkedin.com/in/sarah" },
{ "platform": "twitter", "url": "https://twitter.com/sarah" },
{ "platform": "github", "url": "https://github.com/sarah" },
{ "platform": "email", "url": "mailto:sarah@example.com" },
{ "platform": "website", "url": "https://sarah.dev" }
]
}
When extendedBio is provided (grid layout only), the short bio displays with an ellipsis and a "More" link that opens a modal dialog with the full biography. The dialog uses the native HTML <dialog> element for accessibility (focus trapping, backdrop click, Escape key to close).
Supported social platforms: twitter, linkedin, github, email, website.