Team Card

Data Display

Block

Card components for displaying team members with permissions and role management.

Team Role Card

Manage team member permissions

Team Member

Laura P.

Project Manager

Arthur G.

Design Lead

Amir B.

Founder

Members

+8 People

Team Platform Card

Browse team members with platform access

Team Member

Platform list (3)

Laura P.

Project Manager

Arthur G.

Design Lead

Platform list (2)

Side by Side

Both variants together

Team Member

Laura P.

Project Manager

Arthur G.

Design Lead

Amir B.

Founder

Members

+8 People

Team Member

Platform list (3)

Laura P.

Project Manager

Arthur G.

Design Lead

Platform list (2)

Without Group Row

TeamCard without the members group

Team Member

Laura P.

Project Manager

Arthur G.

Design Lead

Amir B.

Founder

Custom Permissions

Custom permission options

Team Member

Laura P.

Project Manager

Arthur G.

Design Lead

Amir B.

Founder

Members

+8 People

TeamCard Props

TeamCard API reference

Prop	Type	Default	Description
`title`	`string`	`'Team Member'`	Card title
`members`	`TeamMember[]`	`[]`	Array of team members
`permissionOptions`	`string[]`	`['Admin', 'Editor', 'Writer', 'View', 'Restricted']`	Available permission options
`onPermissionChange`	`(memberId, permission) => void`	—	Permission change callback
`showMembersGroup`	`boolean`	`true`	Show members group row
`additionalMembersCount`	`number`	`8`	Additional members count in group
`groupPermission`	`string`	`'Restricted'`	Group permission value
`onGroupPermissionChange`	`(permission) => void`	—	Group permission change callback
`className`	`string`	—	Additional CSS classes

TeamPlatformCard Props

TeamPlatformCard API reference

Prop	Type	Default	Description
`title`	`string`	`'Team Member'`	Card title
`members`	`TeamMember[]`	`[]`	Array of team members
`platforms`	`{ id, name, color }[]`	`[]`	Array of platforms
`onProfileClick`	`(memberId) => void`	—	Profile button click callback
`onPlatformClick`	`(platformId) => void`	—	Platform click callback
`className`	`string`	—	Additional CSS classes

TeamMember Type

Team member data structure

interface TeamMember {
 id: string | number
 name: string
 role?: string
 avatar?: string // Image URL
 color?: string // Fallback avatar color (hex)
 permission?: string
}

Usage

Import and implementation examples

import { TeamCard, TeamPlatformCard } from '@/blocks/data-display/team-card'

// TeamCard with permissions
<TeamCard
 title="Team Members"
 members={[
 { id: 1, name: 'Laura P.', role: 'Project Manager', permission: 'Admin', color: '#14b8a6' },
 { id: 2, name: 'Arthur G.', role: 'Design Lead', permission: 'View', color: '#f59e0b' },
 { id: 3, name: 'Amir B.', role: 'Founder', permission: 'Writer', color: '#6366f1' },
 ]}
 onPermissionChange={(memberId, permission) => {
 updatePermission(memberId, permission)
 }}
 onGroupPermissionChange={(permission) => {
 updateGroupPermission(permission)
 }}
/>

// TeamPlatformCard with carousel
<TeamPlatformCard
 members={teamMembers}
 platforms={[
 { id: 1, name: 'Marketing Site', color: '#fbbf24' },
 { id: 2, name: 'Documentation', color: '#14b8a6' },
 ]}
 onProfileClick={(memberId) => router.push(`/team/${memberId}`)}
 onPlatformClick={(platformId) => router.push(`/platforms/${platformId}`)}
/>

// Custom permission options
<TeamCard
 members={members}
 permissionOptions={['Owner', 'Admin', 'Member', 'Guest']}
 showMembersGroup={false}
/>

Built With

3 components

This block uses the following UI components from the design system:

Avatar Button Select

Features

Built-in functionality

Permission management: Built-in select for role permissions
Avatar support: Images or color-coded fallback initials
Avatar stack: Overlapping avatars for member groups
Member carousel: Paginated member cards (TeamPlatformCard)
Platform list: Clickable platform items with indicators
Custom permissions: Configurable permission option list
Group permissions: Bulk permission management row
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Selects have proper labelsButtons have accessible namesAvatar fallbacks use initials

Keyboard Navigation

Key	Action
`Tab`	Navigate through selects and buttons
`Space/Enter`	Open selects, activate buttons
`Arrow keys`	Navigate select options
`Escape`	Close select dropdown

Notes

Permission changes are immediate
Carousel navigation has clear indicators
Color alone does not convey permission level

Related Components

Avatar Select Card Badge