Testimonials are one of the most conversion-effective elements on any landing page — arrange several into a testimonial slider or testimonial masonry. Real user words carry more weight than any marketing copy. The design of the testimonial card determines whether the quote feels credible — a clean layout, a visible star rating, an identifiable author with a face or avatar, and appropriate typographic treatment of the quote all signal authenticity.

The decorative quote mark

.card::before { content: '"'; position: absolute; top: 16px; right: 24px; font-size: 80px; color: #e2e8f0; font-family: Georgia, serif; } places a large typographic quotation mark in the top-right corner of the card. It is purely decorative — the color: #e2e8f0 light grey makes it a background texture rather than a foreground element. The font-family: Georgia is intentional: sans-serif quotation marks are ordinary characters; a serif font's curly quote (") has the visual weight needed for this use.

The star row

Stars use Unicode ★ characters inside a color: #f59e0b amber container — for an interactive version, see the star rating. The letter-spacing: 2px adds space between stars for readability. To show a 4-star rating, remove one star character. To use SVG stars, replace the text content with inline SVG elements.

The blockquote element

The quote uses <blockquote> — semantically correct for a cited quotation. font-style: italic and line-height: 1.7 are standard typographic conventions for testimonial copy. The color: #334155 dark slate is legible but slightly softer than black.

The author row

The author section uses flexbox with gap: 12px. The avatar is a gradient circle with initials — the same pattern as the Profile Card snippet. Replace the <div class="avatar"> with <img class="avatar"> and object-fit: cover; border-radius: 50% for a real photo. The .info div stacks the name and role vertically with display: block on the <strong>.

The blockquote and cite pattern

The testimonial uses semantic HTML5 elements: <blockquote> for the quote text and <cite> inside <figure> or <footer> for the attribution. Search engines and screen readers understand this markup — Google's rich result documentation recognises blockquote and cite for testimonial content. The quote marks are added via CSS ::before on blockquote using content: '"' rather than HTML entity characters.

The star rating display

The five stars use the ★ Unicode character in a .stars span with letter-spacing and amber colour. CSS ensures all five stars are always shown but at different opacities: filled stars at full opacity, empty stars at 20% opacity. Compute filled vs empty from a rating value: for (let i=0; i<5; i++) stars += (i < rating ? '★' : '☆').

The avatar and author row

The author section uses display: flex; align-items: center; gap: 12px. The avatar is a 44px circle with the person's initials or a real photo. The name and title sit in a flex column at font-size: 14px and 12px respectively. This compact layout fits neatly inside a card footer without taking space away from the quote.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to puzzle out the decorative quote mark on your own. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the giant quotation mark is implemented as a positioned ::before pseudo-element in a serif font rather than an inline character in the markup, and why the star row uses plain Unicode characters instead of SVG or an icon font. The same assistant can help optimize it — for instance whether the fixed 80px pseudo-element quote mark scales awkwardly at very small or very large card widths, or whether a fractional star rating (like 4.5) needs a different technique than simply removing a character. It's also useful for extending the card: ask it to turn it into a reusable component that accepts a rating number and renders filled versus empty stars automatically, add a real photo avatar with a graceful initials fallback, or build a responsive grid of many of these cards. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build a "testimonial card" in plain HTML and CSS with no JavaScript, using a decorative pseudo-element quote mark and semantic markup.

Requirements:
- A single card element containing, in order: a row of star-rating characters, a semantically correct blockquote element holding the quote text, and an author section with an avatar, name, and role/company line.
- A large decorative quotation mark rendered via a ::before pseudo-element on the card (not as literal text in the HTML), absolutely positioned in a corner of the card, sized much larger than the body text, colored as a faint background tint rather than a foreground element, and set in a serif font family specifically because serif curly quotation marks carry more visual weight than a sans-serif quote character.
- The star rating must use plain Unicode star characters in a single span with letter-spacing for visual separation, styled in an accent color, structured so that showing a 4-star rating instead of 5 is just a matter of removing one character (or reducing opacity on a trailing star) without restructuring the markup.
- The avatar must be a circular element showing the author's initials on a CSS gradient background, structured so it can be swapped for a real photo element with object-fit cover and no other layout changes.
- The card must use box-shadow and a subtle border for depth, and the blockquote text must be styled in italic with generous line-height for readability, with the whole layout capped at a maximum width so it reads well as a single card or as one tile in a responsive grid of many such cards.

Step by step

How to Use

1
Load the snippetClick "Testimonial Card" in the sidebar. The preview shows the card with stars, quote, decorative mark, and author row.
2
Update the quote textIn the HTML panel, replace the blockquote text with your customer testimonial. Keep the <blockquote> element for semantic correctness.
3
Update the author detailsChange the .avatar initials, .info strong (name), and .info span (role or company) in the HTML panel.
4
Adjust the star countIn the HTML panel, add or remove ★ characters inside .stars to show 1–5 stars.
5
Replace initials with a photoReplace <div class="avatar">XY</div> with <img class="avatar" src="photo.jpg" alt="Name" />. Add object-fit: cover; border-radius: 50% in the CSS.
6
Export in your formatClick "HTML" for a standalone file, "JSX" for a React component, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Landing page social proof sections

Place 2–3 testimonial cards in a grid or carousel on a landing page. Real customer quotes with names and roles build trust faster than any marketing copy.

Product and SaaS review showcases

Display hand-picked reviews from G2, Trustpilot, or Capterra on your product page. The star rating and company attribution signal third-party credibility.

Agency and freelancer case study quotes

Include a client quote on each case study page. The card format gives the quote visual presence without a full-width pull quote that breaks the reading flow.

Checkout and pricing page trust signals

Place a testimonial card near the CTA button on a pricing or checkout page. A relevant customer quote at the decision point reduces checkout abandonment.

Learn ::before decorative typography

The large quote mark uses content: open-quote on a positioned pseudo-element. Edit the font-size, colour, and position in the CSS panel to understand decorative pseudo-element placement.

Build a testimonial carousel or grid

Use this card as the base component for a testimonial carousel or responsive grid. The fixed max-width and self-contained layout make it easy to duplicate and map over a data array.

Got questions?

Frequently Asked Questions

.card::before uses content: "\201C" (or the curly quote character directly), position: absolute, top and right placement, font-size: 80px, and color: #e2e8f0. Georgia serif is used because its curly quotes have the proper typographic weight. The light color makes it background-like rather than competing with the quote text.

Remove one ★ character from the .stars span in the HTML. The remaining stars inherit the amber color automatically. For a more precise rating like 4.5 stars, use a half-star SVG or a fractional width clip on the fifth star.

Replace the <div class="avatar">XY</div> with <img class="avatar" src="your-photo.jpg" alt="Author name" />. In the CSS panel, add object-fit: cover to the .avatar rule and remove the background and color declarations. The border-radius: 50% and dimensions keep the circular shape.

Wrap multiple .card elements in a CSS Grid container: display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px. Each card will sit in its own column and the grid reflows automatically to fewer columns on narrower screens.

Yes. <blockquote> is the semantically correct element for quoted content from an external source. Screen readers may announce it differently from paragraph text, and it can be targeted by search engines looking for citation-style content. Add a <cite> element inside for the author attribution.

Yes. Click "JSX" to download a React component. Convert the card into a reusable Testimonial component with props for stars, quote, name, role, and initials. Map over a testimonials array to render multiple cards in a grid or carousel.

Loading…