Testimonials & Social Proof
Star-rated quote cards, scrolling logo bars, and featured pull-quote sections — HTML/CSS patterns that Claude deploys in a single conversation. Your reviews, your server, no third-party widgets.
Code Patterns
Social proof patterns
Three field-tested patterns for displaying testimonials and client trust signals. Each includes the full HTML structure and a copy-ready Claude prompt you can adapt to your brand.
Pattern 1 — Star-Rated Quote Cards
A 3-column CSS Grid of testimonial cards — each with a 5-star rating, quote, avatar, name, role, and company. Hover lifts each card with a subtle shadow. Works on home pages, landing pages, and dedicated testimonials pages.
- 3-column grid collapsing to 2 at 900px and 1 at 640px
- Star rating: 5 CSS ★ characters coloured via
color: var(--primary) - Card hover:
translateY(-4px)lift + deepened box-shadow — no JS required - Avatar: 48px circular
<img>or initials fallback with branded background colour - Attribution row: name in bold, role and company in muted smaller text
- Configurable card count — add or remove cards by duplicating the HTML block
Add a testimonials section to my [page] with 3 star-rated quote cards in a CSS Grid. Card 1: 5 stars, quote “[your quote 1]”, name “[Name]”, role “[Role]”, company “[Company]”. Card 2: [repeat]. Card 3: [repeat]. Avatars from /assets/images/[name].jpg or show initials with a branded background if no image. Cards lift on hover with a box shadow. 3-column grid, 2 at 900px, 1 at 640px. CSS in theme.css.
Pattern 2 — Scrolling Logo Bar
A horizontal strip of client or partner logos that scrolls infinitely using CSS animation alone. Logos are greyscale by default and shift to full colour on hover. A “Trusted by” heading anchors the section visually.
- Infinite horizontal scroll via CSS
@keyframes+ duplicated logo list for seamless looping - All logos rendered at consistent 40px height with
object-fit: contain - Default state:
filter: grayscale(1) opacity(0.55)on all logos - Hover: individual logo transitions to full colour,
opacity: 1 - Scroll animation pauses on hover via CSS
animation-play-state: paused @media (prefers-reduced-motion): animation disabled, logos displayed static in a centred flex row
Add a scrolling logo bar to my homepage below the hero section. Heading: “Trusted by teams at”. Logos from: /assets/images/logo-[company].png (list: [company1, company2, company3, company4, company5]). All logos 40px tall, greyscale by default, full colour on hover. Infinite CSS scroll animation, no JS. Pause on hover. Respect prefers-reduced-motion by showing logos static. CSS in theme.css.
Pattern 3 — Featured Pull-Quote with Metrics Strip
A single large pull-quote centred on a dark or branded background, paired with a 3-stat metric strip below. High-impact for landing pages — one well-chosen testimonial with hard numbers outperforms a grid of anonymous reviews.
- Full-width section with dark or branded background and centred content
- Large quotation mark: CSS
::beforepseudo-element at 6rem with low opacity - Quote text: 1.4rem italic, max 200 characters for maximum impact
- Attribution: avatar + name + role/company in a centred flex row beneath the quote
- Metric strip: 3 columns with large number and short label per cell
- Optional count-up animation via Intersection Observer when the section scrolls into view
Add a featured testimonial section to my homepage with a dark background. Quote: “[your testimonial text]”. Attribution: avatar /assets/images/[name].jpg, name “[Name]”, title “[Title, Company]”. Below the quote, a metrics strip with 3 stats: [Stat1 value + label], [Stat2 value + label], [Stat3 value + label]. Animate the numbers counting up from 0 on scroll using Intersection Observer. Respect prefers-reduced-motion. CSS in theme.css, JS in main.js.
Every testimonial pattern includes
Your words, your brand
Paste your real testimonials into the prompt. Claude writes the HTML around your content — matched to your site’s colours, fonts, and card style. No placeholders to hunt down.
No third-party widgets
No Trustpilot embeds, no Google Reviews scripts. Your testimonials live in your HTML — faster page loads, no external tracking, no platform dependency.
Accessible by default
Star ratings include aria-label for screen readers. Animated logos respect prefers-reduced-motion. Quote sections use semantic <blockquote> markup throughout.
Update in seconds
Got a new client? Tell Claude to add a fourth testimonial card. Change a quote, update an avatar, reorder the metrics strip. It’s on your live site within seconds.
Pair testimonials with
Combine social proof patterns with these building blocks for a high-converting landing page.
Hero Sections
Lead with a fullscreen gradient or split-layout hero, then follow with testimonials to back up your headline claims.
View patterns →Pricing Tables
Place testimonials directly above your pricing section — the highest-converting placement for reducing purchase hesitation.
View patterns →Contact Forms
A testimonials section immediately above a contact form is one of the most effective page structures for service businesses.
View patterns →Add social proof to your site today
From £6.99/month. First month free — no credit card required.