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
<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>Properties
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
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.
Last updated