Team

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

Createx component

Style 1

Jane Cooper
Jane Cooper

Digital Marketing Manager

Shawn Edwards
Shawn Edwards

Co-founder and Creative Director

Serenity Edwards
Serenity Edwards

Director of Marketing

<!-- 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

Johnny Lane
Johnny Lane

Director of Client Services

Floyd Simmmons
Floyd Simmmons

Account Director

<!-- 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

Johnny Lane
Johnny Lane

Director of Client Services

Floyd Simmmons

Account Director

Floyd Simmmons
<!-- 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

Johnny Lane
Johnny Lane

Lead Accountant at Company Ltd.

Floyd Simmmons
Floyd Simmmons

Account Director

<!-- 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>
Top