Team - Blocks

Team box Square

Robert Vincent
Founder
Brenda Johnson
Marketer
Rodney Scott
Developer
Michelle White
Designer 

<div class="row g-3 gy-4 team-wrapper">
  <!-- Team box 1 -->
  <div class="col-12 col-sm-6 col-lg-3 team-box">
    <div class="team-img">
      <img src="../assets/images/img.jpg" alt="">
      <ul>
        <li><a href="#"><i class="bi bi-facebook"></i></a></li>
        <li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
        <li><a href="#"><i class="bi bi-pinterest"></i></a></li>
      </ul>
    </div>
    <div class="mb-2">
      <h6 class="fw-medium m-0">Robert Vincent</h6>
      <span>Founder</span>
    </div>
  </div>
  <!-- Team box 2 -->
  ...
</div><!-- end row -->

Team box Square - Hover Style 2

Violet Walker
Founder
Nicolas Hopkins
Marketer
Jamie Mills
Developer
Winston Frank
Designer 

<div class="row g-3 gy-4 team-wrapper team-box-hover-2">
  <!-- Team box 1 -->
  <div class="col-12 col-sm-6 col-lg-3 team-box">
    <div class="team-img">
      <img src="../assets/images/img-src.jpg" alt=""><!-- image source -->
      <!-- social links -->
      <div>
        <ul>
          <li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
          <li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
          <li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
        </ul>
      </div>
    </div>
    <div class="mb-2">
      <h6 class="fw-medium m-0">Winston Frank</h6>
      <span>Designer</span>
    </div>	
  </div>
  <!-- Team box 2 -->
  ...
</div><!-- end row-->

Team box Square - Custom style

Robert Vincent
Founder
Brenda Johnson
Manager
Rodney Scott
Marketer
Michelle White
Designer 

<div class="row g-3">
  <!-- Team box 1 -->
  <div class="col-12 col-md-6 col-lg-3">
    <div class="hoverbox-7">
      <img src="../assets/images/image-url.jpg" alt="">
      <div class="hover-content text-center">
        <div class="top">
          <ul class="list-inline-sm">
            <li>
              <a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-facebook"></i></a>
            </li>
            <li>
              <a class="button-circle button-circle-sm button-circle-white" href="#"><i class="bi bi-twitter-x"></i></a>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <h6 class="fw-medium m-0">Michelle White</h6>
          <span>Designer</span>
        </div>
      </div><!-- end hover-content -->
    </div><!-- end hoverbox-7 -->
  </div>
  <!-- Team box 2 -->
  ...
</div><!-- end row-->

Team box Circle - Layout 1

Robert Vincent
Founder

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Brenda Johnson
Manager

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Rodney Scott
Marketer

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.


<div class="row g-4">
  <!-- Team box 1 -->
  <div class="col-12 col-md-6 col-lg-4">
    <div class="border border-radius p-4">
      <img class="img-mask-avatar-md" src="../assets/images/team-1.jpg" alt="">
      <div class="mt-4">
        <h5 class="fw-medium m-0 line-height-140">Robert Vincent</h5>
        <span class="font-small fw-normal">Founder</span>
        <p class="mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
      </div>
      <ul class="list-inline mt-3">
        <li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
        <li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
        <li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
      </ul>
    </div>
  </div>
  <!-- Team box 2 -->
  <div class="col-12 col-md-6 col-lg-4">
    ...
  </div>
  <!-- Team box 3 -->
  <div class="col-12 col-md-6 col-lg-4">
    ...
  </div>
</div><!-- end row -->

Team box Circle - Layout 2

Robert Vincent
Founder
Brenda Johnson
Marketer
Rodney Scott
Developer 

<div class="row g-4">
  <!-- Team box 1 -->
  <div class="col-12 col-md-6 col-lg-4">
    <div class="d-flex align-items-center">
      <div class="d-inline-block me-3">
        <img class="img-mask-avatar-lg" src="../assets/images/team-1.jpg" alt="">
      </div><!-- end d-inline-block -->
      <div class="d-inline-block">
        <h6 class="fw-medium m-0 line-height-140">Robert Vincent</h6>
        <span>Founder</span>
        <ul class="list-inline mt-2">
          <li><a class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
          <li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
          <li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
        </ul>
      </div><!-- end d-inline-block -->
    </div><!-- end d-flex -->
  </div>
  <!-- Team box 2 -->
  <div class="col-12 col-md-6 col-lg-4">
    ...
  </div>
  <!-- Team box 3 -->
  <div class="col-12 col-md-6 col-lg-4">
    ...
  </div>
</div><!-- end row -->