Stat Split
Clean fintech testimonial rows pairing portrait photos with quotes and bold stat numbers.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | #f8f8f8 | Page background color (hex, rgb, or hsl). |
| accentColor | string | #e53e3e | Color for the large stat numbers (hex, rgb, or hsl). |
When to Use
Built for fintech, banking, and SaaS products that need to pair human testimonials with quantitative proof. The stat column anchors each quote with a number that is impossible to ignore.
Best Practices
Use real portrait photography for maximum credibility — the full-height photo column makes low-quality images obvious. Keep stats to 2–3 characters maximum so the number reads at a glance.
Why This Component Matters
Combining a human face with a hard number creates the highest-trust testimonial format. The face provides emotional resonance; the stat provides rational justification. Together they close skeptics.
FAQ
QHow are the rows structured?
Each row is a flex container: photo section | divider | quote section | divider | stat section. The dividers are 1px borders that create visual separation without heavy UI chrome.
QCan I add more rows?
Add items to the TESTIMONIALS array and the layout will extend. Match each item with a STATS entry for the corresponding row stat and label.
QIs it mobile responsive?
On mobile the rows stack vertically — photo on top, quote below, stat as a bold accent line at the bottom of each row.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.