Editorial Stagger
Sharp monochrome editorial masonry grid with high-fashion aesthetics.
Main Features of Editorial Stagger
How to Use Editorial Stagger in Next.js
Installation Guide for Editorial Stagger
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{h: string, title: string, sub: string}> | [{h: 'h-64', title: 'Vogue', sub: 'Collection 01'}, ...] | Array of editorial items with height class (h), title, and subtitle. |
backgroundColor | string | #f4f4f0 | Background color (hex, rgb, or hsl). |
imageSeed | number | 50 | Seed number for generating placeholder images. |
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics.
Neo-Brutal Layout
Bold neo-brutalist bento grid with chunky borders and vibrant colors.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QHow does the 'Stagger' work?
The grid uses non-uniform item heights (h-64, h-96, etc.) to simulate the organic, asymmetrical flow found in physical fashion magazines and editorial lookbooks.
QAre colors editable?
Absolutely, both the primary background and specific text colors can be tuned to match your brand's specific color palette (default: neutral-look).
QIs it mobile responsive?
Yes, the masonry columns adapt dynamically for mobile, Ensuring the editorial flow remains impactful and structural on small screens.