Editorial Layout
Asymmetric fashion-inspired bento grid with sharp edges and editorial styling, branded for Uilora.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| title | string | Uilora Design System | Hero section title displayed over the image. |
| description | string | Crafting beautiful, production-ready components for the modern web. | Hero section subtitle/description. |
| accentColor | string | bg-orange-600 | Tailwind background class for the quote accent block (e.g. 'bg-orange-600', 'bg-indigo-500'). |
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 Uilora's component collection with a mix of high-fidelity imagery and technical data readout.
Best Practices
Pair with high-contrast, professional photography. Keep grid gaps uniform for design system consistency. Use efficient image loading patterns for performance.
Why This Component Matters
Editorial layouts communicate digital excellence and attention to detail. This Uilora-branded template leaves a lasting visual impression while showcasing your component library in a curated, premium way.
FAQ
QIs the grid responsive?
Yes, the asymmetric grid adapts its spans dynamically for mobile, ensuring the editorial flow remains impactful on small screens.
QCan I change the accent color?
Pass any Tailwind background class to the accentColor prop, e.g. 'bg-violet-600' or 'bg-emerald-500'.
QAre the stats hardcoded?
Yes, the stats (700+ Components, 12.5K Downloads, 0.02s Load Time) are Uilora brand defaults. To show custom data, clone and extend the component.
Related Components
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.
Botanic Layout
Organic bento grid with botanical themes, curved shapes, and Uilora branding.