Buy now
Team
Component to display team members on the website.
Cartzilla component
Style 1
<!-- Team Style 1: Left aligned + rounded picture + solid socials -->
<div class="text-left">
<img src="path-to-image" class="d-inline-block rounded mb-3" width="96" alt="William Smith">
<h6 class="pt-1 mb-1">William Smith</h6>
<p class="font-size-sm text-muted">CEO, Co-founder at Company Ltd.</p>
<a href="#" class="social-btn sb-facebook sb-sm">
<i class="czi-facebook"></i>
</a>
<a href="#" class="social-btn sb-twitter sb-sm">
<i class="czi-twitter"></i>
</a>
<a href="#" class="social-btn sb-linkedin sb-sm">
<i class="czi-linkedin"></i>
</a>
<a href="#" class="social-btn sb-google sb-sm">
<i class="czi-google"></i>
</a>
</div>
<!-- Team Style 1: 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">
<h6 class="pt-1 mb-1">Amanda Gallaher</h6>
<p class="font-size-sm text-muted">Chief of Marketing at Company Ltd.</p>
<a href="#" class="social-btn sb-twitter sb-outline sb-sm">
<i class="czi-twitter"></i>
</a>
<a href="#" class="social-btn sb-messenger sb-outline sb-sm">
<i class="czi-messenger"></i>
</a>
<a href="#" class="social-btn sb-pinterest sb-outline sb-sm">
<i class="czi-pinterest"></i>
</a>
<a href="#" class="social-btn sb-linkedin sb-outline sb-sm">
<i class="czi-linkedin"></i>
</a>
</div>// Team Style 1: Left aligned + rounded picture + solid socials
.text-left
+image("path-to-image", "William Smith")(width="96").d-inline-block.rounded.mb-3
h6.pt-1.mb-1 William Smith
p.font-size-sm.text-muted CEO, Co-founder at Company Ltd.
a(href="#").social-btn.sb-facebook.sb-sm.mr-2.mb-2
i.czi-facebook
a(href="#").social-btn.sb-twitter.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-linkedin.sb-sm.mr-2.mb-2
i.czi-linkedin
a(href="#").social-btn.sb-google.sb-sm.mr-2.mb-2
i.czi-google
// Team Style 1: Center aligned + round picture + outline socials
.text-center
+image("path-to-image", "Amanda Gallaher")(width="96").d-inline-block.rounded-circle.mb-3
h6.pt-1.mb-1 Amanda Gallaher
p.font-size-sm.text-muted Chief of Marketing at Company Ltd.
a(href="#").social-btn.sb-twitter.sb-outline.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-messenger.sb-outline.sb-sm.mr-2.mb-2
i.czi-messenger
a(href="#").social-btn.sb-pinterest.sb-outline.sb-sm.mr-2.mb-2
i.czi-pinterest
a(href="#").social-btn.sb-linkedin.sb-outline.sb-sm.mr-2.mb-2
i.czi-linkedin
Horizontal layout
<!-- Horizontal layout: Picture on the left + rounded picture + solid round socials -->
<div class="media">
<img class="d-inline-block rounded" width="96" src="../img/team/03.jpg" alt="Jonathan Doe"/>
<div class="media-body pl-3">
<h6 class="pt-1 mb-1">Jonathan Doe</h6>
<p class="font-size-sm text-muted">CEO, Co-founder at Company Ltd.</p>
<a class="social-btn sb-facebook sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-facebook"></i>
</a>
<a class="social-btn sb-twitter sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-twitter"></i>
</a>
<a class="social-btn sb-linkedin sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-linkedin"></i>
</a>
<a class="social-btn sb-google sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-google"></i>
</a>
</div>
</div>
<!-- Horizontal layout: Picture on the right + round picture + outline round socials -->
<div class="media">
<div class="media-body text-right pr-3">
<h6 class="pt-1 mb-1">Barbara Palson</h6>
<p class="font-size-sm text-muted">Chief of Marketing at Company Ltd.</p>
<a class="social-btn sb-twitter sb-outline sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-twitter"></i>
</a>
<a class="social-btn sb-messenger sb-outline sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-messenger"></i>
</a>
<a class="social-btn sb-pinterest sb-outline sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-pinterest"></i>
</a>
<a class="social-btn sb-linkedin sb-outline sb-round sb-sm mr-2 mb-2" href="#">
<i class="czi-linkedin"></i>
</a>
</div>
<img class="d-inline-block rounded-circle" width="96" src="../img/team/04.jpg" alt="Barbara Palson"/>
</div>// Horizontal layout: Picture on the left + rounded picture + solid round socials
.media
+image("path-to-image", "Jonathan Doe")(width="96").d-inline-block.rounded
.media-body.pl-3
h6.pt-1.mb-1 Jonathan Doe
p.font-size-sm.text-muted CEO, Co-founder at Company Ltd.
a(href="#").social-btn.sb-facebook.sb-round.sb-sm.mr-2.mb-2
i.czi-facebook
a(href="#").social-btn.sb-twitter.sb-round.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-linkedin.sb-round.sb-sm.mr-2.mb-2
i.czi-linkedin
a(href="#").social-btn.sb-google.sb-round.sb-sm.mr-2.mb-2
i.czi-google
// Horizontal layout: Picture on the right + round picture + outline round socials
.media
.media-body.text-right.pr-3
h6.pt-1.mb-1 Barbara Palson
p.font-size-sm.text-muted Chief of Marketing at Company Ltd.
a(href="#").social-btn.sb-twitter.sb-outline.sb-round.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-messenger.sb-outline.sb-round.sb-sm.mr-2.mb-2
i.czi-messenger
a(href="#").social-btn.sb-pinterest.sb-outline.sb-round.sb-sm.mr-2.mb-2
i.czi-pinterest
a(href="#").social-btn.sb-linkedin.sb-outline.sb-round.sb-sm.mr-2.mb-2
i.czi-linkedin
+image("path-to-image", "Barbara Palson")(width="96").d-inline-block.rounded-circle
Style 2 (inside card)
<!-- 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="Benjamin Miller"/>
<h6 class="pt-1 mb-1">Benjamin Miller</h6>
<p class="font-size-sm text-muted">Lead Accountant at Company Ltd.</p>
<ul class="font-size-sm list-unstyled mb-4">
<li class="mb-0">
<i class="czi-phone mr-2"></i>
<a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
</li>
<li class="mb-0">
<i class="czi-mail mr-2"></i>
<a class="nav-link-style" href="mailto:ben.miller@example.com">ben.miller@example.com</a>
</li>
</ul>
<a class="social-btn sb-facebook sb-sm mr-2 mb-2" href="#">
<i class="czi-facebook"></i>
</a>
<a class="social-btn sb-twitter sb-sm mr-2 mb-2" href="#">
<i class="czi-twitter"></i>
</a>
<a class="social-btn sb-linkedin sb-sm mr-2 mb-2" href="#">
<i class="czi-linkedin"></i>
</a>
<a class="social-btn sb-google sb-sm mr-2 mb-2" href="#">
<i class="czi-google"></i>
</a>
</div>
</div>
<!-- Card shadow: Round picture + outline socials -->
<div class="card text-center border-0 box-shadow">
<div class="card-body">
<img class="d-inline-block rounded-circle mb-3" width="96" src="path-to-image" alt="Richard Williams"/>
<h6 class="pt-1 mb-1">Richard Williams</h6>
<p class="font-size-sm text-muted">Financial Director at Company Ltd.</p>
<ul class="font-size-sm list-unstyled mb-4">
<li class="mb-0">
<i class="czi-phone mr-2"></i>
<a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
</li>
<li class="mb-0">
<i class="czi-mail mr-2"></i>
<a class="nav-link-style" href="mailto:r.williams@example.com">r.williams@example.com</a>
</li>
</ul>
<a class="social-btn sb-twitter sb-outline sb-sm mr-2 mb-2" href="#">
<i class="czi-twitter"></i>
</a>
<a class="social-btn sb-messenger sb-outline sb-sm mr-2 mb-2" href="#">
<i class="czi-messenger"></i>
</a>
<a class="social-btn sb-pinterest sb-outline sb-sm mr-2 mb-2" href="#">
<i class="czi-pinterest"></i>
</a>
<a class="social-btn sb-linkedin sb-outline sb-sm mr-2 mb-2" href="#">
<i class="czi-linkedin"></i>
</a>
</div>
</div>// Card border: Rounded picture + solid socials
.card.text-center
.card-body
+image("path-to-image", "Benjamin Miller")(width="96").d-inline-block.rounded.mb-3
h6.pt-1.mb-1 Benjamin Miller
p.font-size-sm.text-muted Lead Accountant at Company Ltd.
ul.font-size-sm.list-unstyled.mb-4
li.mb-0
i.czi-phone.mr-2
a(href="tel:00331697720").nav-link-style 00 33 169 7720
li.mb-0
i.czi-mail.mr-2
a(href="mailto:ben.miller@example.com").nav-link-style ben.miller@example.com
a(href="#").social-btn.sb-facebook.sb-sm.mr-2.mb-2
i.czi-facebook
a(href="#").social-btn.sb-twitter.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-linkedin.sb-sm.mr-2.mb-2
i.czi-linkedin
a(href="#").social-btn.sb-google.sb-sm.mr-2.mb-2
i.czi-google
// Card shadow: Round picture + outline socials
.card.text-center.border-0.box-shadow
.card-body
+image("path-to-image", "Richard Williams")(width="96").d-inline-block.rounded-circle.mb-3
h6.pt-1.mb-1 Richard Williams
p.font-size-sm.text-muted Financial Director at Company Ltd.
ul.font-size-sm.list-unstyled.mb-4
li.mb-0
i.czi-phone.mr-2
a(href="tel:00331697720").nav-link-style 00 33 169 7720
li.mb-0
i.czi-mail.mr-2
a(href="mailto:r.williams@example.com").nav-link-style r.williams@example.com
a(href="#").social-btn.sb-twitter.sb-outline.sb-sm.mr-2.mb-2
i.czi-twitter
a(href="#").social-btn.sb-messenger.sb-outline.sb-sm.mr-2.mb-2
i.czi-messenger
a(href="#").social-btn.sb-pinterest.sb-outline.sb-sm.mr-2.mb-2
i.czi-pinterest
a(href="#").social-btn.sb-linkedin.sb-outline.sb-sm.mr-2.mb-2
i.czi-linkedin