Testimonials

P Purpose

Primary social proof section featuring multiple client voices. A 3-column scroll card grid gives breadth of proof — different industries, roles, and outcomes. Arrow navigation scrolls through all cards. Volume of voices communicates an established track record.

W When to Use

• Homepage: after services overview or case studies, to reinforce with client voices
• Services pages: after the methodology section, before final CTA
• About page: as proof of team delivery capability
• When you have 3+ strong client quotes — use Featured for fewer

I Required Inputs

• overline — e.g. "Client Voices" or "What Our Clients Say"
• headline — outcome-focused, not generic
• testimonials[] — min 3. Each: quote (2–3 sentences), name, role, optional avatar + logo

V Variants

• White — default. Cards on white with subtle border and arrow nav
• Grey — snow background. Cards get cloud border + xs shadow
• Dark — ink background. Cards in ink-90 with light text. Dramatic mid-page break

F Typical Page Flow

• After: case studies, services overview, or client logos strip
• Before: final CTA ending or FAQ section
• Pairs well with client logos strip above — "logos → voices" proof ladder
• Do not place adjacent to case study supportive section — too much proof stacking

P Purpose

When one exceptional testimonial is strong enough to anchor the section alone. A single large centered quote with prominent attribution creates focus and gravitas. Use when the quote itself is the hero — specific, credible, and outcome-rich.

W When to Use

• Homepage: as a dramatic proof break between content sections
• Services pages: one standout quote that perfectly matches the service
• When you have fewer than 3 strong quotes — better one great quote than three mediocre
• Landing pages: single-focus proof for conversion pages

I Required Inputs

• overline — e.g. "Client Voices"
• quote — 2–4 sentences. Must include a concrete result or specific insight
• name — full name of the client contact
• role — title and company descriptor
• avatar — optional. 48px circle headshot
• logo — optional. SVG string, centered below attribution

V Variants

• White — default. Clean, quiet, lets the quote speak
• Grey — snow background. Good between white sections
• Dark — ink background, white text. Creates a dramatic pause

F Typical Page Flow

• After: hero, services list, or methodology section
• Before: CTA section, case studies, or FAQ
• Works as a "breath" between dense sections — visual relief while reinforcing trust

P Purpose

Multiple featured-weight testimonials cycling automatically. Each quote appears in the large centered format with prominent attribution. A progress bar on the active dot shows time remaining. Clicking a dot jumps immediately. Use when 2–4 standout quotes each deserve featured treatment.

W When to Use

• Homepage: dramatic auto-playing proof section that cycles through strongest voices
• Services pages: multiple clients validate the same service from different angles
• When you have 2–4 featured-quality quotes (longer, specific, outcome-rich)
• Prefer static Featured when you have exactly 1 standout quote

I Required Inputs

• testimonials[] — min 2, max 4. Each: quote, name, role, optional avatar
• overline — e.g. "Client Voices"
• intervalMs — optional. Advance interval in ms. Default 6000

V Variants

• White — default. Progress dots use border/red fill
• Grey — snow background
• Dark — ink background. Dramatic auto-advancing proof section

F Typical Page Flow

• Same placement as the static Featured — after hero or services, before CTA
• Creates more dwell time than a static quote — pairs well with longer pages
• Do not use on short landing pages — the auto-advance creates distraction

P Purpose

Lightweight trust signal between content sections. A red left-border accent, constrained width, and compact attribution make this the smallest proof unit — enough to reinforce credibility without pulling focus from surrounding content.

W When to Use

• Between content sections on long pages to break monotony with proof
• Services, methodology, or about pages where proof is secondary
• When the main case study would be too heavy but you still need credibility
• Limit to one per page region — don't stack multiple adjacent

I Required Inputs

• quote — 1–2 sentences max. Brevity is the whole point
• name — full name
• role — title and company descriptor
• avatar — optional. 36px circle headshot
• logo — optional. SVG string, right-aligned in attribution row

V Variants

• White — default. Left border accent on white background
• Grey — snow background. Use between white sections
• Dark — ink background. Left border stays red. Strong visual break

F Typical Page Flow

• After: services list, FAQ, thought leadership content, or methodology
• Before: CTA ending, contact form, or footer
• Pairs well with the main testimonials section earlier on the page

P Purpose

Same compact proof footprint as the Inline Quote but centered — a small quote icon replaces the left border. Suits pages with a centered content flow where a left-aligned quote would feel out of rhythm.

W When to Use

• Centered landing pages and single-column layouts
• Between centered CTAs or FAQ sections
• When the page rhythm is centered and a left-aligned quote would break it
• Same placement rules as the Inline variant

I Required Inputs

• quote — 1–2 sentences. Same brevity requirement as Inline
• name — full name
• role — title and company descriptor
• avatar — optional. 36px circle
• logo — optional. SVG string, centered below attribution

V Variants

• White — default. Centered red quote icon on white
• Grey — snow background
• Dark — ink background, inverted text

F Typical Page Flow

• After: centered content sections, pricing tables, or feature grids
• Before: centered CTA buttons or form sections
• Use when the surrounding sections are already centered

P Purpose

2–4 compact centered quotes cycling automatically with progress dots. The lightest rotating proof unit — same small footprint as TM-05 but cycling through multiple voices. Ambient proof without a heavy testimonial section.

W When to Use

• Between content blocks or just above a CTA on longer pages
• When you have 2–4 short quotes and want ambient proof without a heavy section
• Pages where the full card grid would be too heavy
• As a subtle rotating trust signal in the middle of a long service page

I Required Inputs

• testimonials[] — min 2, max 4. Each: quote, name, role, optional avatar
• intervalMs — optional. Advance interval in ms. Default 6000

V Variants

• White — default. Centered layout on white with progress dots
• Grey — snow background
• Dark — ink background. Dots adapt to dark surface

F Typical Page Flow

• Between heavy content sections as ambient proof
• Just above a CTA ending to prime conversion
• On editorial or blog pages where the full card grid is too formal