Buy now
Team
Component designed to showcase team members. Comes in different styles.
Createx component
Style 1
<!-- Team Style 1: Fading background & basic socials -->
<div class="card team">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-end">
<a class="btn-social bs-light me-2" href="#">
<i class="ci-facebook"></i>
</a>
<a class="btn-social bs-light me-2" href="#">
<i class="ci-instagram"></i>
</a>
<a class="btn-social bs-light" href="#">
<i class="ci-linkedin"></i>
</a>
</div>
</div>
<div class="card-body py-3 text-center">
<h5 class="card-title mb-1">Jane Cooper</h5>
<p class="card-text text-muted">Digital Marketing Manager</p>
</div>
</div>
<!-- Team Style 1: Fading background & solid rounded light socials -->
<div class="card team">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-end">
<a class="btn-social bs-solid rounded-circle bs-light me-2" href="#">
<i class="ci-facebook"></i>
</a>
<a class="btn-social bs-solid rounded-circle bs-light me-2" href="#">
<i class="ci-instagram"></i>
</a>
<a class="btn-social bs-solid rounded-circle bs-light" href="#">
<i class="ci-linkedin"></i>
</a>
</div>
</div>
<div class="card-body py-3 text-center">
<h5 class="card-title mb-1">Shawn Edwards</h5>
<p class="card-text text-muted">Co-founder and Creative Director</p>
</div>
</div>
<!-- Team Style 1: Floating light socials -->
<div class="card team-alt">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-center">
<a class="btn-social bs-light text-white me-2" href="#">
<i class="ci-facebook"></i>
</a>
<a class="btn-social bs-light text-white me-2" href="#">
<i class="ci-instagram"></i>
</a>
<a class="btn-social bs-light text-white" href="#">
<i class="ci-linkedin"></i>
</a>
</div>
</div>
<div class="card-body py-3 text-center">
<h5 class="card-title mb-1">Shawn Edwards</h5>
<p class="card-text text-muted">Co-founder and Creative Director</p>
</div>
</div>Style 2
<!-- Team Style 2: Left aligned + rounded picture + basic socials -->
<div class="text-start">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="92" alt="Image alt">
<h5 class="mb-1">Johnny Lane</h5>
<p class="mb-3 pb-1 fs-sm text-muted">Director of Client Services</p>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-google"></i>
</a>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-twitter"></i>
</a>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-linkedin"></i>
</a>
<a href="#" class="btn-social mb-2">
<i class="ci-facebook"></i>
</a>
</div>
<!-- Team Style 2: Center aligned + round picture + round solid socials -->
<div class="text-center">
<img src="path-to-image" class="d-inline-block rounded-circle mb-3" width="92" alt="Image alt">
<h5 class="mb-1">Floyd Simmmons</h5>
<p class="mb-3 pb-1 fs-sm text-muted">Account Director</p>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-twitter"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-messenger"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-pinterest"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle mb-2">
<i class="ci-linkedin"></i>
</a>
</div>Style 3
<!-- Team Style 3: Picture on the left + rounded picture + basic socials -->
<div class="d-flex align-items-start">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="100" alt="Image alt">
<div class="ps-3">
<h5 class="mb-1">Johnny Lane</h5>
<p class="mb-3 pb-1 fs-sm text-muted">Director of Client Services</p>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-google"></i>
</a>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-twitter"></i>
</a>
<a href="#" class="btn-social me-2 mb-2">
<i class="ci-linkedin"></i>
</a>
<a href="#" class="btn-social mb-2">
<i class="ci-facebook"></i>
</a>
</div>
</div>
<!-- Team Style 3: Picture on the right + rounded circle picture + solid rounded socials -->
<div class="d-flex align-items-start text-end">
<div class="pe-3">
<h5 class="mb-1">Floyd Simmmons</h5>
<p class="mb-3 pb-1 fs-sm text-muted">Account Director</p>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-twitter"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-messenger"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
<i class="ci-pinterest"></i>
</a>
<a href="#" class="btn-social bs-solid rounded-circle mb-2">
<i class="ci-linkedin"></i>
</a>
</div>
<img src="path-to-image" class="d-inline-block rounded-circle mb-3" width="100" alt="Image alt">
</div>Style 4
<!-- Team Style 4: Card border + rounded picture + solid socials -->
<div class="card text-center">
<div class="card-body">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="92" alt="Image alt"/>
<h5 class="mb-1">Johnny Lane</h5>
<p class="text-muted">Director of Client Services</p>
<ul class="list-unstyled mb-3 pb-1">
<li class="nav-dark">
<a class="nav-link p-0 fw-normal" href="tel:00331697720">
<i class="ci-phone me-2"></i>
00 33 169 7720
</a>
</li>
<li class="nav-dark mb-0">
<a class="nav-link p-0 fw-normal" href="mailto:j.lane@example.com">
<i class="ci-mail align-middle me-2"></i>
j.lane@example.com
</a>
</li>
</ul>
<a class="btn-social me-2 mb-2" href="#">
<i class="ci-facebook"></i>
</a>
<a class="btn-social me-2 mb-2" href="#">
<i class="ci-twitter"></i>
</a>
<a class="btn-social me-2 mb-2" href="#">
<i class="ci-linkedin"></i>
</a>
<a class="btn-social mb-2" href="#">
<i class="ci-google"></i>
</a>
</div>
</div>
<!-- Team Style 4: Card shadow + round picture + outline socials -->
<div class="card border-0 shadow-sm text-center">
<div class="card-body">
<img src="path-to-image" class="d-inline-block rounded-circle mb-3" width="92" alt="Image alt"/>
<h5 class="mb-1">Floyd Simmmons</h5>
<p class="text-muted">Account Director</p>
<ul class="list-unstyled mb-3 pb-1">
<li class="nav-dark">
<a class="nav-link p-0 fw-normal" href="tel:00331697720">
<i class="ci-phone me-2"></i>
00 33 169 7720
</a>
</li>
<li class="nav-dark mb-0">
<a class="nav-link p-0 fw-normal" href="mailto:f.simmons@example.com">
f.simmons@example.com
<i class="ci-mail align-middle me-2"></i>
</a>
</li>
</ul>
<a class="btn-social bs-outline me-2 mb-2" href="#">
<i class="ci-twitter"></i>
</a>
<a class="btn-social bs-outline me-2 mb-2" href="#">
<i class="ci-messenger"></i>
</a>
<a class="btn-social bs-outline me-2 mb-2" href="#">
<i class="ci-pinterest"></i>
</a>
<a class="btn-social bs-outline mb-2" href="#">
<i class="ci-linkedin"></i>
</a>
</div>
</div>