Editorial Split
Editorial split stats section with typography focus.
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. |
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
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.
FAQ
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.
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.