Team Components
Team member grid component variants.
Variant: cards
Full team member profiles with photos, bios, and social links.
Team Cards
Full team member profiles with photos
Sarah Johnson
Managing Director
Founded the company in 1978 with a vision for excellence in metal finishing.
Sarah Wilson
Operations Manager
Over 15 years experience in manufacturing and quality control.
Michael Brown
Lead Technician
Master craftsman specializing in decorative plating techniques.
{
"component": "team-grid",
"variant": "cards",
"data": {
"heading": "Team Cards",
"subheading": "Full team member profiles with photos",
"members": [
{
"name": "Sarah Johnson",
"title": "Managing Director",
"photo": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=1200&h=900&q=80",
"bio": "Founded the company in 1978 with a vision for excellence in metal finishing.",
"linkedin": "#",
"email": "douglas@example.com",
"instagram": "@pagejson"
},
{
"name": "Sarah Wilson",
"title": "Operations Manager",
"photo": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=1200&h=900&q=80",
"bio": "Over 15 years experience in manufacturing and quality control.",
"linkedin": "#"
},
{
"name": "Michael Brown",
"title": "Lead Technician",
"photo": "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=1200&h=900&q=80",
"bio": "Master craftsman specializing in decorative plating techniques.",
"linkedin": "#"
}
],
"columns": 3
}
}<section class="team-grid py-5">
<div class="container">
<!-- Team cards -->
</div>
</section>Variant: compact
Simple grid focused on name + title. Good for larger teams.
Compact Team Grid
Simple name and title display
John Doe
Senior Technician
Jane Smith
Quality Inspector
Bob Johnson
Workshop Manager
Alice Williams
Customer Service
{
"component": "team-grid",
"variant": "compact",
"data": {
"heading": "Compact Team Grid",
"subheading": "Simple name and title display",
"members": [
{ "name": "John Doe", "title": "Senior Technician", "photo": "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?auto=format&fit=crop&w=800&h=800&q=80" },
{ "name": "Jane Smith", "title": "Quality Inspector", "photo": "https://images.unsplash.com/photo-1544005313-94ddf0286df2?auto=format&fit=crop&w=800&h=800&q=80" },
{ "name": "Bob Johnson", "title": "Workshop Manager", "photo": "https://images.unsplash.com/photo-1552058544-f2b08422138a?auto=format&fit=crop&w=800&h=800&q=80" },
{ "name": "Alice Williams", "title": "Customer Service", "photo": "https://images.unsplash.com/photo-1524504388940-b1c1722653e1?auto=format&fit=crop&w=800&h=800&q=80" }
],
"columns": 4,
"bg": "light"
}
}<section class="team-grid bg-light py-5">
<div class="container">
<!-- Compact team grid -->
</div>
</section>Variant: detailed
Large bio layout for leadership teams. Best for 1–3 key people.
{
"component": "team-grid",
"variant": "detailed",
"data": {
"heading": "Leadership Team",
"members": [
{
"name": "James Anderson",
"title": "Chief Executive Officer",
"photo": "https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=1200&h=900&q=80",
"bio": "James brings 25 years of industry experience. Under his leadership, the company has grown to become a trusted partner for businesses across multiple industries.",
"linkedin": "#",
"email": "james@example.com",
"github": "inc64",
"website": "https://inc64.com",
"phone": "+44 20 1234 5678"
}
],
"columns": 1
}
}<section class="team-grid py-5">
<div class="container">
<!-- Detailed profile layout -->
</div>
</section>