Silicon Silicon UI Kit
 Buy now

Team

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

Silicon component

Style 1

Albert Flores

Albert Flores

Principal Consultant, Twitch

<!-- Team Style 1 -->
<div class="card card-hover border-0 bg-transparent">
  <div class="position-relative">
    <img src="assets/img/team/25.jpg" class="rounded-3" alt="Albert Flores">
    <div class="card-img-overlay d-flex flex-column align-items-center justify-content-center rounded-3">
      <span class="position-absolute top-0 start-0 w-100 h-100 bg-primary opacity-35 rounded-3"></span>
      <div class="position-relative d-flex zindex-2">
        <a href="#" class="btn btn-icon btn-secondary btn-facebook btn-sm bg-white me-2" aria-label="Facebook">
          <i class="bx bxl-facebook"></i>
        </a>
        <a href="#" class="btn btn-icon btn-secondary btn-linkedin btn-sm bg-white me-2" aria-label="LinkedIn">
          <i class="bx bxl-linkedin"></i>
        </a>
        <a href="#" class="btn btn-icon btn-secondary btn-twitter btn-sm bg-white" aria-label="Twitter">
          <i class="bx bxl-twitter"></i>
        </a>
      </div>
    </div>
  </div>
  <div class="card-body text-center p-3">
    <h3 class="fs-lg fw-semibold pt-1 mb-2">Albert Flores</h3>
    <p class="fs-sm mb-0">Principal Consultant, Twitch</p>
  </div>
</div>

Style 2: Vertical

Cameron Williamson
Cameron Williamson

Creative Director

<!-- Team Style 2: Vertical -->
<div class="card card-body card-hover bg-light border-0 text-center">
  <img src="assets/img/team/11.jpg" class="d-block rounded-circle mx-auto mb-3" width="162" alt="Cameron Williamson">
  <h5 class="fw-medium fs-lg mb-1">Cameron Williamson</h5>
  <p class="fs-sm mb-3">Creative Director</p>
  <div class="d-flex justify-content-center">
    <a href="#" class="btn btn-icon btn-outline-secondary btn-facebook btn-sm me-2" aria-label="Facebook">
      <i class="bx bxl-facebook"></i>
    </a>
    <a href="#" class="btn btn-icon btn-outline-secondary btn-dribbble btn-sm me-2" aria-label="Dribbble">
      <i class="bx bxl-dribbble"></i>
    </a>
    <a href="#" class="btn btn-icon btn-outline-secondary btn-linkedin btn-sm" aria-label="LinkedIn">
      <i class="bx bxl-linkedin"></i>
    </a>
  </div>
</div>

Style 2: Horizontal

Darrell Steward
Darrell Steward

Lead Developer

<!-- Team Style 2: Horizontal -->
<div class="card card-body d-flex flex-row align-items-center card-hover bg-light border-0">
  <img src="assets/img/team/10.jpg" class="d-block rounded-circle" width="162" alt="Darrell Steward">
  <div class="ps-4">
    <h5 class="fw-medium fs-lg mb-1">Darrell Steward</h5>
    <p class="fs-sm mb-3">Lead Developer</p>
    <div class="d-flex">
      <a href="#" class="btn btn-icon btn-outline-secondary btn-facebook btn-sm me-2" aria-label="Facebook">
        <i class="bx bxl-facebook"></i>
      </a>
      <a href="#" class="btn btn-icon btn-outline-secondary btn-stack-overflow btn-sm me-2" aria-label="Stack Overflow">
        <i class="bx bxl-stack-overflow"></i>
      </a>
      <a href="#" class="btn btn-icon btn-outline-secondary btn-github btn-sm" aria-label="GitHub">
        <i class="bx bxl-github"></i>
      </a>
    </div>
  </div>
</div>
Top