Display your testimonials in this responsive mosaic pattern. Each card will fit into the group using the same padding of space on the left, right, top and bottom automatically.
The code is created with bootstrap so the styling is built in.
What Our Members Are Saying
"It really saves me time and effort. This membership is exactly what our business has been lacking. Absolutely wonderful! I'm good to go. "
"I wish I would have thought of it first. This membership should be nominated for service of the year. I STRONGLY recommend membership to EVERYONE interested in running a successful online business! Thank you so much for your help."
"Thank you so much for your help."
"This membership is worth much more than I paid. I didn't even need training. I don't always clop, but when I do, it's because of membership. I love your system."
"Very easy to use. I just can't get enough of this membership. I want to get a T-Shirt with this membership on it so I can show it off to everyone. This membership is worth much more than I paid."
"I couldn't have asked for more than this."
"I love this membership. Man, this thing is getting better and better as I learn more about it. I would like to personally thank you for your outstanding product."
"Really good."
"Keep up the excellent work. This membership is the most valuable business resource we have EVER purchased."
"Thank you for making it painless, pleasant and most of all hassle free! It fits our needs perfectly. I love your system."
How to Add a Mosaic Tile Your Site
- Open the edit screen for your site and click on in the WYSWIYG editor to switch off the rich text editor.
- Copy and paste the code below.
- Substitute each TESTIMONIAL TEXT with the actual text.
- Substitute each NAME with the actual name.
- Substitute each TITLE with the actual title or identifying information.
- Each testimonial 'card' include the testimonial text, name and title and is identified with a prepended matching letter.
<div class="card-columns">
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>A-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
A-NAME <cite title="Source Title">A-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>B-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
B-NAME <cite title="Source Title">B-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>C-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
C-NAME <cite title="Source Title">C-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>D-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
D-NAME <cite title="Source Title">D-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>E-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
E-NAME <cite title="Source Title">E-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>F-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
F-NAME <cite title="Source Title">F-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>G-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
G-NAME <cite title="Source Title">G-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>H-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
H-NAME <cite title="Source Title">H-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>I-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
I-NAME <cite title="Source Title">I-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>J-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
J-NAME <cite title="Source Title">J-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>K-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
K-NAME <cite title="Source Title">K-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>L-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
L-NAME <cite title="Source Title">L-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>M-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
M-NAME <cite title="Source Title">M-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>N-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
N-NAME <cite title="Source Title">N-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>O-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
O-NAME <cite title="Source Title">O-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 ">
<p>P-TESTIMONIAL TEXT</p>
<footer class="blockquote-footer">
<small class="text-muted">
P-NAME <cite title="Source Title">P-TITLE</cite>
</small>
</footer>
</blockquote>
</div>
</div>