Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Main Features of Editorial Layout
How to Use Editorial Layout in Next.js
Installation Guide for Editorial Layout
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
heroImageSrc | string | https://images.unsplash.com/photo-1492633423870-43d1cd2775eb?q=80&w=2070&auto=format&fit=crop | Hero image source URL. |
heroImageAlt | string | Editorial | Hero image alt text. |
heroTitle | string | Collection 001 | Hero section title. |
heroDescription | string | Exploring the intersection of brutalism and organic growth through digital mediums. | Hero section description. |
stats | Array<{value: string, label: string}> | [{value: '84.2K', label: 'Active Users'}, {value: '12.5%', label: 'Growth Rate'}, {value: '0.02s', label: 'Latency'}] | Array of stat objects with value and label. |
statsButtonText | string | View Report | Stats section button text. |
audioFileName | string | Audio_Viz.wav | Audio visualization file name. |
quote | string | Design is intelligence made visible. | Quote text. |
quoteColor | string | #000000 | Quote text color (hex, rgb, or hsl). |
bottomTitle | string | The Process | Bottom section title. |
bottomDescription | string | A systematic approach to creative problem-solving. | Bottom section description. |
bottomAvatars | number[] | [1, 2, 3, 4] | Array of avatar seed numbers for profile images. |
techText | string | React • TypeScript • Next.js | Technology stack text. |
backgroundColor | string | #ffffff | Background color (hex, rgb, or hsl). |
Related Components
When to Use
Ideal for high-end fashion portfolios, editorial magazines, and creative agencies that want an asymmetric 'Awwwards' aesthetic. Use this layout to showcase project collections with a mix of high-fidelity imagery and technical data readout.
Best Practices
Follow React best practices by pairing this with high-contrast, professional 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
QAre the images responsive?
Yes, the asymmetric grid adapts its spans dynamically for mobile, ensuring the editorial flow remains impactful on small screens.
QWhat is the 'Audio Viz'?
The component includes a localized visual placeholder for audio files, perfect for sound designers or creative labs showcasing multimedia work.
QCan I customize the colors?
Absolutely, both the primary background and specific text colors like the quote can be tuned to match your brand's specific color palette.