Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Team Member Card

Team Member Cards provide a quick, visually organized snapshot of an individual’s identity, role, and status within a team, helping users easily recognize and understand team composition at a glance.

Overview

Usage

When to use this component?

Team member cards are used to display individual profiles within a team or organizational context. They're ideal for showcasing contributors on project dashboards, collaboration platforms, or directory listings where quick recognition and role context are essential.

How it works

This card presents a member’s avatar, name, job title or contribution (e.g., "Comments Received"), and current status (e.g., "Offline") in a clean, readable layout. The status chip visually communicates availability, while the concise format supports fast scanning and better team awareness.

Code

Properties

Property
Description
Type

image_src

URL of the team member’s image/avatar

string

team_member_name

Full name of the team member

string

team_member_position

Job title or position of the team member

string

design

Design variant or style of the card. default blue

string

custom_class

Additional CSS class(es) for custom styling

string

component_mode

Mode or state of the component (if any)

string

Anatomy

Anatomy Options

Avatar: A visual identifier that can be an image, icon, or text initials—used to represent the team member and support quick recognition within the interface.

Card Title: The name of the individual, acting as the primary label for the card.

Description: A short label or role descriptor (e.g., “Comments Received”) that clarifies the member’s activity or contribution.

Chips: Status indicators (e.g., “Offline”) displayed as colored pills to communicate availability or activity in real time.

Dos and Don'ts

Dos
Don'ts

Use clear, legible icons that immediately convey the card's purpose or action.

Don’t use low-quality or blurry images for the image_src—it reduces visual appeal.

Write concise, meaningful titles to ensure quick understanding.

Avoid long or vague titles that don’t communicate the card’s content.

Keep descriptions short and relevant to avoid overwhelming users.

Don’t overload the description with too much text—keep it scannable.

Use consistent styling and spacing if multiple cards are displayed together.

Avoid placing multiple cards without spacing, which can cause visual clutter.

Maintain a consistent design language across all cards to ensure a cohesive user experience.

Don’t leave the onclick empty or use console logs in production.

PreviousPricing CardNextTeam Section Card

Last updated