Editorial
Editorial gallery with magazine-style layout.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{image: string, chapter?: string, title?: string, titleItalic?: string, description?: string}> | [{image: '...', chapter: 'CHAPTER 01', title: 'The Silent', titleItalic: 'Symphony', description: '...'}, ...] | Array of editorial items with image, chapter, title, titleItalic, and description. |
| backgroundColor | string | #1a1a1a | Background color (hex, rgb, or hsl). |
| textColor | string | #e5e5e5 | Text color (hex, rgb, or hsl). |
| accentColor | string | #d4af37 | Accent color for chapter labels (hex, rgb, or hsl). |
When to Use
Ideal for high-end fashion portfolios, editorial magazines, and creative agencies that want a sharp 'Editorial' aesthetic. Use this 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 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
Editorial layouts communicate digital excellence, fashion-forward thinking, and attention to detail. This production-ready UI template helps you build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
FAQ
QHow does the 'Chapter' work?
The gallery is designed with an indexing feel (Chapter 01, 02) to simulate a technical feature repository or architectural project repository.
QCan I adjust the typography?
Absolutely, both the primary 'title' and the specific 'titleItalic' weights 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.