Components
Testimonials
Customer quotes, as a grid or a carousel.
Live demo
See it in action
UnysonPlus replaced three paid plugins for us. The page builder is fast and the elements are genuinely flexible.
We migrated a client site from the original Unyson in an afternoon. Everything just worked — and it is free.
The clean markup is what sold me — no wrapper bloat, real semantic HTML, and the demos prove it.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<div class="testimonials ts-dc778d9f design-default">
<div class="fw-container">
<div class="fw-row fw-row-cols-3">
<div class="fw-col mb-4 d-flex">
<div class="testimonial-item testimonial-item--slotted">
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="ts-card__rating">
<span class="testimonial-rating" role="img" aria-label="Rated 5.0 out of 5"><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg></span>
</div>
</div>
<div class="ts-card__row ts-card-row--stack ts-card-j-start ts-card-a-center">
<blockquote class="testimonial-quote mb-3"><p class="mb-0">UnysonPlus replaced three paid plugins for us. The page builder is fast and the elements are genuinely flexible.</p></blockquote>
</div>
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="testimonial-avatar text-center flex-shrink-0 mx-auto mb-3">
<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-100163e815fa.jpg" alt="Sarah Lin" class="img-fluid rounded-circle avatar-md" style="width:96px;height:96px;object-fit:cover;" />
</div>
<div class="ts-card__author">
<div class="testimonial-author fw-semibold">
Sarah Lin
</div>
<div class="testimonial-meta small text-muted">
<span class="testimonial-job">Freelance Designer</span>
</div>
</div>
</div>
</div>
</div>
<div class="fw-col mb-4 d-flex">
<div class="testimonial-item testimonial-item--slotted">
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="ts-card__rating">
<span class="testimonial-rating" role="img" aria-label="Rated 5.0 out of 5"><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg></span>
</div>
</div>
<div class="ts-card__row ts-card-row--stack ts-card-j-start ts-card-a-center">
<blockquote class="testimonial-quote mb-3"><p class="mb-0">We migrated a client site from the original Unyson in an afternoon. Everything just worked — and it is free.</p></blockquote>
</div>
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="testimonial-avatar text-center flex-shrink-0 mx-auto mb-3">
<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-77c5d5fd2ee0.jpg" alt="David Okafor" class="img-fluid rounded-circle avatar-md" style="width:96px;height:96px;object-fit:cover;" />
</div>
<div class="ts-card__author">
<div class="testimonial-author fw-semibold">
David Okafor
</div>
<div class="testimonial-meta small text-muted">
<span class="testimonial-job">Agency Owner</span>
</div>
</div>
</div>
</div>
</div>
<div class="fw-col mb-4 d-flex">
<div class="testimonial-item testimonial-item--slotted">
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="ts-card__rating">
<span class="testimonial-rating" role="img" aria-label="Rated 4.5 out of 5"><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--full" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="currentColor"/></svg><svg class="ts-star ts-star--half" viewBox="0 0 24 24" width="1em" height="1em" aria-hidden="true" focusable="false"><defs><linearGradient id="ts-star-h1"><stop offset="50%" stop-color="currentColor" stop-opacity="1"/><stop offset="50%" stop-color="currentColor" stop-opacity="0"/></linearGradient></defs><path d="M12 .587l3.668 7.431 8.2 1.192-5.934 5.784 1.401 8.169L12 18.896l-7.335 3.867 1.401-8.169L.132 9.21l8.2-1.192z" fill="url(#ts-star-h1)" stroke="currentColor" stroke-width="1"/></svg></span>
</div>
</div>
<div class="ts-card__row ts-card-row--stack ts-card-j-start ts-card-a-center">
<blockquote class="testimonial-quote mb-3"><p class="mb-0">The clean markup is what sold me — no wrapper bloat, real semantic HTML, and the demos prove it.</p></blockquote>
</div>
<div class="ts-card__row ts-card-row--inline ts-card-j-center ts-card-a-center">
<div class="testimonial-avatar text-center flex-shrink-0 mx-auto mb-3">
<img src="https://demos.unysonplus.com/wp-content/uploads/2026/06/demo-91e20819a7da.jpg" alt="Emma Brandt" class="img-fluid rounded-circle avatar-md" style="width:96px;height:96px;object-fit:cover;" />
</div>
<div class="ts-card__author">
<div class="testimonial-author fw-semibold">
Emma Brandt
</div>
<div class="testimonial-meta small text-muted">
<span class="testimonial-job">Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Testimonials shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.