Editorial Split

Editorial split lightbox with image and article layout.

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

PropertyTypeDefaultDescription
image
stringhttps://images.unsplash.com/photo-1500462918059-b1a0cb512f1d?q=80&w=2000&auto=format&fit=cropMain image source URL.
backgroundColor
string#eaeaeaBackground color (hex, rgb, or hsl).
buttonText
stringRead StoryButton text.
category
stringEditorialCategory label text.
title
stringThe Architecture of SilenceArticle title text.
paragraphs
string[]['...', '...']Array of paragraph text strings.
photographer
stringPhoto by Elena ChenPhotographer credit text.
showShare
booleantrueWhether to show the share button.
showLike
booleantrueWhether to show the like button.

When to Use

Ideal for high-end fashion portfolios, editorial magazines, and creative agencies that want a sharp 'Editorial' aesthetic. Use this lightbox to showcase project collections with a mix of asymmetrical heights and technical typography.

Best Practices

Follow React best practices by pairing this with professional, high-contrast photography. Maintain consistent spacing within your design system by keeping the grid gaps uniform. Optimize for performance by using efficient image loading patterns.

Why This Component Matters in Modern UI Development

Editorial layouts communicate digital excellence, fashion-forward thinking, and attention to detail. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.

Frequently Asked Questions

QWhy 'Split'?

The modal is designed with a high-fidelity 50/50 split to simulate the raw structural honesty of architectural blueprint failures, focusing on both imagery and story.

QCan I adjust the text?

Absolutely, both the primary 'paragraphs' and the specific 'category' labels are fully configurable, allowing you to create 'High-Contrast' magazine effects.

QIs it mobile responsive?

The vertical flow and typographic scales adapt for mobile, ensuring the 'Draft' narrative remains impactful and structural on small screens.

Editorial Split - Premium React Lightbox Component | Uilora