masterclass.com
Design analysis
A centered testimonial heading introduces a dark quote panel paired with a member image, with arrows and pagination making the social proof feel like a browsable story.
Prompt preview
## Reference images Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language. - Component: https://kage-design-assets.t3.tigrisfiles.io/components/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146211-7.webp - Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/masterclass-com/5ec25cd5-decc-406e-8087-269a3e7b0a10-1789146173702-full.webp - Component on Kage: https://kage.design/component/masterclass-testimonials ## Before you start Ask what the user's product, audience, and brand are, then create authentic social proof for that context. Create a testimonial section on black with a centered heading and a horizontal carousel. Each slide should combine a large charcoal quote card on the left with a portrait or lifestyle image on the right, slightly offset vertically for visual tension. Use 16–18px body text, a small bold name plus muted attribution, 16px card radius, and #252b32 for the quote surface. Place circular previous/next buttons at the far edges and small pagination dots below. Keep the quote readable at 60–70 characters per line, use generous padding, and stack image above quote on mobile. Add accessible carousel labels and pause behavior if autoplay exists. Never: use logos, product names, copy, illustrations, or imagery from the reference.
kage