Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Team

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

Silicon component

## Style 1

### 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">
              <i class="bx bxl-facebook"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary btn-linkedin btn-sm bg-white me-2">
              <i class="bx bxl-linkedin"></i>
            </a>
            <a href="#" class="btn btn-icon btn-secondary btn-twitter btn-sm bg-white">
              <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

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">
          <i class="bx bxl-facebook"></i>
        </a>
        <a href="#" class="btn btn-icon btn-outline-secondary btn-dribbble btn-sm me-2">
          <i class="bx bxl-dribbble"></i>
        </a>
        <a href="#" class="btn btn-icon btn-outline-secondary btn-linkedin btn-sm">
          <i class="bx bxl-linkedin"></i>
        </a>
      </div>
    </div>

## Style 2: Horizontal

##### 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">
            <i class="bx bxl-facebook"></i>
          </a>
          <a href="#" class="btn btn-icon btn-outline-secondary btn-stack-overflow btn-sm me-2">
            <i class="bx bxl-stack-overflow"></i>
          </a>
          <a href="#" class="btn btn-icon btn-outline-secondary btn-github btn-sm">
            <i class="bx bxl-github"></i>
          </a>
        </div>
      </div>
    </div>

Top