Proof Grid
Clean social-proof section with a bold stat, avatar stack, CTA buttons, and a bottom-fading testimonial grid.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | #ffffff | Page background color (hex, rgb, or hsl). |
| accentColor | string | #000000 | Color for the stat number, headings, and primary button (hex, rgb, or hsl). |
When to Use
Ideal for SaaS platforms, website builders, and Uilora-powered landing pages that need to pair a large social-proof number with real customer quotes. The grid format makes many testimonials scannable without overwhelming the page.
Best Practices
Keep the STAT to 3–5 characters for maximum visual impact. Use 6–9 testimonial cards — the bottom fade naturally hides the last row, creating an infinite depth effect that invites scrolling. Match accentColor to your brand's primary CTA color.
Why This Component Matters
A single large number ('250K+ websites') anchors the testimonial section with a quantitative claim that is impossible to ignore. Pairing it with real voices immediately validates the number, converting skeptics who might dismiss the stat alone.
FAQ
QHow does the bottom fade work?
A CSS maskImage gradient fades the grid from fully visible at the top to transparent at the bottom. The fade starts at 60% of the grid height, making the last row visually dissolve rather than hard-cut.
QCan I change the stat and label?
The STAT, STAT_LABEL, TAGLINE, and TAGLINE_SUB are all module-level constants at the top of the file. Fork the component and update them to match your product metrics.
QIs it mobile responsive?
Yes. The header switches from a side-by-side layout to a vertical stack on mobile. The grid collapses from 3 columns to 2 on tablet and 1 on mobile, with the fade effect preserved on all sizes.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.