# Team Section Card

## Overview

<figure><img src="/files/3RVClx8XEuvKoGW0jS7p" alt=""><figcaption></figcaption></figure>

## Usage

### When to use this component?

Use the Team Section Card to visually introduce individual team members, showcasing their name, role, and image in a clean and prominent layout. Ideal for “About Us” or organizational pages, this card supports transparency, recognition, and trust by humanizing the team behind a service or product.

### How it works

The card combines a large profile image with a bold name and a secondary role label, helping users quickly understand who the person is and what they do. It maintains a consistent format across team listings, promoting clarity and visual harmony.

### Code

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

```jsx
<dda-teamsection-card
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></dda-teamsection-card>
```

{% endtab %}

{% tab title="React" %}

```jsx
<DdaTeamsectionCard
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></DdaTeamsectionCard>
```

{% endtab %}

{% tab title="Vue" %}

```jsx
<DdaTeamsectionCard
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></DdaTeamsectionCard>
```

{% endtab %}

{% tab title="Angular" %}

```jsx
<dda-teamsection-card
    image_src="static/media/public_images/Teammembercard.svg"
    header_text="Jeffery Walker"
    body_text="Cloud Architect"
    custom_class="dda-w-50 my-custom-class"
    component_mode=""
    card_type="variant-one"
></dda-teamsection-card>
```

{% endtab %}
{% endtabs %}

### Properties

| Property        | Description                                                                                                                                                                            | Type     |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
| image\_src      | Path to the profile or avatar image displayed on the card.                                                                                                                             | `string` |
| header\_text    | The name or title shown on the card, typically used for team member names (e.g., "Jeffery Walker").                                                                                    | `string` |
| body\_text      | Subheading or role designation for the individual (e.g., "Cloud Architect").                                                                                                           | `string` |
| custom\_class   | Optional custom CSS classes for styling adjustments or layout control (e.g., width, margins).                                                                                          | `string` |
| component\_mode | Optional mode for visual or functional variation (e.g., light/dark theme or layout variant).                                                                                           | `string` |
| card\_type      | Defines the visual variant or structural layout of the card (e.g.,  `variant-one, variant-two, variant-three, variant-four, variant-five, variant-six, variant-seven, variant-eight` ) | `string` |

## Anatomy

<figure><img src="/files/Dp4nwqLuJpgvtgs5WMXk" alt=""><figcaption></figcaption></figure>

### Anatomy Options

**Image:** A large, centered photo representing the team member, providing visual recognition and a human touch.

**Name:** Bold text displaying the team member's name for clear identification.

**Job Title:** A secondary label beneath the name that indicates the person’s role or position within the organization.

**Container:** A subtle overlay or box that groups the name and job title, ensuring readability and visual hierarchy against the image background.

***

## Dos and Don'ts

| Dos                                                                                     | Don'ts                                                                                      |
| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| **Use high-quality, professional images** that clearly show the individual.             | Don’t use low-resolution, blurry, or unprofessional photos.                                 |
| **Maintain visual consistency** across all team cards in size, layout, and typography.  | **Don’t use inconsistent fonts or spacing** between team cards.                             |
| **Ensure readability** by using contrasting text over image backgrounds or a container. | **Don’t place text directly on busy image areas** without a container or overlay.           |
| **Use consistent styling and spacing** if multiple cards are displayed together.        | **Don’t ignore accessibility**—ensure text is legible and semantic structure is maintained. |


---

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