Bento Mosaic
Bento mosaic testimonial grid with expandable cards.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #f5f5f5 | Background color of the component (hex, rgb, or hsl). |
| headerCardBgColor | string | #4f46e5 | Background color of the header card (hex, rgb, or hsl). |
| headerCardBlurColor | string | rgba(255,255,255,0.1) | Blur effect color for the header card (hex, rgb, or hsl). |
| headerTextColor | string | #ffffff | Text color of the header (hex, rgb, or hsl). |
| headerText | string | What people are saying. | Header text content. |
| card1BgColor | string | #ffffff | Background color of card 1 (hex, rgb, or hsl). |
| card1TextColor | string | #525252 | Text color of card 1 (hex, rgb, or hsl). |
| card2BgColor | string | #facc15 | Background color of card 2 (hex, rgb, or hsl). |
| card2TextColor | string | #000000 | Text color of card 2 (hex, rgb, or hsl). |
| card2QuoteColor | string | #000000 | Quote text color of card 2 (hex, rgb, or hsl). |
| card2CompanyColor | string | rgba(0,0,0,0.6) | Company text color of card 2 (hex, rgb, or hsl). |
| card3BgColor | string | #000000 | Background color of card 3 (hex, rgb, or hsl). |
| card3AvatarBorderColor | string | #404040 | Avatar border color of card 3 (hex, rgb, or hsl). |
| card3QuoteColor | string | #ffffff | Quote text color of card 3 (hex, rgb, or hsl). |
| card3QuoteItalic | boolean | true | Whether to display quotes in italic on card 3. |
| card3AuthorColor | string | #ffffff | Author name color of card 3 (hex, rgb, or hsl). |
| card3RoleColor | string | #737373 | Author role color of card 3 (hex, rgb, or hsl). |
| statCardBgColor | string | #ffffff | Background color of stat cards (hex, rgb, or hsl). |
| statValueColor | string | #4f46e5 | Value text color of stat cards (hex, rgb, or hsl). |
| statLabelColor | string | #737373 | Label text color of stat cards (hex, rgb, or hsl). |
| card5BgColor | string | #faf5ff | Background color of card 5 (hex, rgb, or hsl). |
| card5HoverBgColor | string | #f3e8ff | Background color of card 5 on hover (hex, rgb, or hsl). |
| card5TextColor | string | #581c87 | Text color of card 5 (hex, rgb, or hsl). |
| card5IconColor | string | #9333ea | Icon color of card 5 (hex, rgb, or hsl). |
| card5AuthorColor | string | #6b21a8 | Author name color of card 5 (hex, rgb, or hsl). |
| card6BgColor | string | #ffffff | Background color of card 6 (hex, rgb, or hsl). |
| card6IconBgColor | string | #f5f5f5 | Icon background color of card 6 (hex, rgb, or hsl). |
| card6IconColor | string | #eab308 | Icon color of card 6 (hex, rgb, or hsl). |
| card6TextColor | string | #525252 | Text color of card 6 (hex, rgb, or hsl). |
When to Use
Excellent for complex products, diverse user bases, and Next.js applications that want a high-density, modular information layout. Use this React component for a bento-style testimonial grid with varying card sizes, metrics, and interactive states.
Best Practices
Maintain consistent spacing within your design system by aligning the grid gaps with your primary site layout. Follow React best practices by pairing it with high-contrast active highlights. Optimize for performance by using efficient grid-column spans.
Why This Component Matters
Bento grids allow you to showcase both qualitative feedback and quantitative metrics (like star ratings or active users) in a unified layout. This production-ready UI component helpsคุณ build an interface that feels structured and modern.
FAQ
QHow does the layout work?
It uses a multi-column CSS grid where cards 'bento' together, with some spanning multiple rows or columns to create a dynamic mosaic.
QCan I add more testimonial cards?
The component is built with a fixed mosaic pattern for maximum visual impact, but the content of each 'tile' is fully customizable.
QAre the statistics real?
The component features stylized stat cards that can be used to showcase aggregate data like '500+ Happy Clients' alongside individual quotes.
Related Components
Uilora Dynamic
Interactive tiered pricing calculator with seat slider, billing toggle, and real-time cost breakdown.
Uilora Cloud Slider
Dark navy 3-plan cloud pricing with per-card sliders, add-on checkboxes, and live price calculation.
Uilora Matrix
Feature comparison matrix with 3 plans, monthly/yearly toggle, Pro spotlight, check/cross icons.
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.