# Team Member Card

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FC0FZV23i06O9KCisXPBk%2FTeam%20Member%20Card%20-%20Overview.png?alt=media&#x26;token=0a8f3aa8-08d2-409d-be62-0fb84802f154" alt=""><figcaption></figcaption></figure>

## 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

{% tabs %}
{% tab title="Vanilla Js" %}

```jsx
<dda-team-member-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></dda-team-member-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTeamMemberCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></DdaTeamMemberCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTeamMemberCard
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></DdaTeamMemberCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-team-member-card
    image_src="https://img.freepik.com/premium-vector/traditional-arabic-man-head-icon-vector-avatar_55610-6301.jpg"
    team_member_name="Omar Al-Hamadi"
    team_member_position="Chief Executive Officer"
    design="default"
    custom_class=""
    component_mode=""
></dda-team-member-card>
```

{% endtab %}
{% endtabs %}

### 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

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FbwQ3Hu6HlNGqsEcZl1yJ%2FTeam%20Member%20Card%20-%20Anatomy.png?alt=media&#x26;token=53eb8cc3-11d1-4f07-8bc5-b24f104e7d35" alt=""><figcaption></figcaption></figure>

### 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.**                   |