Team Section Card

Team Section Cards provide a clean, visual introduction to individual team members by highlighting their image, name, and role, helping users quickly recognize key personnel and understand organizatio

Overview

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

Vanilla Js

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

React

Vue

Angular

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

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.