Trend Showcase
Fashion editorial testimonial with bento-grid panels, overlapping photos, and a quote card.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| backgroundColor | string | #f5f0e8 | Outer page background color (hex, rgb, or hsl). |
| accentColor | string | #f59e0b | Accent color for badges, CTA panel, and decorative elements (hex, rgb, or hsl). |
When to Use
Ideal for fashion e-commerce, lifestyle brands, and Uilora portfolio showcases that want testimonials embedded in an editorial layout — not isolated in a card row.
Best Practices
Use high-contrast fashion photography with warm tones to complement the cream/amber palette. Pair the quote section with a short, punchy testimonial — the layout itself is the storytelling vehicle.
Why This Component Matters
Fashion consumers are visually driven. A testimonial surrounded by product imagery and editorial photography creates context — the endorsement feels like part of the product experience, not an add-on.
FAQ
QHow does the bento grid work?
The component uses two flex rows with percentage-based width splits. Each panel is a flex child — no grid CSS, so the proportions reflow naturally at different container widths.
QCan I change the photos?
All image URLs are baked as module-level constants (PANEL_IMAGES). Fork the file and swap the URLs to match your brand's photography.
QIs it mobile responsive?
On mobile the panels stack vertically in order: dark heading panel, main photo, quote card, CTA, product image. The bento feel becomes a clean vertical story.
Related Components
Built something cool?
Share your work with 10k+ devs — or tell us how we can improve.