Testimonial Cards
Three customer testimonial cards with star ratings, quotes and avatar initials. Simple social proof that works on any landing page.
The code
Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="testimonials">
<h2>Loved by developers</h2>
<div class="grid">
<figure class="quote">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>We replaced three tools with this one. Onboarding took an afternoon.</blockquote>
<figcaption><span class="avatar">AS</span><div><strong>Ananya Sharma</strong><small>CTO, Finlite</small></div></figcaption>
</figure>
<figure class="quote">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>The best developer experience I have had in years. Support replies in minutes.</blockquote>
<figcaption><span class="avatar">RK</span><div><strong>Rohit Kumar</strong><small>Lead Engineer, Shopwave</small></div></figcaption>
</figure>
<figure class="quote">
<div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
<blockquote>Our release cycle went from monthly to weekly. The team is happier too.</blockquote>
<figcaption><span class="avatar">MP</span><div><strong>Meera Patel</strong><small>Product Manager, Carely</small></div></figcaption>
</figure>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Build a responsive testimonials section in plain HTML and CSS. Content: - Centred heading "Loved by developers". - Three testimonial cards. Each has five orange stars, a one-or-two sentence quote, and an author row with a circular avatar showing the person's initials, their name in bold and their role and company in small grey text. Use Indian names. Markup and accessibility: - Use <figure>, <blockquote> and <figcaption> for each testimonial. - Give the star row an aria-label such as "5 out of 5 stars". Styling: - Section background #f7f7f7, padding 88px 6vw. - Grid: repeat(auto-fit, minmax(280px, 1fr)) with 24px gap, max-width 1100px - so it needs no media queries. - Cards: white, 28px padding, 16px radius, 1px #e8e9f0 border, flex column so the author row sits at the bottom (margin-top: auto). - Avatar: 44px navy circle with white initials. Return one HTML file with a <style> block.
How to build it, step by step
- 1
Use semantic markup: figure for the testimonial, blockquote for the words, figcaption for the author.
- 2
Create a responsive grid with repeat(auto-fit, minmax(280px, 1fr)). Cards wrap to fewer columns automatically as space shrinks.
- 3
Make each card a flex column and give the author row margin-top: auto so authors line up at the bottom even when quotes differ in length.
- 4
Draw the avatar as a circle with centred initials, which avoids needing photos.
- 5
Add an aria-label to the star row so screen readers announce the rating instead of reading five star characters.
Customisation tips
- Use real photos with img and border-radius: 50% when you have permission to show them.
- Only publish testimonials you can back up; link to the original review where possible.
- Add a company logo row above the cards for extra credibility.