Figma marketing website testimonial sections

Nobody reads the quote first. They read the name underneath, decide in about a second whether that person exists, and only then go back for the words. Which is why "Great product, saved us so much time!" over the byline "Sarah M., Marketing" does no work at all: there is nobody there to believe. These sections are built around the attribution block rather than the quote, and that is the right way round.

Credible beats glowing

The quotes that survive contact with a skeptical reader carry something checkable: a number, a job title, a company the reader has heard of. Nielsen Norman Group's research on credibility factors in web design found that people discount testimonials hosted on a company's own site, on the entirely reasonable grounds that the company chose which ones to show.

Typography cannot fix that. Concrete attribution narrows the gap, and the Social cards layouts give you all of it in one 596px card: the quote on top, then a 48px avatar, a name, a role, and the customer's logo at 32px along the bottom row. Four pieces of evidence per card, and none of them is the quote.

The attribution block, star by star

Simple centered 01 stacks a 48px avatar, the person's name, their role, and a row of five 20px star icons.

The stars are the part to think hardest about. Five out of five on every quote in the section stops reading as data and starts reading as wallpaper, so keep them where the rating came from somewhere real and drop them where it did not.

Social cards 01 adds a 16px status icon beside the name, the verified tick borrowed from social platforms, which is fair when you are reproducing a public post and quietly dishonest when you are not. While you wait for real assets, the 370+ free placeholder avatars and 180+ free placeholder company logos fill the slots without leaving grey circles in the design.

Seventeen layouts, one attribution pattern

The types run from Simple centered 01, 02, and 03 and Simple left aligned, through Split image 01 to 03 and Abstract image where a photograph carries half the section, to Card, Card split image, Social cards 01 to 03, Glassmorphic cards 01 to 03, and Case study cards. All of them exist at 1,440px desktop and 375px mobile. The simple, card, and social card types add a Brand theme that flips the section onto your primary color; the image-led and glassmorphic types stay on the default theme.

Heights are worth reading before you commit: Simple centered 01 is 518px on desktop, Social cards 03 is 1,330px. That gap is a page-length decision rather than a styling one, so pick against how far down a landing page the section actually sits.

A supporting Quote image bottom panel handles the caption laid over a photograph, floating or full-width, at sm and md, with the decorative quote mark switchable. Everything ships in light and dark.

Making the carousel behave in a prototype

The carousel arrows are a component of their own: 48px at md and 56px at lg, left and right, as a filled button with a chevron, a filled button with an arrow, or a bare arrow with no container, each with a hover state. For a prototype that scrolls, put the cards in a wide frame inside a clipped container and set the parent to horizontal scrolling. Figma's guide to prototype scroll and overflow behavior covers the settings, and it beats wiring twelve near-identical frames together.

The pagination dots under the centered layouts are the honest count of how many quotes you have, so three real ones beat eight padded ones.

When the section moves into code, Untitled UI React testimonial sections are open source, built with Tailwind CSS and React Aria, and cover the same social cards, split image, and glassmorphic layouts with the responsive grid behavior already written.