→ Alexandra Sinclair
→ Meet our Team section with Bio Cards

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.

This Example is contributed by Alexandra Sinclair, on 02-Mar-2025. It is responsive.

Team Team Profile

Author Alexandra Sinclair

Fork Fullscreen

<section class="team-section">
  <div class="container">
    <h2 class="section-title">Meet Our Team</h2>
    <p class="section-description">Get to know the talented professionals behind our success</p>
    
    <div class="team-grid">
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Emma Johnson">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>Emma Johnson</h3>
          <p class="position">Chief Executive Officer</p>
          <p class="bio">Emma leads our company with 15+ years of industry experience and a passion for innovation.</p>
        </div>
      </div>
      
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>Michael Chen</h3>
          <p class="position">Creative Director</p>
          <p class="bio">Michael brings creativity and strategic thinking to every project with his keen eye for design.</p>
        </div>
      </div>
      
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Sarah Williams">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>Sarah Williams</h3>
          <p class="position">Lead Developer</p>
          <p class="bio">Sarah is our technical expert with extensive experience in creating robust solutions.</p>
        </div>
      </div>
      
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="David Rodriguez">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>David Rodriguez</h3>
          <p class="position">Marketing Strategist</p>
          <p class="bio">David crafts our marketing campaigns with data-driven insights and creative flair.</p>
        </div>
      </div>
      
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Jessica Taylor">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>Jessica Taylor</h3>
          <p class="position">Customer Relations</p>
          <p class="bio">Jessica ensures our clients receive exceptional service with her people-first approach.</p>
        </div>
      </div>
      
      <div class="team-card">
        <div class="card-img-container">
          <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="Robert Kim">
          <div class="social-links">
            <a href="#"><i class="fab fa-linkedin"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-envelope"></i></a>
          </div>
        </div>
        <div class="card-content">
          <h3>Robert Kim</h3>
          <p class="position">Financial Advisor</p>
          <p class="bio">Robert manages our finances with precision and strategic planning for sustainable growth.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Related Examples

Team Showcase Grid with Hover Effects

Author:
Alex Morgan

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

1 month ago
Team Members Grid

Author:
Mert Yılmaz

1 month ago
Team Profile Card

Author:
Anonymous

1 month ago
Simple Author Card

Author:
Prajwal Hallale

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

1 month ago
Animated Profile Card with Hover Effects and Social Links

Author:
Priya Sharma

2 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

1 month ago
Elegant Profile Hover Card with Animation Effects
A stylish hover card that reveals detailed user information with a smooth animation when hovering over a profile thumbnail.

Author:
Maya Johnson

1 month ago
Feature Showcase Grid with Icons
A responsive features showcase grid displaying your product's key capabilities with animated icons and clean descriptions.

Author:
Mert Yılmaz

1 month ago
Profile Card
A beautifully designed profile card featuring smooth gradient animations and social media integration for modern web applications

Author:
Emma Thompson

2 months ago
Features list with icons

Author:
Jordan McKenzie

2 months ago

Didn't find component you were looking for?

Search from 500+ components