TechnicalTestimonial wall with real quotes and full attribution
Act as a web designer who cares about trust. Build a testimonial wall for {{business_name}} in this style: {{visual_style}}. Use only these real quotes: {{customer_quotes}}
Rules for the words:
- never write, polish or merge quotes; you may trim with an ellipsis if the meaning stays the same
- each quote keeps full attribution: name, role and company or city, and a photo only if one exists
- if a quote has no attribution, leave it out and tell me
- pull out the most specific phrase in each (a number, a before and after) and set it slightly bolder
Layout: 360: 1 column; 768: 2; 1280: 3, gap 24px. Use CSS grid with explicit rows, or columns, but keep DOM order matching visual reading order. One featured quote spans 2 columns at 1280 in a larger size. Show 9 quotes, then a Show more button.
Type: quotes 17 to 18px, line height 1.55; featured quote 24 to 28px, line height 1.3; attribution 14px, name weight 600, role in a muted token that still passes 4.5:1.
Markup: each card is a figure with a blockquote and a figcaption; source links where the review lives publicly.
States:
- long quotes clamp at 6 lines with a Read more button using aria-expanded
- no photo: an initials monogram from brand tokens, same size as photos
- 3 quotes: drop the wall and use one row; 50 quotes: paginate, don't load all
- hover: none required; focus-visible on links and buttons
Motion: none, or a single 300ms fade as cards enter; none under prefers-reduced-motion.
Avoid: carousels, five stars on every card, generic "Great service!" quotes, stock headshots, invented names, quotes all trimmed to the same length.
List any quotes you left out and why.