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 cs-team">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-right">
<a class="social-btn sb-light mr-2" href="#">
<i class="cxi-facebook"></i>
</a>
<a class="social-btn sb-light mr-2" href="#">
<i class="cxi-instagram"></i>
</a>
<a class="social-btn sb-light" href="#">
<i class="cxi-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 cs-team">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-right">
<a class="social-btn sb-solid sb-round sb-light mr-2" href="#">
<i class="cxi-facebook"></i>
</a>
<a class="social-btn sb-solid sb-round sb-light mr-2" href="#">
<i class="cxi-instagram"></i>
</a>
<a class="social-btn sb-solid sb-round sb-light" href="#">
<i class="cxi-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 cs-team-alt">
<div class="card-img">
<img src="path-to-image" alt="Image alt"/>
<div class="card-floating-links text-center">
<a class="social-btn sb-light text-white mr-2" href="#">
<i class="cxi-facebook"></i>
</a>
<a class="social-btn sb-light text-white mr-2" href="#">
<i class="cxi-instagram"></i>
</a>
<a class="social-btn sb-light text-white" href="#">
<i class="cxi-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-left">
<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 font-size-sm text-muted">Director of Client Services</p>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-google"></i>
</a>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-twitter"></i>
</a>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-linkedin"></i>
</a>
<a href="#" class="social-btn mb-2">
<i class="cxi-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 font-size-sm text-muted">Account Director</p>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-twitter"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-messenger"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-pinterest"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mb-2">
<i class="cxi-linkedin"></i>
</a>
</div>Style 3
<!-- Team Style 3: Picture on the left + rounded picture + basic socials -->
<div class="media">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="100" alt="Image alt">
<div class="media-body pl-3">
<h5 class="mb-1">Johnny Lane</h5>
<p class="mb-3 pb-1 font-size-sm text-muted">Director of Client Services</p>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-google"></i>
</a>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-twitter"></i>
</a>
<a href="#" class="social-btn mr-2 mb-2">
<i class="cxi-linkedin"></i>
</a>
<a href="#" class="social-btn mb-2">
<i class="cxi-facebook"></i>
</a>
</div>
</div>
<!-- Team Style 3: Picture on the right + rounded circle picture + solid rounded socials -->
<div class="media text-right">
<div class="media-body pr-3">
<h5 class="mb-1">Floyd Simmmons</h5>
<p class="mb-3 pb-1 font-size-sm text-muted">Account Director</p>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-twitter"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-messenger"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mr-2 mb-2">
<i class="cxi-pinterest"></i>
</a>
<a href="#" class="social-btn sb-solid sb-round mb-2">
<i class="cxi-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 font-weight-normal" href="tel:00331697720">
<i class="cxi-phone mr-2"></i>
00 33 169 7720
</a>
</li>
<li class="nav-dark mb-0">
<a class="nav-link p-0 font-weight-normal" href="mailto:j.lane@example.com">
<i class="cxi-mail align-middle mr-2"></i>
j.lane@example.com
</a>
</li>
</ul>
<a class="social-btn mr-2 mb-2" href="#">
<i class="cxi-facebook"></i>
</a>
<a class="social-btn mr-2 mb-2" href="#">
<i class="cxi-twitter"></i>
</a>
<a class="social-btn mr-2 mb-2" href="#">
<i class="cxi-linkedin"></i>
</a>
<a class="social-btn mb-2" href="#">
<i class="cxi-google"></i>
</a>
</div>
</div>
<!-- Team Style 4: Card shadow + round picture + outline socials -->
<div class="card border-0 box-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 font-weight-normal" href="tel:00331697720">
<i class="cxi-phone mr-2"></i>
00 33 169 7720
</a>
</li>
<li class="nav-dark mb-0">
<a class="nav-link p-0 font-weight-normal" href="mailto:f.simmons@example.com">
f.simmons@example.com
<i class="cxi-mail align-middle mr-2"></i>
</a>
</li>
</ul>
<a class="social-btn sb-outline mr-2 mb-2" href="#">
<i class="cxi-twitter"></i>
</a>
<a class="social-btn sb-outline mr-2 mb-2" href="#">
<i class="cxi-messenger"></i>
</a>
<a class="social-btn sb-outline mr-2 mb-2" href="#">
<i class="cxi-pinterest"></i>
</a>
<a class="social-btn sb-outline mb-2" href="#">
<i class="cxi-linkedin"></i>
</a>
</div>
</div>