Team
These sections highlight the people behind a company, organization, or project.
Overview
"Team" blocks are sections on websites or applications that highlight the people behind a company, organization, or project. These components typically showcase individual team members with their details. The goal is to introduce users to the people driving the brand or service, building trust and creating a sense of personal connection.
Some of these examples make use of Swiper.js, a mobile-friendly slider library. To include Swiper in your project, add the following CDN links to your HTML file.
JavaScript
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
CSS
<link href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" rel="stylesheet" />
Examples
Below are a few examples of “Team” sections.
Example 1
Our Team
Introducing the faces behind us
Rahul Mehta
Marketing Head
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-4">Introducing the faces behind us</h2>
</div>
<div class="row g-3 g-lg-4">
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Our Team</h1> <h2 class="mb-4">Introducing the faces
behind us</h2> </div> <div class="row g-3 g-lg-4"> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar6.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Rahul
Mehta</h5> <p class="text-muted mb-0">Marketing Head</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Jane Smith</h5> <p class="text-muted
mb-0">Product Designer</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> </div>
</div> </section>
Example 2
Our Team
Introducing the faces behind us
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
Rahul Mehta
Marketing Head
Jane Smith
Product Designer
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Amara Evans
Sales Executive
Reena Paul
HR Lead
Aaron Thomas
UI Designer
Jack Smith
Sales Lead
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-md-6">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Introducing the faces behind us</h2>
</div>
<div class="col-md-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nulla nemo! Quam impedit dolores vel sit amet.
</p>
</div>
</div>
<div class="row mb-4 g-3 g-lg-4">
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar2.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Amara Evans</h5>
<p class="text-muted mb-0">Sales Executive</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar4.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Reena Paul</h5>
<p class="text-muted mb-0">HR Lead</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar11.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Aaron Thomas</h5>
<p class="text-muted mb-0">UI Designer</p>
</div>
</div>
</div>
<div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar9.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p>
</div>
</div>
</div>
</div>
<div class="text-center text-md-end">
<button class="btn btn-outline-secondary">See all members<i class="ri-arrow-right-line ms-2"></i></button>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-md-6"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Introducing the faces behind us</h2> </div>
<div class="col-md-6"> <p class="text-muted mb-0"> Lorem ipsum
dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos
provident nulla nemo! Quam impedit dolores vel sit amet. </p> </div> </div>
<div class="row mb-4 g-3 g-lg-4"> <div class="col-6 col-md-3">
<div class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Rahul Mehta</h5> <p class="text-muted
mb-0">Marketing Head</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar1.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p> </div> </div>
</div> <div class="col-6 col-md-3"> <div class="card bg-secondary
shadow border-0 h-100 p-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Nguyen
Minh</h5> <p class="text-muted mb-0">Software Engineer</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar2.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Amara
Evans</h5> <p class="text-muted mb-0">Sales Executive</p>
</div> </div> </div> <div class="col-6 col-md-3"> <div
class="card bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar4.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Reena Paul</h5> <p class="text-muted
mb-0">HR Lead</p> </div> </div> </div> <div class="col-6
col-md-3"> <div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar11.jpg" class="card-img-top"
alt="Team Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Aaron Thomas</h5> <p class="text-muted
mb-0">UI Designer</p> </div> </div> </div> <div
class="col-6 col-md-3"> <div class="card bg-secondary shadow border-0 h-100
p-0"> <img src="/assets/images/avatars/avatar9.jpg"
class="card-img-top" alt="Team Member Photograph"> <div
class="card-body p-3"> <h5 class="card-title">Jack Smith</h5>
<p class="text-muted mb-0">Sales Lead</p> </div> </div>
</div> </div> <div class="text-center text-md-end"> <button
class="btn btn-outline-secondary">See all members<i
class="ri-arrow-right-line ms-2"></i></button> </div>
</div> </section>
Example 3
Our team
Lorem ipsum dolor sit amet consect adipisi elit. Dolorum quibus libero corpori dignis provident nulla nemo!
Rahul Mehta
Marketing Head
Nguyen Minh
Software Engineer
Neha Gupta
Content Strategist
Jane Smith
Product Designer
<section class="bg-body py-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<i class="ri-group-line text-primary fs-1"></i>
<h2 class="mb-2">Our team</h2>
<p class="text-muted mb-3">
Lorem ipsum dolor sit amet consect adipisi elit. Dolorum quibus libero corpori dignis provident nulla nemo!
</p>
<button class="btn btn-outline-secondary">All members<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-md-8 mt-4 mt-md-0">
<!-- Slider main container -->
<div class="swiper ex3Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Rahul Mehta</h5>
<p class="text-muted mb-0">Marketing Head</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Nguyen Minh</h5>
<p class="text-muted mb-0">Software Engineer</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Neha Gupta</h5>
<p class="text-muted mb-0">Content Strategist</p>
</div>
</div>
</div>
<div class="swiper-slide" style="height: auto;">
<div class="card bg-secondary shadow border-0 h-100 p-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Photograph">
<div class="card-body p-3">
<h5 class="card-title">Jane Smith</h5>
<p class="text-muted mb-0">Product Designer</p>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row"> <div class="col-md-4"> <i class="ri-group-line
text-primary fs-1"></i> <h2 class="mb-2">Our team</h2> <p
class="text-muted mb-3"> Lorem ipsum dolor sit amet consect adipisi elit. Dolorum
quibus libero corpori dignis provident nulla nemo! </p> <button class="btn
btn-outline-secondary">All members<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-md-8 mt-4
mt-md-0"> <!-- Slider main container --> <div class="swiper
ex3Swiper"> <div class="swiper-wrapper mb-5"> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Rahul Mehta</h5> <p class="text-muted
mb-0">Marketing Head</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Nguyen Minh</h5> <p class="text-muted
mb-0">Software Engineer</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Neha Gupta</h5> <p class="text-muted
mb-0">Content Strategist</p> </div> </div> </div> <div
class="swiper-slide" style="height: auto;"> <div class="card
bg-secondary shadow border-0 h-100 p-0"> <img
src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team
Member Photograph"> <div class="card-body p-3"> <h5
class="card-title">Jane Smith</h5> <p class="text-muted
mb-0">Product Designer</p> </div> </div> </div> </div>
<div class="swiper-pagination"></div> </div> </div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex3Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 30,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex3Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 30, } }
}); });
Example 4
Our Team
Get to know the team
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nemo.
<section class="bg-body py-5">
<div class="container">
<div class="row mb-4">
<div class="col-md-6">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Get to know the team</h2>
</div>
<div class="col-md-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nemo.
</p>
</div>
</div>
<div class="row g-3 g-lg-4">
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Rahul Mehta</p>
<p class="text-muted mb-2">Marketing Head</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0 mt-0 mt-md-4">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar7.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Nguyen Minh</p>
<p class="text-muted mb-2">Software Engineer</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar3.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Neha Gupta</p>
<p class="text-muted mb-2">Content Strategist</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="card bg-secondary shadow border-0 p-0 mt-0 mt-md-4">
<figure class="img-scale rounded-top-4 mb-0">
<img src="/assets/images/avatars/avatar1.jpg" class="card-img-top" alt="Team Member Image">
</figure>
<div class="card-body p-3">
<p class="card-title mb-2">Jane Smith</p>
<p class="text-muted mb-2">Product Designer</p>
<a href="#" class="text-primary text-decoration-none mb-0">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row mb-4"> <div class="col-md-6"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-md-0">Get to know the team</h2> </div> <div
class="col-md-6"> <p class="text-muted mb-0"> Lorem ipsum dolor sit
amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident
nemo. </p> </div> </div> <div class="row g-3 g-lg-4"> <div
class="col-sm-6 col-md-3"> <div class="card bg-secondary shadow border-0
p-0"> <figure class="img-scale rounded-top-4 mb-0"> <img
src="/assets/images/avatars/avatar6.jpg" class="card-img-top" alt="Team
Member Image"> </figure> <div class="card-body p-3"> <p
class="card-title mb-2">Rahul Mehta</p> <p class="text-muted
mb-2">Marketing Head</p> <a href="#" class="text-primary
text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0 mt-0 mt-md-4"> <figure class="img-scale
rounded-top-4 mb-0"> <img src="/assets/images/avatars/avatar7.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Nguyen
Minh</p> <p class="text-muted mb-2">Software Engineer</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0"> <figure class="img-scale rounded-top-4
mb-0"> <img src="/assets/images/avatars/avatar3.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Neha
Gupta</p> <p class="text-muted mb-2">Content Strategist</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> <div class="col-sm-6 col-md-3"> <div class="card
bg-secondary shadow border-0 p-0 mt-0 mt-md-4"> <figure class="img-scale
rounded-top-4 mb-0"> <img src="/assets/images/avatars/avatar1.jpg"
class="card-img-top" alt="Team Member Image"> </figure> <div
class="card-body p-3"> <p class="card-title mb-2">Jane
Smith</p> <p class="text-muted mb-2">Product Designer</p> <a
href="#" class="text-primary text-decoration-none mb-0"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> </div> </section>
Example 5
Our Team
Driven by people, backed by passion
Lorem ipsum dolor sit amet consect adipis elit. Doloru quibus libero corpor digniss provide nemuam impedit dolor vel sit amet.
<section class="bg-body py-5">
<div class="container">
<div class="text-start text-sm-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Team</h1>
<h2 class="mb-2">Driven by people, backed by passion</h2>
<p class="text-muted mb-4">
Lorem ipsum dolor sit amet consect adipis elit. Doloru quibus libero
corpor digniss provide nemuam impedit dolor vel sit amet.
</p>
</div>
<div class="swiper ex5Swiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Rahul Mehta</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Marketing Head</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Jane Smith</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Product Designer</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar7.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Nguyen Minh</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Software Engineer</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Neha Gupta</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Content Strategist</span>
</div>
<div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale">
<img src="/assets/images/avatars/avatar2.jpg" class="img-fluid rounded-4" alt="Team Member Avatar">
</figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none link-primary">Amara Evans</a></h5>
<span class="badge text-bg-secondary text-uppercase border shadow">Sales Executive</span>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-start text-sm-center"> <h1 class="text-primary fw-semibold
text-uppercase fs-5 mb-2">Our Team</h1> <h2 class="mb-2">Driven by
people, backed by passion</h2> <p class="text-muted mb-4"> Lorem ipsum
dolor sit amet consect adipis elit. Doloru quibus libero corpor digniss provide nemuam impedit
dolor vel sit amet. </p> </div> <div class="swiper ex5Swiper">
<div class="swiper-wrapper mb-5"> <div class="swiper-slide"
style="height: auto;"> <figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar6.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Rahul
Mehta</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Marketing Head</span> </div> <div class="swiper-slide"
style="height: auto;"> <figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar1.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Jane
Smith</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Product Designer</span> </div> <div
class="swiper-slide" style="height: auto;"> <figure
class="img-grayscale"> <img src="/assets/images/avatars/avatar7.jpg"
class="img-fluid rounded-4" alt="Team Member Avatar"> </figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none
link-primary">Nguyen Minh</a></h5> <span class="badge
text-bg-secondary text-uppercase border shadow">Software Engineer</span>
</div> <div class="swiper-slide" style="height: auto;">
<figure class="img-grayscale"> <img
src="/assets/images/avatars/avatar3.jpg" class="img-fluid rounded-4"
alt="Team Member Avatar"> </figure> <h5 class="mb-2"><a
href="#" class="text-decoration-none link-primary">Neha
Gupta</a></h5> <span class="badge text-bg-secondary text-uppercase border
shadow">Content Strategist</span> </div> <div
class="swiper-slide" style="height: auto;"> <figure
class="img-grayscale"> <img src="/assets/images/avatars/avatar2.jpg"
class="img-fluid rounded-4" alt="Team Member Avatar"> </figure>
<h5 class="mb-2"><a href="#" class="text-decoration-none
link-primary">Amara Evans</a></h5> <span class="badge
text-bg-secondary text-uppercase border shadow">Sales Executive</span>
</div> </div> <div class="swiper-pagination"></div>
</div> </div> </section>
.swiper-pagination-bullet {
background: var(--bs-primary);
}
.swiper-pagination-bullet-active {
background: var(--bs-primary);
}
.swiper-pagination-bullet { background: var(--bs-primary); } .swiper-pagination-bullet-active {
background: var(--bs-primary); }
document.addEventListener('DOMContentLoaded', () => {
var swiper = new Swiper(".ex5Swiper", {
slidesPerView: 1,
spaceBetween: 20,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 3000,
disableOnInteraction: false,
},
breakpoints: {
576: {
slidesPerView: 2,
spaceBetween: 20,
},
768: {
slidesPerView: 3,
spaceBetween: 20,
}
}
});
});
document.addEventListener('DOMContentLoaded', () => { var swiper = new
Swiper(".ex5Swiper", { slidesPerView: 1, spaceBetween: 20, pagination: { el:
".swiper-pagination", clickable: true, }, autoplay: { delay: 3000,
disableOnInteraction: false, }, breakpoints: { 576: { slidesPerView: 2, spaceBetween: 20, },
768: { slidesPerView: 3, spaceBetween: 20, } } }); });
ESC