Editorial
Editorial split layout video player.
Main Features of Editorial
How to Use Editorial in Next.js
Installation Guide for Editorial
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
video | string | http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 | Video source URL. |
backgroundColor | string | #f5f5f5 | Background color (hex, rgb, or hsl). |
category | string | Documentary | Category label text. |
title | string | The Art of Motion | Title text. |
description | string | Exploring the intersection of movement and stillness in modern cinematography. | Description text. |
buttonText | string | Watch Full Film | Button text. |
playingText | string | Now Playing | Playing status text. |
progressColor | string | #000000 | Progress bar color (hex, rgb, or hsl). |
Related Components
When to Use
Excellent for high-end fashion portfolios, editorial magazines, and creative agencies that want a sharp 'Editorial' aesthetic. Use this split-screen layout 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 imagery. 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
QHow does it split?
The component uses localized shared-element transitions (layout-id) to seamlessly move the video into a split view with the text details, creating a high-fidelity 'opening' effect.
QCan I adjust the grid?
Absolutely, both the primary 'backgroundColor' and the specific 'progressColor' 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 'Editorial' narrative remains impactful and structural on small screens.