# Team Member Card

## Overview

<figure><img src="/files/FoLu7GGHB07jNPQ0CKWw" 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="/files/hEl2BZdAfKxI17CFi6tY" 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.**                   |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://designsystem.dubai.ae/components/cards/team-member-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.