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 team">
  <div class="card-img">
    <img src="path-to-image" alt="Image alt"/>
    <div class="card-floating-links text-end">
      <a class="btn-social bs-light me-2" href="#">
        <i class="ci-facebook"></i>
      </a>
      <a class="btn-social bs-light me-2" href="#">
        <i class="ci-instagram"></i>
      </a>
      <a class="btn-social bs-light" href="#">
        <i class="ci-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 team">
  <div class="card-img">
    <img src="path-to-image" alt="Image alt"/>
    <div class="card-floating-links text-end">
      <a class="btn-social bs-solid rounded-circle bs-light me-2" href="#">
        <i class="ci-facebook"></i>
      </a>
      <a class="btn-social bs-solid rounded-circle bs-light me-2" href="#">
        <i class="ci-instagram"></i>
      </a>
      <a class="btn-social bs-solid rounded-circle bs-light" href="#">
        <i class="ci-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 team-alt">
  <div class="card-img">
    <img src="path-to-image" alt="Image alt"/>
    <div class="card-floating-links text-center">
      <a class="btn-social bs-light text-white me-2" href="#">
        <i class="ci-facebook"></i>
      </a>
      <a class="btn-social bs-light text-white me-2" href="#">
        <i class="ci-instagram"></i>
      </a>
      <a class="btn-social bs-light text-white" href="#">
        <i class="ci-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-start">
  <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 fs-sm text-muted">Director of Client Services</p>
  <a href="#" class="btn-social me-2 mb-2">
    <i class="ci-google"></i>
  </a>
  <a href="#" class="btn-social me-2 mb-2">
    <i class="ci-twitter"></i>
  </a>
  <a href="#" class="btn-social me-2 mb-2">
    <i class="ci-linkedin"></i>
  </a>
  <a href="#" class="btn-social mb-2">
    <i class="ci-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 fs-sm text-muted">Account Director</p>
  <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
    <i class="ci-twitter"></i>
  </a>
  <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
    <i class="ci-messenger"></i>
  </a>
  <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
    <i class="ci-pinterest"></i>
  </a>
  <a href="#" class="btn-social bs-solid rounded-circle mb-2">
    <i class="ci-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="d-flex align-items-start">
  <img src="path-to-image" class="d-inline-block rounded mb-3" width="100" alt="Image alt">
  <div class="ps-3">
    <h5 class="mb-1">Johnny Lane</h5>
    <p class="mb-3 pb-1 fs-sm text-muted">Director of Client Services</p>
    <a href="#" class="btn-social me-2 mb-2">
      <i class="ci-google"></i>
    </a>
    <a href="#" class="btn-social me-2 mb-2">
      <i class="ci-twitter"></i>
    </a>
    <a href="#" class="btn-social me-2 mb-2">
      <i class="ci-linkedin"></i>
    </a>
    <a href="#" class="btn-social mb-2">
      <i class="ci-facebook"></i>
    </a>
  </div>
</div>

<!-- Team Style 3: Picture on the right + rounded circle picture + solid rounded socials -->
<div class="d-flex align-items-start text-end">
  <div class="pe-3">
    <h5 class="mb-1">Floyd Simmmons</h5>
    <p class="mb-3 pb-1 fs-sm text-muted">Account Director</p>
    <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
      <i class="ci-twitter"></i>
    </a>
    <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
      <i class="ci-messenger"></i>
    </a>
    <a href="#" class="btn-social bs-solid rounded-circle me-2 mb-2">
      <i class="ci-pinterest"></i>
    </a>
    <a href="#" class="btn-social bs-solid rounded-circle mb-2">
      <i class="ci-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 fw-normal" href="tel:00331697720">
          <i class="ci-phone me-2"></i>
          00 33 169 7720
        </a>
      </li>
      <li class="nav-dark mb-0">
        <a class="nav-link p-0 fw-normal" href="mailto:[email protected]">
          <i class="ci-mail align-middle me-2"></i>
          [email protected]
        </a>
      </li>
    </ul>
    <a class="btn-social me-2 mb-2" href="#">
      <i class="ci-facebook"></i>
    </a>
    <a class="btn-social me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social me-2 mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
    <a class="btn-social mb-2" href="#">
      <i class="ci-google"></i>
    </a>
  </div>
</div>

<!-- Team Style 4: Card shadow + round picture + outline socials -->
<div class="card border-0 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 fw-normal" href="tel:00331697720">
          <i class="ci-phone me-2"></i>
          00 33 169 7720
        </a>
      </li>
      <li class="nav-dark mb-0">
        <a class="nav-link p-0 fw-normal" href="mailto:[email protected]">
          [email protected]
          <i class="ci-mail align-middle me-2"></i>
        </a>
      </li>
    </ul>
    <a class="btn-social bs-outline me-2 mb-2" href="#">
      <i class="ci-twitter"></i>
    </a>
    <a class="btn-social bs-outline me-2 mb-2" href="#">
      <i class="ci-messenger"></i>
    </a>
    <a class="btn-social bs-outline me-2 mb-2" href="#">
      <i class="ci-pinterest"></i>
    </a>
    <a class="btn-social bs-outline mb-2" href="#">
      <i class="ci-linkedin"></i>
    </a>
  </div>
</div>
Top