Team Member List Template
Showcase the people behind your project with this clean and modern team profile grid.
This component uses card-based design to present each team member's photo, name, role, and social media links in an organized layout.
About this Template
This template is ideal for an "About Us" page. It uses CSS Grid to create a flexible, card-style layout that looks great on all devices. On small screens the cards stack vertically, and on larger screens they automatically arrange into a neat grid. All styling is self-contained to ensure you can drop this component into any project without style conflicts.
Features
- Responsive Card Grid: A flexible grid that automatically adjusts the number of columns based on screen width.
- Self-Contained Styles: All CSS is scoped to the
.team-members-templateclass to prevent unwanted side effects on your website. - Hover Effects: Subtle animations on the profile cards and social media icons provide a polished, interactive feel.
- Accessible SVGs: Social media links use inline SVG icons with descriptive
titleelements, ensuring they are accessible to all users. - Easy to Customize: CSS custom properties allow for quick modification of colors, spacing, and fonts to match your brand.
Code Breakdown
The structure is built within a section that has the .team-members-template class. The grid layout is achieved on the .team-grid container by applying display: grid.
The main part of the responsive behavior is the grid-template-columns property, which is set to repeat(auto-fit, minmax(280px, 1fr)). This rule instructs the browser to create as many columns as can fit, ensuring each column is at least 280px but can grow to fill any extra space. This creates a robust grid without needing multiple media queries. Each profile is a semantic article element with the .team-card class applied.
Code
Here's the full code for the template: