→ Mert Yılmaz
→ Team Members Grid

Team Members Grid

This Example is contributed by Mert Yılmaz, on 17-Mar-2025. It is responsive. similar terms for this example are Grid Display,CSS Grid,Grid,Card Grid

Grid Layout Team Showcase

Author Mert Yılmaz

Fork Fullscreen

<div class="team-showcase-container">
  <div class="theme-toggle">
    <input type="checkbox" id="theme-switch">
    <label for="theme-switch">Dark Mode</label>
  </div>
  
  <header class="team-header">
    <h1>Our Amazing Team</h1>
    <p>Meet the talented professionals behind our success</p>
  </header>
  
  <div class="team-grid">
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson">
      </div>
      <h3>Sarah Johnson</h3>
      <p class="role">Lead Designer</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Dribbble"><i class="fa fa-dribbble"></i></a>
      </div>
    </div>
    
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael Chen">
      </div>
      <h3>Michael Chen</h3>
      <p class="role">Senior Developer</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Github"><i class="fa fa-github"></i></a>
      </div>
    </div>
    
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Jessica Williams">
      </div>
      <h3>Jessica Williams</h3>
      <p class="role">Product Manager</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Medium"><i class="fa fa-medium"></i></a>
      </div>
    </div>
    
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="David Rodriguez">
      </div>
      <h3>David Rodriguez</h3>
      <p class="role">UX Researcher</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Behance"><i class="fa fa-behance"></i></a>
      </div>
    </div>
    
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/women/47.jpg" alt="Emily Patel">
      </div>
      <h3>Emily Patel</h3>
      <p class="role">Marketing Strategist</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Instagram"><i class="fa fa-instagram"></i></a>
      </div>
    </div>
    
    <div class="team-member">
      <div class="member-photo">
        <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="James Wilson">
      </div>
      <h3>James Wilson</h3>
      <p class="role">Full-Stack Developer</p>
      <div class="social-links">
        <a href="#" aria-label="Twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" aria-label="LinkedIn"><i class="fa fa-linkedin"></i></a>
        <a href="#" aria-label="Github"><i class="fa fa-github"></i></a>
      </div>
    </div>
  </div>
  
  <footer class="portfolio-link">
    <p>Designed and developed by <a href="https://portfolio.alex_dev.com" target="_blank">Alex Rivera</a></p>
  </footer>
</div>

Related Examples

Meet our Team section with Bio Cards
Showcase your team members with this elegant and responsive card-based layout. Each team card features a photo, name, position, and social media links with a smooth hover effect.

Author:
Alexandra Sinclair

3 months ago
Team Section with Responsive Profile Cards
A responsive team section featuring profile cards with team member photos, names, roles, and social media links.

Author:
Aiden Mercer

2 months ago
Team Showcase Grid with Hover Effects

Author:
Alex Morgan

3 months ago
Team Profile Card

Author:
Anonymous

3 months ago
User Avatars Grid Layout
A responsive grid layout for displaying user avatars that adapts beautifully to any screen size, perfect for team pages or user directories.

Author:
Anonymous

3 months ago
User Avatar Card
A responsive user avatar card featuring online status indicator, follow button, and dark mode support with smooth transitions for modern web applications.

Author:
Alexandra Sinclair

3 months ago
Features list with icons

Author:
Jordan McKenzie

3 months ago
Responsive Feature Showcase Grid

Author:
Anonymous

2 months ago
Stacked Profile Images UI Component
A customizable stacked profile images component that displays team members or users in an overlapping arrangement to save space while showing group membership.

Author:
Maya Johnson

2 months ago
Simple Author Card

Author:
Prajwal Hallale

4 months ago
Feature Card Grid Layout
A clean, responsive grid layout showcasing product or service features with icon illustrations and descriptive text.

Author:
MD. Tayyub

3 months ago
Dynamic Testimonial Cards with User Ratings

Author:
Anonymous

3 months ago

Didn't find component you were looking for?

Search from 500+ components