Team

Showcase team members to build trust and authority

npm create webcore@latest add Team

Use the Team component to display team members with details like names, roles, bios, and social links.

Preview

Alice JohnsonFrontend Developer

Alice is our creative frontend developer with a passion for building user-friendly, responsive interfaces using React.

Bob SmithBackend Developer

Bob is our backend expert specializing in Node.js and database management, ensuring seamless data flow and efficient server-side operations.

Charlie DavisUI/UX Designer

Charlie brings intuitive design concepts to life with a focus on user experience and accessibility, always striving for clean and modern visuals.

Daniel LeeProject Manager

Daniel leads the team with excellent communication skills and organizational expertise, ensuring deadlines are met and projects are completed on time.

Ethan BrownQA Engineer

Ethan is our detail-oriented QA engineer who ensures every feature is tested thoroughly for quality and functionality before release.

Fiona GreenDevOps Engineer

Fiona manages the deployment pipelines and cloud infrastructure, making sure our applications are scalable, secure, and run smoothly.

---
import { Card } from 'webcoreui/astro'

import Team from '@blocks/Team.astro'

const members = [
    {
        img: 'img/alice.png',
        name: 'Alice Johnson',
        role: 'Frontend Developer',
        description: 'Alice is our creative frontend developer.',
        socials: [
            'https://linkedin.com/',
            'https://github.com/'
        ]
    },
    { ... }
]
---

<Card title="Preview" secondary={true}>
    <Team members={members} />
</Card>

The Team component expects a members property that defines team members. Each member object can have the above properties. The component will display members in a 3-column layout by default. This can be configured using the columns prop. Social links are displayed with social icons. See the documentation of the Socials component for supported platforms.

No Avatars

Only the name property is required. If no img is provided, a fallback icon will be rendered:

---
const members = [
    {
        name: 'Alice Johnson'
    },
    { ... }
]
---

<Team members={members} />

Custom Avatars

You can customize avatar images by specifying an avatar prop with one of the following properties:

• size: Sets the size of the image.
• lazy: Enables lazy loading.
• borderColor: Sets a border color for the image.

Alice Johnson

Bob Smith

Charlie Davis

Daniel Lee

Ethan Brown

Fiona Green

<Team
    members={members}
    avatar={{ borderColor: 'var(--w-color-info)' }}
/>

Customizing Columns

The Team component is rendered with a 3 column layout. You can customize this through the className property by passing additional CSS, or simply set the columns property:

Two-column layout

Alice JohnsonFrontend Developer

Alice is our creative frontend developer with a passion for building user-friendly, responsive interfaces using React.

Bob SmithBackend Developer

Bob is our backend expert specializing in Node.js and database management, ensuring seamless data flow and efficient server-side operations.

Charlie DavisUI/UX Designer

Charlie brings intuitive design concepts to life with a focus on user experience and accessibility, always striving for clean and modern visuals.

Daniel LeeProject Manager

Daniel leads the team with excellent communication skills and organizational expertise, ensuring deadlines are met and projects are completed on time.

Ethan BrownQA Engineer

Ethan is our detail-oriented QA engineer who ensures every feature is tested thoroughly for quality and functionality before release.

Fiona GreenDevOps Engineer

Fiona manages the deployment pipelines and cloud infrastructure, making sure our applications are scalable, secure, and run smoothly.

<Team
    members={members}
    columns={2}
/>

The component is responsive, it’s displayed as a single column for small devices. If the column property is set to greater than 1, it’ll only apply to devices above sm. If the column property is greater than 2, it’ll only apply to devices above md.

API

type TeamProps = {
    members: {
        img?: string
        name: string
        role?: string
        description?: string
        socials?: string[]
    }[]
    avatar?: Pick<AvatarProps, 'size' | 'lazy' | 'borderColor'>
    columns?: 1 | 2 | 3 | 4,
    className?: string
} & Pick<CardProps, 'compact' | 'secondary'>