Component designed to showcase team members. Comes in different styles.
Head of marketing
<!-- Team Style 1 --> <div class="card-hover text-center" style="max-width: 306px;"> <img src="assets/img/landing/creative-agency/team/02.jpg" class="d-block rounded-5 mb-4" alt="Image"> <h3 class="h5 mb-1">Alisa Black</h3> <p class="text-body-secondary mb-2">Head of marketing</p> <!-- Visible on hover on screens > 991px --> <div class="d-none d-lg-flex nav justify-content-center opacity-0"> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Instagram"> <i class="ai-instagram"></i> </a> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Facebook"> <i class="ai-facebook"></i> </a> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal" aria-label="LinkedIn"> <i class="ai-linkedin"></i> </a> </div> <!-- Always visible on screens < 992px --> <div class="d-lg-none nav justify-content-center"> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Instagram"> <i class="ai-instagram"></i> </a> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal me-1" aria-label="Facebook"> <i class="ai-facebook"></i> </a> <a href="#" class="nav-link btn btn-icon btn-sm fs-sm fw-normal" aria-label="LinkedIn"> <i class="ai-linkedin"></i> </a> </div> </div>
<!-- Team Style 2 --> <div class="card card-hover border-0 rounded-5 overflow-hidden" style="max-width: 416px;"> <img src="assets/img/landing/corporate/team/01.jpg" alt="Image"> <div class="position-absolute top-0 start-0 w-100 h-100 opacity-0"> <div class="bg-dark position-absolute top-0 start-0 w-100 h-100 opacity-50"></div> <div class="card-body d-flex flex-column justify-content-end h-100 position-relative z-2 text-center" data-bs-theme="dark"> <h3 class="h5 mb-1">Guy Hawkins</h3> <p class="text-body mb-3">Head of marketing</p> <div class="d-flex justify-content-center"> <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2" aria-label="Facebook"> <i class="ai-facebook"></i> </a> <a href="#" class="btn btn-icon btn-sm btn-light btn-x rounded-circle mx-2" aria-label="X"> <i class="ai-x"></i> </a> <a href="#" class="btn btn-icon btn-sm btn-light btn-linkedin rounded-circle mx-2" aria-label="LinkedIn"> <i class="ai-linkedin"></i> </a> </div> </div> </div> </div>
<!-- Team Style 3 --> <div class="card-hover pb-3" style="max-width: 396px;"> <div class="position-relative"> <img src="assets/img/landing/creative-agency/team/06.jpg" alt="Image"> <div class="d-flex justify-content-center position-absolute start-0 bottom-0 w-100 px-3 mb-4 opacity-0"> <a href="#" class="btn btn-icon btn-sm btn-light btn-facebook rounded-circle mx-2" aria-label="Facebook"> <i class="ai-facebook"></i> </a> <a href="#" class="btn btn-icon btn-sm btn-light btn-x rounded-circle mx-2" aria-label="X"> <i class="ai-x"></i> </a> <a href="#" class="btn btn-icon btn-sm btn-light btn-behance rounded-circle mx-2" aria-label="Behance"> <i class="ai-behance"></i> </a> </div> </div> <div class="border-bottom pt-4 pb-3"> <h3 class="h4 mb-2">Edward Jones</h3> <span class="fs-lg text-body-secondary">Branding Designer</span> </div> </div>
Chief editor
<!-- Team Style 4 --> <a href="#" class="d-block card-hover text-decoration-none" style="max-width: 416px;"> <div class="bg-secondary rounded-5 position-relative overflow-hidden"> <div class="position-absolute top-0 start-0 w-100 h-100 bg-size-cover bg-position-center opacity-0" style="background-image: url(assets/img/landing/blog/authors/hover.svg);"></div> <img src="assets/img/landing/blog/authors/01.png" class="position-relative z-2" alt="Author picture"> </div> <div class="border-bottom pt-4 pb-3"> <h3 class="h4 mb-1">Jane Cooper</h3> <p class="text-body-secondary mb-0">Chief editor</p> </div> </a>