Teams - All Examples

Discover 9 Teams examples available in Loopple

Teams 2

Teams 3

Teams 4

Teams 5

Team Section With Images And Social Links

Team Section With Profile Cards

Teams 1

<section class="py-5 draggable">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <h4 class="text-gradient text-primary">Join our awesome team</h4>
      </div>
    </div>
    <div class="row mt-lg-5 mt-4">
      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-7">
              <h5 class="mb-2">Michael Frisen</h5>
              <span class="badge badge-sm rounded-pill mb-3 text-dark">PHP Developer</span>
              <br/>
              <button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
                <i class="fab fa-twitter text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-slack btn-simple px-2 mb-0">
                <i class="fab fa-slack text-lg"></i>
              </button>
            </div>
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-7">
              <h5 class="mb-2">Laurent Shaun</h5>
              <span class="badge badge-sm rounded-pill mb-3 text-dark">Laravel Senior</span>
              <br/>
              <button type="button" class="btn btn-facebook btn-simple px-2 mb-0">
                <i class="fab fa-facebook-f text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-slack btn-simple px-2 mb-0">
                <i class="fab fa-slack text-lg"></i>
              </button>
            </div>
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-3.jpg">
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card card-body">
          <div class="row">
            <div class="col-lg-7">
              <h5 class="mb-2">Ramon Siente</h5>
              <span class="badge badge-sm rounded-pill mb-3 text-dark">Vue.js Specialist</span>
              <br/>
              <button type="button" class="btn btn-twitter btn-simple px-2 mb-0">
                <i class="fab fa-twitter text-lg"></i>
              </button>
              <button type="button" class="btn btn-dribbble btn-simple px-2 mb-0">
                <i class="fab fa-dribbble text-lg"></i>
              </button>
              <button type="button" class="btn btn-github btn-simple px-2 mb-0">
                <i class="fab fa-github text-lg"></i>
              </button>
            </div>
            <div class="col-lg-5 text-end my-auto">
              <img class="avatar avatar-xxl" src="https://demos.creative-tim.com/soft-ui-design-system-pro/assets/img/team-2.jpg">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Team Section With Images

<div class="w-full draggable">
    <div class="container flex flex-col mx-auto my-20 gap-14">
      <div class="w-full text-center md:text-start">
        <h2 class="mb-6 text-4xl font-extrabold leading-tight md:text-5xl text-dark-grey-900">Meet the Exceptional Team</h2>
        <p class="text-lg font-normal md:w-7/12 text-dark-grey-500">
          Our dedicated professionals bring unparalleled expertise and commitment to every endeavor. We believe in the art of innovation, and our passion propels us forward. Experience the excellence that sets us apart.
        </p>
      </div>
      <div class="grid w-full grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-4">
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-1.jpeg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Olivia Baker</p>
            <p class="text-lg font-bold text-purple-blue-500">Director of Finance</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Olivia is our financial wizard, meticulously managing our finances, investments, and budgets.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-2.jpeg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Andrew Foster</p>
            <p class="text-lg font-bold text-purple-blue-500">Senior Product Manager</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Andrew oversees our product development, turning ideas into market-ready solutions.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-3.jpeg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Jessica Lee</p>
            <p class="text-lg font-bold text-purple-blue-500">Customer Relations Manager</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Jessica is our customer champion, ensuring every client interaction is a positive one.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-4.jpeg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Richard Ward</p>
            <p class="text-lg font-bold text-purple-blue-500">Creative Design Lead</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Richard is our creative genius, transforming ideas into captivating visuals.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-6.jpg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Michael Chang</p>
            <p class="text-lg font-bold text-purple-blue-500">Head of Operations</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Michael is the mastermind behind our efficient operations. He ensures our processes run like a well-oiled machine.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-9.jpg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Sarah Mitchell</p>
            <p class="text-lg font-bold text-purple-blue-500">Chief Marketing Officer (CMO)</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Sarah is the creative force behind our brand. Her marketing prowess and strategic thinking drive business growth.</p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-14.jpg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">David Rodriguez</p>
            <p class="text-lg font-bold text-purple-blue-500">Chief Technology Officer (CTO)</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">David is our tech guru, spearheading innovation and ensuring our products are cutting-edge. </p>
          </div>
        </div>
        <div class="flex flex-col items-start gap-4">
          <div class="w-20 h-20 rounded-full bg-cover bg-center" style="background-image: url('https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/motion-tailwind/img/avatars/avatar-11.jpg')"></div>
          <div class="flex flex-col items-start">
            <p class="text-xl font-extrabold leading-normal text-dark-grey-900">Emily Clarke</p>
            <p class="text-lg font-bold text-purple-blue-500">Chief Executive Officer (CEO)</p>
          </div>
          <div>
            <p class="text-base font-medium leading-8 text-dark-grey-500">Emily leads our company with a visionary zeal, setting the strategic direction and inspiring our team to achieve greatness.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Team Section With Large Images