Uilora Editorial Stagger
Sharp monochrome editorial masonry grid with high-fashion aesthetics.
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. |
When to Use
Ideal for high-end fashion portfolios, editorial magazines, and creative agencies that want a sharp 'Editorial' aesthetic. Use this masonry grid 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 stagger 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.
FAQ
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.
Related Components
Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Swiss Layout
Clean Swiss design bento grid with precise typography and minimal aesthetics, branded for Uilora.
Wabi Sabi Layout
Japanese-inspired bento grid with wabi-sabi aesthetics, imperfections, and Uilora branding.