UI ComponentsMarketing
Team
Team section displaying team members in various layouts
Team section for displaying company or organization team members.
Structure
Grid Layout (Default)
┌─────────────────────────────────────────────────────┐
│ root │
│ ┌─────────────────────────────────────────────────┐ │
│ │ header │ │
│ │ title │ │
│ │ subtitle │ │
│ │ description │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ featured (optional leadership) │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ CEO │ │ CTO │ │ │
│ │ │ (larger cards) │ │ (larger cards) │ │ │
│ │ └─────────────────┘ └─────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ members │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ ┌─────┐ │ │ │
│ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │
│ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ └─────┘ │ │ │
│ │ │ Name │ │ Name │ │ Name │ │ Name │ │ │
│ │ │ Role │ │ Role │ │ Role │ │ Role │ │ │
│ │ │ [social]│ │ [social]│ │ [social]│ │ [social]│ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘By Department
┌─────────────────────────────────────────────────────┐
│ departments │
│ ┌─────────────────────────────────────────────────┐ │
│ │ department: Engineering │ │
│ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │
│ │ │ member │ │ member │ │ member │ │ │
│ │ └─────────┘ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ department: Design │ │
│ │ ┌─────────┐ ┌─────────┐ │ │
│ │ │ member │ │ member │ │ │
│ │ └─────────┘ └─────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘Usage
<Team
title="Meet our team"
subtitle="The people behind the product"
description="Our diverse team brings together experts from around the world."
featured={[
{
name: 'Jane Smith',
role: 'CEO & Founder',
avatar: '/team/jane.jpg',
bio: 'Building companies for 15 years.',
social: [{ platform: 'twitter', url: '...' }],
},
{
name: 'John Doe',
role: 'CTO',
avatar: '/team/john.jpg',
bio: 'Former Google engineer.',
social: [{ platform: 'github', url: '...' }],
},
]}
members={teamMembers}
layout="grid"
columns={4}
/>By Department
<Team
title="Our Team"
departments={[
{
name: 'Engineering',
members: engineeringTeam,
},
{
name: 'Design',
members: designTeam,
},
{
name: 'Marketing',
members: marketingTeam,
},
]}
/>