Testimonials

  • Updated:
  • HTML

Example

One of the best shows I have seen in years. 100% authentic and powerful rock.

You have to see this band in concert to fully appreciate their greatness. Probably one of the best live bands of their generation.

Raw. Energetic. Captivating. The Grunge know how to put on a show. Go see them.

HTML

Copy 👋<div class="testimonial"> <!--wrapper class -->

<blockquote>
<p>Testimonial goes here.</p>
<footer>
<img src="/headshot-2.webp" alt=""  width="80" height="80">
A Name  - <a href="/">A Company</a>
</footer>
</blockquote>

<blockquote>
<p>Testimonial goes here.</p>
<footer>
<img src="/headshot-1.webp" alt="" width="80" height="80">
A Name - <a href="/">A Company</a>
</footer>
</blockquote>

<blockquote>
<p>Testimonial goes here.</p>
<footer>
<img src="/headshot-3.webp" alt=""  width="80" height="80">
A Name  - <a href="/">A Company</a>
</footer>
</blockquote>
</div> <!--wrapper end -->

<!-- if below the "fold add "loading="lazy" to the images-->
Copy 👋.testimonials blockquote {
  padding: var(--space-2xl); 
  background-color: var(--text);
  color: var(--text-alt);
  margin:var(--space-xs);   
 }

 .testimonials blockquote p {
 font-style: italic;
 text-wrap: pretty; 
 margin-block-end:var(--space-xs);
 }

 .testimonials blockquote a{
  color: var(--text-alt);
 }

  .testimonials footer { 
  margin: var(--space-m) 0 0 0;
  font-size: var(--step--1);
  justify-items: center; 
  text-align: center;
 }

 .testimonials footer img {
 border-radius: 40rem;
 width: 80px;
 }

/* Using CSS generated content with a blank CSS alt(/'' )
so that screen reader ignore this  */
 .testimonials  blockquote footer::after{
   content: '☆ ☆ ☆ ☆ ☆'/ '';
   display: block;  
 }

/* Add a 3 column grid with subgrid for larger devices */
 @media (width > 65rem) {  
.testimonials  {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 }

.testimonials blockquote {
 padding: var(--space-l);
 display: grid;
 grid-template-columns: subgrid;
 grid-template-rows: subgrid;
 grid-row: 1 / 3;        
 } 
 }

Note: if adding our own title to the testimonial we would make the article element the wrapper. 

Copy 👋<article>
<h3>Review Title</h3>
<blockquote>
<p>The review content...</p>
<footer> — Reviewer Name</footer>
</blockquote>
</article>