Testimonial 11 - Masonry testimonial grid with ratings

Pro

Multi-column testimonial cards over a gradient background, paired with a heading, description, and star-rated platform logos.

Shadcn Testimonial 11 block

Component data

ID
testimonial11
Access
pro
Created
Aug 5, 2024
Type
block
Libraries
Radix UI, Base UI, React Aria
Figma

Testimonial 11 block design & features

Testimonial11 is a testimonial section built with Shadcn UI, divided into a top header area and a masonry card grid below. The header places a heading and description on the left with two rating blocks on the right, each showing a platform logo, a numeric score, and a row of five filled star icons. Below this, up to nine testimonial cards render in a CSS columns layout.

Each card sits on a bordered background surface with rounded corners and contains a quoted testimonial in small muted text, followed by an avatar paired with the author name and company. The section background uses a linear gradient that fades from muted at the top to the base background color, and a translucent gradient overlay at the bottom partially masks the lower cards, creating a fade-out effect.

The overall tone is polished and proof-heavy, stacking multiple short quotes with brand recognition from the logo-and-rating pairings. Card heights vary naturally with content length, producing the masonry effect without JavaScript layout logic.

On small screens the grid reduces to a single column and hides cards beyond the fourth entry. Medium screens show two columns and reveal more cards, while the full three-column layout appears at the large breakpoint.