Social Proof Section With Metric Bento Grid
ProBento 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
- Category
- Social Proof Sections
- 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

