Build Assets
Hero Pattern
Testimonial Section
Social proof section using customer quotes to build trust mid-page.
Platform: webTags: testimonials, social-proof, trust, conversion
Layout
3-column card grid or single large featured quote. Cards: white background, subtle shadow. Featured: large quote mark, 24px quote text, left-aligned. Section background: slightly tinted (--color-bg-secondary).
Content Slots
required
Quote text
The testimonial in full. 14–16px, italic or regular. Max 3–4 sentences — edit for brevity.
required
Author name
14px semibold.
required
Author title + company
13px secondary — establishes credibility of the source.
optional
Author photo
40–48px circular avatar. Builds human connection.
optional
Company logo
24px height, greyscale. Recognizable logos add credibility.
optional
Star rating
5-star display if from a review platform.
Hierarchy Rules
- Quote text is the primary element — largest and highest contrast
- Author attribution directly below quote with no competing elements between
- Company logo or title establishes why this person's opinion matters
- Avoid quote walls — 3 carefully chosen quotes beat 12 generic ones
- Specificity beats enthusiasm: "Saved us 8 hours/week" > "Amazing product!"