# Team Section Card

## Overview

<figure><img src="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FUoazIAtu9fXa7Tuxm1hF%2FTeam%20Section%20Card%20-%20Overview.png?alt=media&#x26;token=d81ceaa5-c973-403c-bda8-fb3f9ab32fc0" 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="https://881612694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEHbeJtpysoolkLI59NrC%2Fuploads%2FbKGJbysSrlXPWPUFXH6m%2FTeam%20Section%20Card%20-%20Anatomy.png?alt=media&#x26;token=37497552-3d3e-4448-973b-09188f4dc4b0" 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. |