Testimonials Components in Metis library

Testimonials from Metis

<section class="section" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-repeat: no-repeat; background-size: cover;">
  <div class="container">
    <div class="is-max-w-md mx-auto mb-6 has-text-centered">
      <img src="metis-assets/icons/quote.svg" alt="">
      <h2 class="mt-4 title is-spaced">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">John Bailey</h3>
              <p class="subtitle has-text-info">CEO</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">Julie Bailey</h3>
              <p class="subtitle has-text-info">Head of Development</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div>
              <h3 class="title is-size-5">Julie Bailey</h3>
              <p class="subtitle has-text-info">Head of Operations</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">Tom Brown</h3>
              <p class="subtitle has-text-info">Head of Development</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">Tom Brown</h3>
              <p class="subtitle has-text-info">Head of Development</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">Julie Bailey</h3>
              <p class="subtitle has-text-info">Head of Development</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="columns is-centered is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded 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="">
            <div>
              <h3 class="title is-size-5">Tom Brown</h3>
              <p class="subtitle has-text-info">Head of Development</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="box">
          <div class="mb-4 is-flex is-align-items-center">
            <img class="mr-3 image is-64x64 is-rounded is-object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div>
              <h3 class="title is-size-5">Julie Bailey</h3>
              <p class="subtitle has-text-info">Head of Operations</p>
            </div>
          </div>
          <p class="subtitle">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="py-5 has-text-centered"><a class="button is-primary" href="#">Show more Testimonials</a></div>
  </div>
</section>

Testimonials from Metis

Bootstrap

Metis

<section class="py-5" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <div class="row mb-4">
      <div class="col-12 col-md-10 col-lg-9 mx-auto">
        <div class="row mb-5 text-center">
          <div class="col-12 col-lg-6 mx-auto">
            <img class="img-fluid" src="metis-assets/icons/quote.svg" alt="">
            <p class="fs-1 fw-bold">Lorem ipsum dolor sit amet consectutar domor</p>
            <p class="lh-lg text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white shadow-sm rounded">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-3">
                  <h5 class="mb-1">John Bailey</h5>
                  <p class="text-primary">CEO</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white shadow-sm rounded">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-3">
                  <h5 class="mb-1">Julie Bailey</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white shadow-sm rounded">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: cover;" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
                <div class="ms-3">
                  <h5 class="mb-1">Julie Bailey</h5>
                  <p class="text-primary">Head of Operations</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white shadow-sm rounded">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-3">
                  <h5 class="mb-1">Tom Brown</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white rounded shadow-sm">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-3">
                  <h5 class="mb-1">Tom Brown</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white rounded shadow-sm">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-4">
                  <h5 class="mb-1">Julie Bailey</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white rounded shadow-sm">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-4">
                  <h5 class="mb-1">Tom Brown</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
          <div class="col-12 col-lg-6 mb-4">
            <div class="p-4 bg-white rounded shadow-sm">
              <div class="d-flex">
                <img class="rounded-circle" style="height: 50px; width: 50px; object-fit: 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="">
                <div class="ms-3">
                  <h5 class="mb-1">Tom Brown</h5>
                  <p class="text-primary">Head of Development</p>
                </div>
              </div>
              <p class="text-muted lh-lg">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="text-center"><a class="btn btn-primary" href="#">Show more Testimonials</a></div>
  </div>
</section>

Testimonials from Metis

Tailwind CSS

Metis

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <img class="mx-auto" src="metis-assets/icons/quote.svg" alt="">
      <h2 class="my-2 text-3xl md:text-4xl font-bold font-heading">Lorem ipsum dolor sit amet consectutar domor</h2>
      <p class="text-blueGray-400 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed luctus eget justo et iaculis.</p>
    </div>
    <div class="flex flex-wrap max-w-5xl mx-auto mb-6">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">John Bailey</p>
              <p class="text-blue-600">CEO</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full 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="">
            <div class="pl-4">
              <p class="text-xl">Tom Brown</p>
              <p class="text-blue-600">Head of Development</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 px-3 mb-6 hidden" :class="{ 'hidden': !showContent }">
        <div class="p-8 bg-white shadow rounded">
          <div class="flex items-center mb-4">
            <img class="h-16 w-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60" alt="">
            <div class="pl-4">
              <p class="text-xl">Julie Bailey</p>
              <p class="text-blue-600">Head of Operations</p>
            </div>
          </div>
          <p class="leading-loose text-blueGray-400">Donec consequat tortor risus, at auctor felis consequat. Donec quis dolor sem. Sed sollicitudin magna in hendrerit pulvinar. Vestibulum non quam velit.</p>
        </div>
      </div>
    </div>
    <div class="text-center"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block py-4 px-8 text-xs text-white font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Show more Testimonials</a></div>
  </div>
</section>

Testimonials Components by Shuffle

Choose from 12 variations of Testimonials UI components. Presented here are variants available in Metis library.

You will also find many other types of components in Shuffle Editor that will be in the same style. Each library has been designed by a professional designer and coded by our team of developers.

Get access to all Testimonials UI components, code and our visual editor. Try the demo for free!

Try for Free →

Redirecting to PayPal

Supporting tools

Plans

Testimonials Components in Metis library

Framework

UI Library

Components

Testimonials from Metis

Testimonials from Metis

Testimonials from Metis

Testimonials Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Why the Lifetime License price is changing

New in your Lifetime License

AI Agent

Multi-AI Designer

Make it yours with AI

Sign in to create with AI

Add images & videos

How it works

Products

UI Components

Extensions

Support

Company

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Testimonials Components in Metis library

Framework

UI Library

Components

Testimonials from Metis

Testimonials from Metis

Testimonials from Metis

Testimonials Components by Shuffle

The easiest way to create beautiful websites

How many people?

monthly

annual

lifetime

Create an account

From idea to live website in minutes.

Products

UI Components

Extensions

Support

Company