Team Member Card with Avatar & Role
Present your team in a clean, professional, and uniform way with this team member profile card.
This is a fundamental component for any "About Us" or "Meet the Team" page, designed to introduce key personnel with their photo, job title, and links to their social profiles.
About this Component
A well-structured team page builds trust and puts a human face on your organization. This card template is designed for that purpose, featuring a prominent circular avatar, a clear hierarchy for the team member's name and role, and a dedicated space for social media links.
Features
- Circular Avatar: Features a classic circular profile image, achieved with simple CSS.
- Social Media Links: Includes a dedicated section with SVG icons for linking to professional profiles like LinkedIn, Twitter, or personal websites.
- Clean Typography: The layout uses distinct font weights and colors to create a clear visual separation between the name and job title.
- Responsive by Default: Integrated into a standard responsive grid container, the cards look great on any device.
Code Breakdown
HTML Structure
Each card is an article with a centered layout. The main elements are an img for the avatar with appropriate alt text, a h3 for the name, and a p for the role. The social media icons are anchor tags within a container div, each with an aria-label to clarify the link's destination for assistive technologies.
CSS Styling
The card's content is centered using text-align: center on the main .tm-card container. The circular avatar is created by setting the image's border-radius to 50%. A decorative colored ring is added around the avatar using a combination of a transparent border and a colored box-shadow, a neat trick that prevents the ring from affecting the element's layout size. The social icons are aligned horizontally using display: flex and justify-content: center on their container.
Code
Here is the complete code. Simply customize the image, name, role, and links for each of your team members.