Buy now
Team
Component designed to showcase team members. Comes in different styles.
Around component
Style 1
<!-- Team Style 1: Border + whole card is a link -->
<a class="card card-curved-body card-hover" href="#">
<div class="card-floating-icon">
<i class="ai-instagram"></i>
</div>
<div class="card-img-top card-img-gradient">
<img src="path-to-image" alt="Sarah Cole"/>
</div>
<div class="card-body text-center">
<h3 class="h6 card-title mb-2">Sarah Cole</h3>
<p class="fs-xs text-body mb-0">Social d-flex strategist</p>
</div>
</a>
<!-- Team Style 1: Shadow + only icon is a link -->
<div class="card card-curved-body card-hover border-0 shadow">
<a class="card-floating-icon" href="#">
<i class="ai-mail"></i>
</a>
<div class="card-img-top card-img-gradient">
<img src="path-to-image" alt="Charlie Welch"/>
</div>
<div class="card-body text-center">
<h3 class="h6 card-title mb-2">Charlie Welch</h3>
<p class="fs-xs text-body mb-0">Financial director</p>
</div>
</div>// Team Style 1: Border + whole card is a link
a(href="#").card.card-curved-body.card-hover
.card-floating-icon
i.ai-instagram
.card-img-top.card-img-gradient
img(src="path-to-image", alt="Sarah Cole")
.card-body.text-center
h3.h6.card-title.mb-2 Sarah Cole
p.fs-xs.text-body.mb-0 Social d-flex strategist
// Team Style 1: Shadow + only icon is a link
.card.card-curved-body.card-hover.border-0.shadow
a(href="#").card-floating-icon
i.ai-mail
.card-img-top.card-img-gradient
img(src="path-to-image", alt="Charlie Welch")
.card-body.text-center
h3.h6.card-title.mb-2 Charlie Welch
p.fs-xs.text-body.mb-0 Financial director
Style 2
<!-- Team Style 2 -->
<div class="card border-0 shadow">
<div class="card-img">
<img src="path-to-image" alt="Emma Brown"/>
</div>
<div class="card-img-overlay justify-content-end text-center">
<h3 class="h6 text-light mb-1">Emma Brown</h3>
<p class="fs-xs text-light mb-1">Content creator</p>
<div class="d-flex justify-content-center align-items-center">
<a class="text-light text-decoration-none p-1 mx-2" href="#">
<i class="ai-facebook"></i>
</a>
<a class="text-light text-decoration-none p-1 mx-2" href="#">
<i class="ai-twitter"></i>
</a>
<a class="text-light text-decoration-none p-1 mx-2" href="#">
<i class="ai-instagram"></i>
</a>
</div>
</div>
</div>// Team Style 2
.card.border-0.shadow
.card-img
img(src="path-to-image", alt="Emma Brown")
.card-img-overlay.justify-content-end.text-center
h3.h6.text-light.mb-1 Emma Brown
p.fs-xs.text-light.mb-1 Content creator
.d-flex.justify-content-center.align-items-center
a(href="#").text-light.text-decoration-none.p-1.mx-2
i.ai-facebook
a(href="#").text-light.text-decoration-none.p-1.mx-2
i.ai-twitter
a(href="#").text-light.text-decoration-none.p-1.mx-2
i.ai-instagram
Style 3
<!-- Team Style 3: Left aligned + rounded picture + solid socials -->
<div class="text-start">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="96" alt="William Smith">
<h3 class="h6 pt-1 mb-1">William Smith</h3>
<p class="fs-ms text-muted">CEO, Co-founder at Company Ltd.</p>
<a href="#" class="btn-social bs-facebook bs-sm">
<i class="ai-facebook"></i>
</a>
<a href="#" class="btn-social bs-twitter bs-sm">
<i class="ai-twitter"></i>
</a>
<a href="#" class="btn-social bs-linkedin bs-sm">
<i class="ai-linkedin"></i>
</a>
<a href="#" class="btn-social bs-google bs-sm">
<i class="ai-google"></i>
</a>
</div>
<!-- Team Style 3: Center aligned + round picture + outline socials -->
<div class="text-center">
<img src="path-to-image" class="d-inline-block rounded-circle mb-3" width="96" alt="Amanda Gallaher">
<h3 class="h6 pt-1 mb-1">Amanda Gallaher</h3>
<p class="fs-ms text-muted">Chief of Marketing at Company Ltd.</p>
<a href="#" class="btn-social bs-twitter bs-outline bs-sm">
<i class="ai-twitter"></i>
</a>
<a href="#" class="btn-social bs-messenger bs-outline bs-sm">
<i class="ai-messenger"></i>
</a>
<a href="#" class="btn-social bs-pinterest bs-outline bs-sm">
<i class="ai-pinterest"></i>
</a>
<a href="#" class="btn-social bs-linkedin bs-outline bs-sm">
<i class="ai-linkedin"></i>
</a>
</div>// Team Style 3: Left aligned + rounded picture + solid socials
.text-start
img(src="path-to-image", alt="William Smith" width="96").d-inline-block.rounded.mb-3
h3.h6.pt-1.mb-1 William Smith
p.fs-ms.text-muted CEO, Co-founder at Company Ltd.
a(href="#").btn-social.bs-facebook.bs-sm.me-2.mb-2
i.ai-facebook
a(href="#").btn-social.bs-twitter.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-linkedin.bs-sm.me-2.mb-2
i.ai-linkedin
a(href="#").btn-social.bs-google.bs-sm.me-2.mb-2
i.ai-google
// Team Style 3: Center aligned + round picture + outline socials
.text-center
img(src="path-to-image", alt="Amanda Gallaher" width="96").d-inline-block.rounded-circle.mb-3
h3.h6.pt-1.mb-1 Amanda Gallaher
p.fs-ms.text-muted Chief of Marketing at Company Ltd.
a(href="#").btn-social.bs-twitter.bs-outline.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-messenger.bs-outline.bs-sm.me-2.mb-2
i.ai-messenger
a(href="#").btn-social.bs-pinterest.bs-outline.bs-sm.me-2.mb-2
i.ai-pinterest
a(href="#").btn-social.bs-linkedin.bs-outline.bs-sm.me-2.mb-2
i.ai-linkedin
Style 4
<!-- Team Style 4: Picture on the left + rounded picture + solid round socials -->
<div class="d-flex align-items-start">
<img class="rounded" width="96" src="path-to-image" alt="Jonathan Doe"/>
<div class="ps-3">
<h3 class="h6 pt-1 mb-1">Jonathan Doe</h3>
<p class="fs-ms text-muted">CEO, Co-founder at Company Ltd.</p>
<a class="btn-social bs-facebook bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-facebook"></i>
</a>
<a class="btn-social bs-twitter bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-twitter"></i>
</a>
<a class="btn-social bs-linkedin bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-linkedin"></i>
</a>
<a class="btn-social bs-google bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-google"></i>
</a>
</div>
</div>
<!-- Team Style 4: Picture on the right + round picture + outline round socials -->
<div class="d-flex align-items-start">
<div class="text-end pe-3">
<h3 class="h6 pt-1 mb-1">Barbara Palson</h3>
<p class="fs-ms text-muted">Chief of Marketing at Company Ltd.</p>
<a class="btn-social bs-twitter bs-outline bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-twitter"></i>
</a>
<a class="btn-social bs-messenger bs-outline bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-messenger"></i>
</a>
<a class="btn-social bs-pinterest bs-outline bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-pinterest"></i>
</a>
<a class="btn-social bs-linkedin bs-outline bs-round bs-sm me-2 mb-2" href="#">
<i class="ai-linkedin"></i>
</a>
</div>
<img class="rounded-circle" width="96" src="path-to-image" alt="Barbara Palson"/>
</div>// Team Style 4: Picture on the left + rounded picture + solid round socials
.d-flex.align-items-start
img(src="path-to-image", alt="Jonathan Doe", width="96").rounded
.ps-3
h3.h6.pt-1.mb-1 Jonathan Doe
p.fs-ms.text-muted CEO, Co-founder at Company Ltd.
a(href="#").btn-social.bs-facebook.bs-round.bs-sm.me-2.mb-2
i.ai-facebook
a(href="#").btn-social.bs-twitter.bs-round.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-linkedin.bs-round.bs-sm.me-2.mb-2
i.ai-linkedin
a(href="#").btn-social.bs-google.bs-round.bs-sm.me-2.mb-2
i.ai-google
// Team Style 4: Picture on the right + round picture + outline round socials
.d-flex.align-items-start
.text-end.pe-3
h3.h6.pt-1.mb-1 Barbara Palson
p.fs-ms.text-muted Chief of Marketing at Company Ltd.
a(href="#").btn-social.bs-twitter.bs-outline.bs-round.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-messenger.bs-outline.bs-round.bs-sm.me-2.mb-2
i.ai-messenger
a(href="#").btn-social.bs-pinterest.bs-outline.bs-round.bs-sm.me-2.mb-2
i.ai-pinterest
a(href="#").btn-social.bs-linkedin.bs-outline.bs-round.bs-sm.me-2.mb-2
i.ai-linkedin
img(src="path-to-image", alt="Barbara Palson", width="96").rounded-circle
Style 5
<!-- Team Style 5: Card border + rounded picture + solid socials -->
<div class="card text-center">
<div class="card-body">
<img class="d-inline-block rounded mb-3", width="96" src="path-to-image" alt="Jane Tanaka"/>
<h3 class="h6 pt-1 mb-1">Jane Tanaka</h3>
<p class="fs-ms text-muted">Lead Accountant at Company Ltd.</p>
<ul class="fs-sm list-unstyled mb-4">
<li>
<i class="ai-phone me-2"></i>
<a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
</li>
<li class="mb-0">
<i class="ai-mail me-2"></i>
<a class="nav-link-style" href="mailto:ben.miller@example.com">j.tanaka@example.com</a>
</li>
</ul>
<a class="btn-social bs-facebook bs-sm me-2 mb-2" href="#">
<i class="ai-facebook"></i>
</a>
<a class="btn-social bs-twitter bs-sm me-2 mb-2" href="#">
<i class="ai-twitter"></i>
</a>
<a class="btn-social bs-linkedin bs-sm me-2 mb-2" href="#">
<i class="ai-linkedin"></i>
</a>
<a class="btn-social bs-google bs-sm me-2 mb-2" href="#">
<i class="ai-google"></i>
</a>
</div>
</div>
<!-- Team Style 5: Card shadow + round picture + outline socials -->
<div class="card border-0 shadow text-center">
<div class="card-body">
<img class="d-inline-block rounded-circle mb-3", width="96" src="path-to-image" alt="Sanomi Smith"/>
<h3 class="h6 pt-1 mb-1">Sanomi Smith</h3>
<p class="fs-ms text-muted">Lead Accountant at Company Ltd.</p>
<ul class="fs-sm list-unstyled mb-4">
<li>
<i class="ai-phone me-2"></i>
<a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
</li>
<li class="mb-0">
<i class="ai-mail me-2"></i>
<a class="nav-link-style" href="mailto:ben.miller@example.com">s.smith@example.com</a>
</li>
</ul>
<a class="btn-social bs-twitter bs-outline bs-sm me-2 mb-2" href="#">
<i class="ai-twitter"></i>
</a>
<a class="btn-social bs-messenger bs-outline bs-sm me-2 mb-2" href="#">
<i class="ai-messenger"></i>
</a>
<a class="btn-social bs-pinterest bs-outline bs-sm me-2 mb-2" href="#">
<i class="ai-pinterest"></i>
</a>
<a class="btn-social bs-linkedin bs-outline bs-sm me-2 mb-2" href="#">
<i class="ai-linkedin"></i>
</a>
</div>
</div>// Team Style 5: Card border + rounded picture + solid socials
.card.text-center
.card-body
img(src="path-to-image", alt="Jane Tanaka", width="96").d-inline-block.rounded.mb-3
h3.h6.pt-1.mb-1 Jane Tanaka
p.fs-ms.text-muted Lead Accountant at Company Ltd.
ul.fs-sm.list-unstyled.mb-4
li
i.ai-phone.me-2
a(href="tel:00331697720").nav-link-style
| 00 33 169 7720
li.mb-0
i.ai-mail.me-2
a(href="mailto:ben.miller@example.com").nav-link-style
| j.tanaka@example.com
a(href="#").btn-social.bs-facebook.bs-sm.me-2.mb-2
i.ai-facebook
a(href="#").btn-social.bs-twitter.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-linkedin.bs-sm.me-2.mb-2
i.ai-linkedin
a(href="#").btn-social.bs-google.bs-sm.me-2.mb-2
i.ai-google
// Team Style 5: Card shadow + round picture + outline socials
.card.border-0.shadow.text-center
.card-body
img(src="path-to-image", alt="Sanomi Smith", width="96").d-inline-block.rounded-circle.mb-3
h3.h6.pt-1.mb-1 Sanomi Smith
p.fs-ms.text-muted Lead Accountant at Company Ltd.
ul.fs-sm.list-unstyled.mb-4
li
i.ai-phone.me-2
a(href="tel:00331697720").nav-link-style
| 00 33 169 7720
li.mb-0
i.ai-mail.me-2
a(href="mailto:ben.miller@example.com").nav-link-style
| s.smith@example.com
a(href="#").btn-social.bs-twitter.bs-outline.bs-sm.me-2.mb-2
i.ai-twitter
a(href="#").btn-social.bs-messenger.bs-outline.bs-sm.me-2.mb-2
i.ai-messenger
a(href="#").btn-social.bs-pinterest.bs-outline.bs-sm.me-2.mb-2
i.ai-pinterest
a(href="#").btn-social.bs-linkedin.bs-outline.bs-sm.me-2.mb-2
i.ai-linkedin