Editorial Split
Editorial split stats 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 |
|---|---|---|---|
image | string | https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=2070&auto=format&fit=crop | Background image URL. |
title | string | Building the future, | Section title text (first part). |
titleItalic | string | one block at a time. | Section title text (italic part). |
stats | Array<{value: number, label: string}> | [] | Array of stat items with value and label. |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
imageOverlayColor | string | rgba(0,0,0,0.1) | Image overlay color. |
titleColor | string | #000000 | Title text color. |
titleItalicColor | string | #737373 | Italic title text color. |
statValueColor | string | #000000 | Stat value text color. |
statLabelColor | string | #525252 | Stat label text color. |
borderColor | string | #000000 | Border color. |
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 stats 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 your data. 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 split 50/50?
The split layout provides a cinematic balance between human imagery (the 'Why') and hard data (the 'What'), making the stats feel grounded in reality.
QCan I use color images?
Yes, while designed for monochromatic impact via the `imageOverlayColor`, you can use full-color images by setting the overlay to transparent.
QIs it responsive?
Yes, the component elegantly stacks the image on top of the stats on mobile while maintaining the editorial typography.