Testimonials & Quotes

web

Testimonials are emotional proof. They belong above logos in the hierarchy. The best implementations treat each quote like a piece of editorial layout, not a card on a wall.

Variation 01
Pull-Quote Hero
aka Editorial Quote · Big Quote Block
stripe.com
One oversized quote, set in serif, with a credited portrait and role. The whole section is the quote.
When to use
When you have a single legendary quote from a recognisable customer. Don't dilute it by stacking three.
Anatomy
Display-size quote - 48–72px serif
Quotation-mark glyph as decorative anchor
Square portrait, 64–96px, with subtle ring
Name + role + company on one line
Optional company logo, dim
How the industry does it
3 examples · credited
Stripe
Quotes set in serif at hero size, with a portrait pulled into the margin.
via stripe.com
Linear
Restrained palette, tight headshot crop, quote treated like literature.
via linear.app
Vercel
Quote first, logo second. The order tells the story.
via vercel.com
Prompt
```
Build a pull-quote hero section. Centered layout, max width 880px. Display a 56px Georgia-serif quote with a large oversized opening quote glyph in a muted color, decoratively offset above-left. Below the quote: a 72px square portrait with a subtle ring, then on one line. Name in medium weight, role · company in muted text, optional dim wordmark. No card chrome, no background fill. Generous vertical breathing room (96px top/bottom).
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 02
Testimonial Marquee
aka Quote Carousel · Marquee Wall
resend.com
A continuous, slow-scrolling row of quote cards that pauses on hover. Dense social proof without a wall of text.
When to use
When you have 8+ short, varied quotes. Avoid for long quotes. The motion makes them unreadable.
Anatomy
2 rows, opposite scroll directions
Quote cards: 280–360px wide, 140–180px tall
Avatar + name + handle inside each card
Mask gradient on left & right edges
Pause on hover; reduced-motion: stop completely
How the industry does it
3 examples · credited
Resend
Two reversed marquee rows; quotes are short, punchy, real.
via resend.com
Cal.com
Marquee pauses cleanly on hover; cards are sized for one breath.
via cal.com
Clerk
Slight overlap between rows builds depth without parallax.
via clerk.com
Prompt
```
Build a testimonial marquee section. Two horizontal rows scrolling in opposite directions at 38s linear infinite. Each card is 320px wide × 160px tall, rounded-xl with a subtle border, light surface fill. Inside: 32px avatar, name, dim @handle on the same row; then the quote in 13px body. Mask the left and right edges with a gradient fade to the page background. Pause both rows on hover (animation-play-state: paused). Honour prefers-reduced-motion: stop the animation entirely.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 03
Video Testimonial Card
aka Talking-Head Card · Video Quote
tella.tv
A small video card with a poster frame, play button, and the spoken quote transcribed beneath.
When to use
When the testimonial is filmed and high-quality. Always include a written transcript. Most visitors won't press play.
Anatomy
16:9 poster frame with subtle vignette
Centered circular play button
Auto-pause when off-screen
Transcript below the player
Speaker name, role, logo to the side
How the industry does it
3 examples · credited
Tella
Their own product as the demo - quote, poster frame, play overlay.
via tella.tv
Loom
Stacked rows of video testimonials, each transcribed below.
via loom.com
Descript
Video card with captions burned-in for muted autoplay.
via descript.com
Prompt
```
Build a video testimonial card. 16:9 poster image with a soft inset vignette, a centered 56px circular play button (white on translucent black). Below the player: the spoken quote transcribed in 14px body type with subtle quote marks, then a row with speaker portrait, name, role, and company wordmark. The player auto-pauses when scrolled off-screen via IntersectionObserver. Captions are burned-in or rendered as an overlay so it works muted.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 04
LinkedIn Post Card
aka LinkedIn Quote · Embedded LinkedIn Post
pitch.com
A card styled like a LinkedIn post - author, role, post body, engagement counts. Pulled from real public posts.
When to use
B2B and enterprise products where buyers vet you on LinkedIn before booking a call.
Anatomy
Header: avatar, name, role, LinkedIn icon
Body: post text, expandable on '...more'
Footer: reaction count + comment count
Click opens the original LinkedIn post
How the industry does it
2 examples · credited
Pitch
LinkedIn-style testimonial cards rendered with author + post body.
via pitch.com
Webflow
Mixed wall of LinkedIn + X posts as social proof.
via webflow.com
Prompt
```
Build a LinkedIn-style post card. Rounded-xl card, 1px border, padding 20px, surface fill. Header row: 40px avatar, name (15px medium) + role (12px muted) stacked, LinkedIn 'in' logo on the right. Body: post text in 14px, max 4 lines visible with a '… see more' button that expands the rest. Footer row above a 1px divider: '143 reactions · 12 comments' in 12px muted with the LinkedIn thumbs-up icon. Whole card links to the original post.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 05
Podcast Quote Card
aka Audio Testimonial · On-Air Quote
lennysnewsletter.com
A quote pulled from a podcast appearance, with a waveform and a 'play clip' button for the actual audio.
When to use
When real podcasters have talked about you on the air. The audio is the proof.
Anatomy
Headshot + host name + show name
Quote in 18px serif
Inline waveform (60px tall)
Play button toggles the audio clip
Link to the full episode
How the industry does it
2 examples · credited
Lenny's Newsletter
Podcast quote cards with episode reference and waveform.
via lennysnewsletter.com
Acquired
Long-form quote pull from episode chapters.
via acquired.fm
Prompt
Preview · Pro to copy
```
Build a podcast quote card. Two-column card. Left column: 80px circular host photo + show wordmark + episode title in 11px uppercase tracking-widest. Right column: a serif quote in 20px, the host's name + 'on the Acquired podcast' beneath, then a 60px-tall waveform SVG. A play button on the waveform toggles a 12-second audio clip that highlights the quoted moment. 'Listen to the full episode →' link at the bottom.
```
Pro
Unlock the full prompt.
Buy Pro
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 06
Tweet Spotlight
aka Single Tweet Hero · Featured Tweet
linear.app
One oversized tweet rendered as the only testimonial. Used when one quote dominates the rest.
When to use
When a single high-profile tweet captures the product better than any prose you can write.
Anatomy
Large quote, 24–32px
Author row with avatar + handle
X icon top-right
Subtle dotted background or quote glyph
How the industry does it
2 examples · credited
Linear
Single featured tweet rendered in editorial type.
via linear.app
Resend
Founder/operator tweet pulled into a hero-sized card.
via resend.com
Prompt
```
Build a single featured tweet section. Centered, max-width 720px. A 28px tweet quote rendered as the centerpiece with smart quotation marks, slightly heavier weight on the key phrase. Below: 48px avatar, name in 15px medium, @handle in 13px muted. X logo in the top-right corner. A faint repeating dot pattern as the background for editorial texture. The whole block links to the original tweet.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 07
Scroll Quote Stack
aka Snapping Quote Slider · Stacking Testimonials
apple.com
Quotes that snap into view as the user scrolls, each replacing the last in the same anchored frame.
When to use
Editorial sites with cinematic taste and a few unforgettable quotes. Don't ship without prefers-reduced-motion fallback.
Anatomy
Sticky frame anchored mid-viewport
Quote swaps via crossfade on scroll progress
Active quote indicator (dots) on the side
Reduced-motion: render as a static list
How the industry does it
2 examples · credited
Apple
Scroll-anchored content swaps used in product narratives.
via apple.com
Stripe Press
Quote-led scroll storytelling on book pages.
via press.stripe.com
Prompt
```
Build a scroll quote stack. A section ~3× viewport tall with a sticky inner frame (top: 30vh) containing the active quote. Map scroll progress within the section to an index across N quotes; on index change, crossfade the quote text and the author block (220ms). To the right of the frame, a vertical dot indicator highlights the active quote. For prefers-reduced-motion, scrap the stickiness and render the quotes as a regular vertical list.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 08
G2 / Capterra Rating Card
aka B2B Review Badge · Software Review Card
monday.com
Cards that show your aggregate G2 / Capterra / TrustRadius rating and badge collection.
When to use
Mid-market and enterprise B2B SaaS where buyers visit G2 during evaluation.
Anatomy
Provider logo (G2 / Capterra / TrustRadius)
Star rating + numeric score
Review count
Recent badges (Leader Spring '25, etc.)
Click-through to the listing
How the industry does it
2 examples · credited
Monday.com
G2 leader badges arrayed across the landing page.
via monday.com
HubSpot
Cross-platform review aggregator card.
via hubspot.com
Prompt
```
Build a G2 ratings card. 3-column grid of provider cards (G2, Capterra, TrustRadius). Each card: provider wordmark at the top, 48px rating ('4.8') with 5 filled stars under it, review count in 12px muted ('Based on 1,243 reviews'), then a horizontal row of 3 small badge SVGs (Leader Spring '25 / Best Support / High Performer). The whole card links to the public listing.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 09
Long-Form Customer Story
aka Case Study Hero · Story Quote Block
linear.app
A single full-bleed customer story with portrait, brand context, and a long quote - a mini case study above the fold.
When to use
When a single customer's story is so good it deserves the whole section. Pair with a 'Read the full story →' link.
Anatomy
Editorial portrait full-bleed on one side
Long quote in serif on the other
Customer logo + name + role
Key metric callout
Read full story link
How the industry does it
2 examples · credited
Linear
Long-form quote with portrait and brand context, full-bleed.
via linear.app
Vercel
Mini case study format with one big metric.
via vercel.com
Prompt
Preview · Pro to copy
```
Build a long-form customer story section. Two-column layout. Left column: a full-bleed editorial portrait of the customer (4:5 ratio, rounded-3xl). Right column: customer logo at top, a 28px serif pull-quote (2–3 sentences), name + role + company beneath. Above the quote, a large key-metric callout (e.g. '47% faster releases'). Below the quote, a 'Read the full story →' arrow link. Background subtly off-bg with generous vertical padding (140px top/bottom).
```
Pro
Unlock the full prompt.
Buy Pro
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro
Variation 10
Founder Quote Card
aka Operator Quote · CEO Testimonial
linear.app
A high-context quote from a peer founder or operator. Used to validate the product to other founders.
When to use
B2B and dev tools where peer endorsement carries more weight than enterprise logos.
Anatomy
Portrait, 64px round
Quote in 16px medium
Name + 'Founder, Company' on one line
Optional company wordmark beneath
How the industry does it
2 examples · credited
Linear
Founder quotes with credible operator names and companies.
via linear.app
Vercel
Operator quotes mixed with logo wall, founders named.
via vercel.com
Prompt
```
Build a founder/operator quote card. Rounded-2xl card, padding 28px, surface fill. Top: a 64px circular portrait. Below: a 16px medium quote - short, declarative, no marketing language. Then name + 'Founder, Acme' in 13px, with a small monochrome company wordmark beneath. On hover the border brightens. Designed to be repeated in a 3-up grid for credibility density.
```
Polish & tuning
2 of 4 unlocked
Motion
Ease-out for entrance, ease-in-out for state. 200ms hover, 400–600ms layout. Stagger children at 30–60ms so groups feel intentional, not synchronized.
Spacing
Pick one scale (4 or 8) and don't mix. Section padding 96–128px desktop, 48–64px mobile. Headline sits ~24px above the subhead; subhead ~32px above the CTA cluster.
Accessibility
WCAG AA contrast on every layer. Visible focus rings on every interactive element. prefers-reduced-motion fallback for entrance animations. A semantic <section> with aria-labelledby pointing at the headline.
Common pitfalls
Two CTAs competing for visual weight. Decorative orbs crowding the headline. Screenshots cropped without intent. Background gradients that fight the type. A subhead so long it becomes a paragraph.
Pro
Unlock the rest of the tuning notes.
Buy Pro

Testimonials & Quotes

Pull-Quote Hero

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Testimonial Marquee

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Video Testimonial Card

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

LinkedIn Post Card

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Podcast Quote Card

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Tweet Spotlight

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Scroll Quote Stack

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

G2 / Capterra Rating Card

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Long-Form Customer Story

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion

Spacing

Founder Quote Card

When to use

Anatomy

How the industry does it

Prompt

Polish & tuning

Motion