Editorial Split
Editorial split testimonial section with typography focus.
Main Features of Editorial Split
How to Use Editorial Split in Next.js
Installation Guide for Editorial Split
Props
Customize the component with these 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. |
Related Components
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 in Modern UI Development
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.
Frequently Asked Questions
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.