Around Buy now

Team

Component designed to showcase team members. Comes in different styles.

Around component

Style 1

Sarah Cole

Sarah Cole

Social media strategist
Charlie Welch

Charlie Welch

Financial director

<!-- 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="fe-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="font-size-xs text-body mb-0">Social media strategist</p>
  </div>
</a>

<!-- Team Style 1: Shadow + only icon is a link -->
<div class="card card-curved-body card-hover border-0 box-shadow">
  <a class="card-floating-icon" href="#">
    <i class="fe-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="font-size-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.fe-instagram
  .card-img-top.card-img-gradient
    +image("path-to-image", "Sarah Cole")
  .card-body.text-center
    h3.h6.card-title.mb-2 Sarah Cole
    p.font-size-xs.text-body.mb-0 Social media strategist

// Team Style 1: Shadow + only icon is a link
.card.card-curved-body.card-hover.border-0.box-shadow
  a(href="#").card-floating-icon
    i.fe-mail
  .card-img-top.card-img-gradient
    +image("path-to-image", "Charlie Welch")
  .card-body.text-center
    h3.h6.card-title.mb-2 Charlie Welch
    p.font-size-xs.text-body.mb-0 Financial director

Style 2

Emma Brown

Emma Brown

Content creator

<!-- Team Style 2 -->
<div class="card border-0 box-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="font-size-xs text-light mb-0">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="fe-facebook"></i>
      </a>
      <a class="text-light text-decoration-none p-1 mx-2" href="#">
        <i class="fe-twitter"></i>
      </a>
      <a class="text-light text-decoration-none p-1 mx-2" href="#">
        <i class="fe-instagram"></i>
      </a>
    </div>
  </div>
</div>
// Team Style 2
.card.border-0.box-shadow
  .card-img
    +image("path-to-image", "Emma Brown")
  .card-img-overlay.justify-content-end.text-center
    h3.h6.text-light.mb-1 Emma Brown
    p.font-size-xs.text-light.mb-0 Content creator
    .d-flex.justify-content-center.align-items-center
      a(href="#").text-light.text-decoration-none.p-1.mx-2
        i.fe-facebook
      a(href="#").text-light.text-decoration-none.p-1.mx-2
        i.fe-twitter
      a(href="#").text-light.text-decoration-none.p-1.mx-2
        i.fe-instagram

Style 3

William Smith

William Smith

CEO, Co-founder at Company Ltd.

Amanda Gallaher

Amanda Gallaher

Chief of Marketing at Company Ltd.

<!-- Team Style 3: 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">
  <h3 class="h6 pt-1 mb-1">William Smith</h3>
  <p class="font-size-ms text-muted">CEO, Co-founder at Company Ltd.</p>
  <a href="#" class="social-btn sb-facebook sb-sm">
    <i class="fe-facebook"></i>
  </a>
  <a href="#" class="social-btn sb-twitter sb-sm">
    <i class="fe-twitter"></i>
  </a>
  <a href="#" class="social-btn sb-linkedin sb-sm">
    <i class="fe-linkedin"></i>
  </a>
  <a href="#" class="social-btn sb-google sb-sm">
    <i class="fe-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="font-size-ms text-muted">Chief of Marketing at Company Ltd.</p>
  <a href="#" class="social-btn sb-twitter sb-outline sb-sm">
    <i class="fe-twitter"></i>
  </a>
  <a href="#" class="social-btn sb-messenger sb-outline sb-sm">
    <i class="fe-messenger"></i>
  </a>
  <a href="#" class="social-btn sb-pinterest sb-outline sb-sm">
    <i class="fe-pinterest"></i>
  </a>
  <a href="#" class="social-btn sb-linkedin sb-outline sb-sm">
    <i class="fe-linkedin"></i>
  </a>
</div>
// Team Style 3: Left aligned + rounded picture + solid socials
.text-left
  +image("path-to-image", "William Smith")(width="96").d-inline-block.rounded.mb-3
  h3.h6.pt-1.mb-1 William Smith
  p.font-size-ms.text-muted CEO, Co-founder at Company Ltd.
  a(href="#").social-btn.sb-facebook.sb-sm.mr-2.mb-2
    i.fe-facebook
  a(href="#").social-btn.sb-twitter.sb-sm.mr-2.mb-2
    i.fe-twitter
  a(href="#").social-btn.sb-linkedin.sb-sm.mr-2.mb-2
    i.fe-linkedin
  a(href="#").social-btn.sb-google.sb-sm.mr-2.mb-2
    i.fe-google

// Team Style 3: Center aligned + round picture + outline socials
.text-center
  +image("path-to-image", "Amanda Gallaher")(width="96").d-inline-block.rounded-circle.mb-3
  h3.h6.pt-1.mb-1 Amanda Gallaher
  p.font-size-ms.text-muted Chief of Marketing at Company Ltd.
  a(href="#").social-btn.sb-twitter.sb-outline.sb-sm.mr-2.mb-2
    i.fe-twitter
  a(href="#").social-btn.sb-messenger.sb-outline.sb-sm.mr-2.mb-2
    i.fe-messenger
  a(href="#").social-btn.sb-pinterest.sb-outline.sb-sm.mr-2.mb-2
    i.fe-pinterest
  a(href="#").social-btn.sb-linkedin.sb-outline.sb-sm.mr-2.mb-2
    i.fe-linkedin

Style 4

Jonathan Doe

Jonathan Doe

CEO, Co-founder at Company Ltd.

Barbara Palson

Chief of Marketing at Company Ltd.

Barbara Palson 
<!-- Team Style 4: Picture on the left + rounded picture + solid round socials -->
<div class="media">
  <img class="rounded" width="96" src="path-to-image" alt="Jonathan Doe"/>
  <div class="media-body pl-3">
    <h3 class="h6 pt-1 mb-1">Jonathan Doe</h3>
    <p class="font-size-ms 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="fe-facebook"></i>
    </a>
    <a class="social-btn sb-twitter sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-twitter"></i>
    </a>
    <a class="social-btn sb-linkedin sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-linkedin"></i>
    </a>
    <a class="social-btn sb-google sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-google"></i>
    </a>
  </div>
</div>

<!-- Team Style 4: Picture on the right + round picture + outline round socials -->
<div class="media">
  <div class="media-body text-right pr-3">
    <h3 class="h6 pt-1 mb-1">Barbara Palson</h3>
    <p class="font-size-ms 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="fe-twitter"></i>
    </a>
    <a class="social-btn sb-messenger sb-outline sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-messenger"></i>
    </a>
    <a class="social-btn sb-pinterest sb-outline sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-pinterest"></i>
    </a>
    <a class="social-btn sb-linkedin sb-outline sb-round sb-sm mr-2 mb-2" href="#">
      <i class="fe-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
.media
  +image("path-to-image", "Jonathan Doe")(width="96").rounded
  .media-body.pl-3
    h3.h6.pt-1.mb-1 Jonathan Doe
    p.font-size-ms.text-muted CEO, Co-founder at Company Ltd.
    a(href="#").social-btn.sb-facebook.sb-round.sb-sm.mr-2.mb-2
      i.fe-facebook
    a(href="#").social-btn.sb-twitter.sb-round.sb-sm.mr-2.mb-2
      i.fe-twitter
    a(href="#").social-btn.sb-linkedin.sb-round.sb-sm.mr-2.mb-2
      i.fe-linkedin
    a(href="#").social-btn.sb-google.sb-round.sb-sm.mr-2.mb-2
      i.fe-google

// Team Style 4: Picture on the right + round picture + outline round socials
.media
  .media-body.text-right.pr-3
    h3.h6.pt-1.mb-1 Barbara Palson
    p.font-size-ms.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.fe-twitter
    a(href="#").social-btn.sb-messenger.sb-outline.sb-round.sb-sm.mr-2.mb-2
      i.fe-messenger
    a(href="#").social-btn.sb-pinterest.sb-outline.sb-round.sb-sm.mr-2.mb-2
      i.fe-pinterest
    a(href="#").social-btn.sb-linkedin.sb-outline.sb-round.sb-sm.mr-2.mb-2
      i.fe-linkedin
  +image("path-to-image", "Barbara Palson")(width="96").rounded-circle

Style 5

Jane Tanaka

Jane Tanaka

Lead Accountant at Company Ltd.

Sanomi Smith

Sanomi Smith

Lead Accountant at Company Ltd.

<!-- 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="font-size-ms text-muted">Lead Accountant at Company Ltd.</p>
    <ul class="font-size-sm list-unstyled mb-4">
      <li>
        <i class="fe-phone mr-2"></i>
        <a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
      </li>
      <li class="mb-0">
        <i class="fe-mail mr-2"></i>
        <a class="nav-link-style" href="mailto:ben.miller@example.com">j.tanaka@example.com</a>
      </li>
    </ul>
    <a class="social-btn sb-facebook sb-sm mr-2 mb-2" href="#">
      <i class="fe-facebook"></i>
    </a>
    <a class="social-btn sb-twitter sb-sm mr-2 mb-2" href="#">
      <i class="fe-twitter"></i>
    </a>
    <a class="social-btn sb-linkedin sb-sm mr-2 mb-2" href="#">
      <i class="fe-linkedin"></i>
    </a>
    <a class="social-btn sb-google sb-sm mr-2 mb-2" href="#">
      <i class="fe-google"></i>
    </a>
  </div>
</div>

<!-- Team Style 5: Card shadow + round picture + outline socials -->
<div class="card border-0 box-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="font-size-ms text-muted">Lead Accountant at Company Ltd.</p>
    <ul class="font-size-sm list-unstyled mb-4">
      <li>
        <i class="fe-phone mr-2"></i>
        <a class="nav-link-style" href="tel:00331697720">00 33 169 7720</a>
      </li>
      <li class="mb-0">
        <i class="fe-mail mr-2"></i>
        <a class="nav-link-style" href="mailto:ben.miller@example.com">s.smith@example.com</a>
      </li>
    </ul>
    <a class="social-btn sb-twitter sb-outline sb-sm mr-2 mb-2" href="#">
      <i class="fe-twitter"></i>
    </a>
    <a class="social-btn sb-messenger sb-outline sb-sm mr-2 mb-2" href="#">
      <i class="fe-messenger"></i>
    </a>
    <a class="social-btn sb-pinterest sb-outline sb-sm mr-2 mb-2" href="#">
      <i class="fe-pinterest"></i>
    </a>
    <a class="social-btn sb-linkedin sb-outline sb-sm mr-2 mb-2" href="#">
      <i class="fe-linkedin"></i>
    </a>
  </div>
</div>
// Team Style 5: Card border + rounded picture + solid socials
.card.text-center
  .card-body
    +image("path-to-image", "Jane Tanaka")(width="96").d-inline-block.rounded.mb-3
    h3.h6.pt-1.mb-1 Jane Tanaka
    p.font-size-ms.text-muted Lead Accountant at Company Ltd.
    ul.font-size-sm.list-unstyled.mb-4
      li
        i.fe-phone.mr-2
        a(href="tel:00331697720").nav-link-style
          | 00 33 169 7720
      li.mb-0
        i.fe-mail.mr-2
        a(href="mailto:ben.miller@example.com").nav-link-style
          | j.tanaka@example.com
    a(href="#").social-btn.sb-facebook.sb-sm.mr-2.mb-2
      i.fe-facebook
    a(href="#").social-btn.sb-twitter.sb-sm.mr-2.mb-2
      i.fe-twitter
    a(href="#").social-btn.sb-linkedin.sb-sm.mr-2.mb-2
      i.fe-linkedin
    a(href="#").social-btn.sb-google.sb-sm.mr-2.mb-2
      i.fe-google

// Team Style 5: Card shadow + round picture + outline socials
.card.border-0.box-shadow.text-center
  .card-body
    +image("path-to-image", "Sanomi Smith")(width="96").d-inline-block.rounded-circle.mb-3
    h3.h6.pt-1.mb-1 Sanomi Smith
    p.font-size-ms.text-muted Lead Accountant at Company Ltd.
    ul.font-size-sm.list-unstyled.mb-4
      li
        i.fe-phone.mr-2
        a(href="tel:00331697720").nav-link-style
          | 00 33 169 7720
      li.mb-0
        i.fe-mail.mr-2
        a(href="mailto:ben.miller@example.com").nav-link-style
          | s.smith@example.com
    a(href="#").social-btn.sb-twitter.sb-outline.sb-sm.mr-2.mb-2
      i.fe-twitter
    a(href="#").social-btn.sb-messenger.sb-outline.sb-sm.mr-2.mb-2
      i.fe-messenger
    a(href="#").social-btn.sb-pinterest.sb-outline.sb-sm.mr-2.mb-2
      i.fe-pinterest
    a(href="#").social-btn.sb-linkedin.sb-outline.sb-sm.mr-2.mb-2
      i.fe-linkedin
Top