Default Theme: Team Page

Create beautiful team pages to showcase your contributors and team members.

Basic Team Page

Use the page layout with team components:

---
layout: page
---

<script setup>
import {
  VPTeamPage,
  VPTeamPageTitle,
  VPTeamMembers
} from 'vitepress/theme'

const members = [
  {
    avatar: 'https://www.github.com/yyx990803.png',
    name: 'Evan You',
    title: 'Creator',
    links: [
      { icon: 'github', link: 'https://github.com/yyx990803' },
      { icon: 'twitter', link: 'https://twitter.com/youyuxi' }
    ]
  },
  {
    avatar: 'https://www.github.com/kiaking.png',
    name: 'Kia King Ishii',
    title: 'Developer',
    links: [
      { icon: 'github', link: 'https://github.com/kiaking' },
      { icon: 'twitter', link: 'https://twitter.com/KiaKing85' }
    ]
  }
]
</script>

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>
      Our Team
    </template>
    <template #lead>
      The development of VitePress is guided by an international
      team, some of whom have chosen to be featured below.
    </template>
  </VPTeamPageTitle>
  <VPTeamMembers
    :members="members"
  />
</VPTeamPage>

Team Member Options

Basic Member

{
  avatar: 'https://www.github.com/username.png',
  name: 'John Doe',
  title: 'Developer'
}

Member with Links

{
  avatar: 'https://www.github.com/username.png',
  name: 'John Doe',
  title: 'Developer',
  links: [
    { icon: 'github', link: 'https://github.com/username' },
    { icon: 'twitter', link: 'https://twitter.com/username' },
    { icon: 'linkedin', link: 'https://linkedin.com/in/username' }
  ]
}

Member with Description

{
  avatar: 'https://www.github.com/username.png',
  name: 'John Doe',
  title: 'Developer',
  desc: 'Full-stack developer with expertise in Vue.js and Node.js',
  links: [
    { icon: 'github', link: 'https://github.com/username' }
  ]
}

Member with Organization

{
  avatar: 'https://www.github.com/username.png',
  name: 'John Doe',
  title: 'Developer',
  org: 'Company Name',
  orgLink: 'https://company.com',
  links: [
    { icon: 'github', link: 'https://github.com/username' }
  ]
}

Team Sections

Multiple Team Sections

<VPTeamPage>
  <VPTeamPageTitle>
    <template #title>Our Team</template>
    <template #lead>Meet the people behind VitePress.</template>
  </VPTeamPageTitle>
  
  <VPTeamMembers size="small" :members="coreTeam" />
  
  <VPTeamPageSection>
    <template #title>Core Team</template>
    <template #lead>
      Core team members are those who are actively involved in the maintenance
      of one or more core projects.
    </template>
    <template #members>
      <VPTeamMembers size="small" :members="coreTeam" />
    </template>
  </VPTeamPageSection>
  
  <VPTeamPageSection>
    <template #title>Community Partners</template>
    <template #lead>
      Community partners are those who have made significant contributions
      to the Vue ecosystem.
    </template>
    <template #members>
      <VPTeamMembers size="small" :members="partners" />
    </template>
  </VPTeamPageSection>
</VPTeamPage>

Supported Icons

Available social media icons:

• github
• twitter
• linkedin
• facebook
• instagram
• youtube
• slack
• discord
• mastodon

Custom Icons

You can also use custom icons:

{
  icon: {
    svg: '<svg>...</svg>'
  },
  link: 'https://example.com'
}

Team Member Sizes

Control the size of team member cards:

<!-- Small size -->
<VPTeamMembers size="small" :members="members" />

<!-- Medium size (default) -->
<VPTeamMembers size="medium" :members="members" />

Styling

Customize team page appearance:

.VPTeamPage {
  /* Custom styles */
}

.VPTeamMembers {
  /* Custom member grid styles */
}

.VPTeamMember {
  /* Individual member card styles */
}