Hero Expand
Uilora Hero Expand — bento grid where any card expands to a full-bleed immersive view.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| items | Array<{id: string, title: string, col: string, img: string}> | [{id: '1', title: 'Uilora Dusk', col: 'col-span-2 row-span-2', img: '...'}, ...] | Array of items with id, title, grid span classes, and image URL. |
| backgroundColor | string | #18181b | #18181b Background color (hex, rgb, or hsl). |
| emptySlotText | string | Empty | Text displayed in empty grid slots. |
| fullScreenText | string | Uilora — immersive full-screen view. Click anywhere to return. | Text displayed in fullscreen view. |
When to Use
Excellent for technical dashboards, AI processing platforms, and Next.js applications that want a high-tech 'Hero Expand' aesthetic. Use this layout to communicate power, security, and digital intelligence through dark themes and architectural grid modules.
Best Practices
Maintain scalable component architecture by pairing this with sharp, technical typography. Follow React best practices by using Framer Motion for the module expansion. Optimize for performance by managed the border pattern renders.
Why This Component Matters
Expanding grid layouts communicate technical authority, sophistication, and digital craft. This Uilora-ready template helps you build an interface that feels organized and high-end, adding a unique immersive signature to your brand.
FAQ
QIs the expansion 'Shared'?
Yes, the component uses Framer Motion's `layoutId` to animate the transition between the small grid module and the fullscreen immersive view seamlessly.
QCan I adjust the grid?
Absolutely, both the Tailwind col-spans and the primary background colors can be adjusted to create 'Industrial' or 'Cyber' expansion effects.
QHow does the 'Empty' state work?
The grid supports architectural 'Negative Space' modules (default text: Empty) to maintain visual balance and structural honesty within the technical matrix.
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.