Social Proof Section With Metric Bento Grid

Pro

Bento testimonial section with a tall conversion metric card, mixed light and dark quote cards, company marks, avatars, and a star rating strip.

When to use Social Proof Section With Metric Bento Grid

Use this when the landing page has to show named outcomes, not a carousel of praise. A tall conversion card anchors the left. Three quote cards fill the rest of the bento, and one of them inverts so the grid does not read as four equal tiles. The strip under the cards names a client count, a star rating, and a reviews link. Put the metric, the quote, and the person in the DOM. A screenshot of this layout is not a testimonial section.

Skip it when you only have one quote, or when the numbers cannot be stood behind on a sales call. Four cards that all say the team was great are a brochure. The shipped copy is a fictional studio floor, so replace the metrics, the quotes, the names, and the company marks before this goes to production. The section follows light and dark. The inverted card flips with the page so it still breaks the grid.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Follows the site theme in light and dark
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxtailwind-merge
Source
413 lines, 13 KB in one file
Install
wensity add social-proof-section-with-metric-bento-grid --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, dark, testimonials, bento, metrics, reviews, saas
Last updated

More social proof sections