Editorial Split
Editorial split testimonial section with typography focus.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| testimonials | TestimonialItem[] | [] | Array of testimonial items with id, name, role, company, content/text, media, avatar/image. |
| backgroundColor | string | #ffffff | Background color of the component (hex, rgb, or hsl). |
| imageBgColor | string | #f5f5f5 | Background color of the image section (hex, rgb, or hsl). |
| imageGrayscale | boolean | true | Whether to apply grayscale filter to images. |
| imageContrast | number | 125 | Contrast level of images (0-200). |
| figureLabelBgColor | string | #ffffff | Background color of figure labels (hex, rgb, or hsl). |
| figureLabelTextColor | string | #000000 | Text color of figure labels (hex, rgb, or hsl). |
| figureLabelPrefix | string | Fig. | Prefix text for figure labels. |
| title | string | Voices | Main title text. |
| titleItalic | string | of the Industry | Italic title text. |
| titleColor | string | #000000 | Color of the title text (hex, rgb, or hsl). |
| titleItalicColor | string | #000000 | Color of the italic title text (hex, rgb, or hsl). |
| dividerColor | string | #000000 | Color of dividers (hex, rgb, or hsl). |
| arrowColor | string | #000000 | Color of arrow icons (hex, rgb, or hsl). |
| quoteColor | string | #000000 | Color of the quote text (hex, rgb, or hsl). |
| authorNameColor | string | #000000 | Color of the author name text (hex, rgb, or hsl). |
| authorRoleColor | string | #737373 | Color of the author role text (hex, rgb, or hsl). |
| footerBgColor | string | #000000 | Background color of the footer (hex, rgb, or hsl). |
| footerTextColor | string | #ffffff | Text color of the footer (hex, rgb, or hsl). |
| footerText | string | End of Section | Footer text content. |
When to Use
Ideal for artistic agencies, architecture firms, and Next.js sites that want a sophisticated, editorial-split aesthetic. Use this React component for a testimonial section that halves the screen between high-impact monochromatic imagery and bold typography.
Best Practices
Follow React best practices by pairing this with high-contrast Serif typography. Maintain consistent spacing within your design system by using it on pure white or light gray backgrounds. Optimize for performance by lazy-loading the side-panel images.
Why This Component Matters
Editorial layouts add a sense of authority and timelessness to user feedback. This production-ready UI component helpsคุณ build an interface that feels like a high-end publication, improving the perceived exclusivity of your product.
FAQ
QWhy is it monochromatic?
The editorial style focuses on the power of typography and the raw emotion in the photos, ensuring user feedback feels profound and authoritative.
QCan I use color images?
Yes, the `imageGrayscale` prop can be set to `false` if you prefer to use full-color photography in the side panel.
QIs the split fixed?
The component uses a responsive flex/grid layout that maintains the split on desktop while elegantly stacking the image and text on mobile.
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.