Team Components in Metis library

<section class="section">
  <div class="container">
    <div class="columns is-centered">
      <div class="column is-3-desktop">
        <span class="tag is-info is-rounded">Our Team</span>
        <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="subtitle">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="column is-6-desktop is-offset-1">
        <div class="p-3 columns is-multiline is-mobile">
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Anne Bailey</h3>
            <p class="subtitle">CEO</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Julie Brown</h3>
            <p class="subtitle">Head of Development</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Tom Jones</h3>
            <p class="subtitle">Head of Operations</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1569124589354-615739ae007b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Anne Smith</h3>
            <p class="subtitle">Director, Product Development</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Julie Brown</h3>
            <p class="subtitle">Head of Development</p>
          </div>
          <div class="p-5 column is-6">
            <figure class="mb-4 is-64x64">
              <img class="is-rounded is-fullwidth is-fullheight is-object-cover" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            </figure>
            <h3 class="title is-size-5">Ian Bailey</h3>
            <p class="subtitle">Director, Product Development</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-lg-6 pe-lg-5 mb-5 mb-lg-0">
        <span class="badge bg-primary rounded-pill">Our Team</span>
        <h2 class="my-3 fs-1 fw-bold">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-muted lh-lg mb-0">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="col-12 col-lg-6 pl-lg-5">
        <div class="row">
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Anne Bailey</h4>
            <p class="text-muted">CEO</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Julie Brown</h4>
            <p class="text-muted">Head of Development</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Tom Jones</h4>
            <p class="text-muted">Head of Operations</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1569124589354-615739ae007b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Anne Smith</h4>
            <p class="text-muted">Director, Product Development</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Julie Brown</h4>
            <p class="text-muted">Head of Development</p>
          </div>
          <div class="col-6 px-4 py-2">
            <img class="mb-3 rounded-circle" style="object-fit: cover;" width="75" height="75" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <h4 class="mb-1">Ian Bailey</h4>
            <p class="text-muted">Director, Product Development</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-col md:flex-row justify-around">
      <div class="max-w-md md:mr-10 mb-10 md:mb-0">
        <span class="inline-block py-1 px-3 text-xs font-semibold bg-blue-100 text-blue-600 rounded-xl">Our Team</span>
        <h2 class="text-3xl md:text-4xl mt-2 mb-4 font-bold font-heading">Lorem ipsum dolor sit amet consectetur adipisicing</h2>
        <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis quisquam cum aliquam rem.</p>
      </div>
      <div class="flex flex-wrap">
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Anne Bailey</p>
          <p class="text-sm text-blueGray-400">CEO</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Julie Brown</p>
          <p class="text-blueGray-400">Head of Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1556474835-b0f3ac40d4d1?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Tom Jones</p>
          <p class="text-blueGray-400">Head of Operations</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1569124589354-615739ae007b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Anne Smith</p>
          <p class="text-blueGray-400">Director, Product Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Julie Brown</p>
          <p class="text-blueGray-400">Head of Development</p>
        </div>
        <div class="w-1/2 p-5">
          <img class="h-20 w-20 rounded-full object-cover object-top" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
          <p class="mt-6 mb-2 text-xl">Ian Bailey</p>
          <p class="text-blueGray-400">Director, Product Development</p>
        </div>
      </div>
    </div>
  </div>
</section>