Collection Grid
Collection grid lightbox with context expansion and full click-to-open image viewer.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| images | string[] | [...10 Unsplash URLs] | Array of image source URLs for the collection grid. |
| backgroundColor | string | #ffffff | Page background color. |
When to Use
Excellent for Uilora brand showcases and editorial archives. A circle-reveal opens the dark grid, and clicking any image opens a full-screen viewer with navigation.
Best Practices
Use portrait-oriented images (3:4 ratio) for the cleanest grid cards. Provide 6–12 images for the best grid density.
Why This Component Matters
The two-layer experience (grid reveal → image viewer) creates a premium layered interaction that keeps users engaged. This Uilora template turns a simple gallery into an immersive archive.
FAQ
QHow does clicking an image work?
Clicking any card opens a full-screen viewer on top of the grid with spring-animated scale-up, image counter, and left/right navigation arrows.
QCan I use keyboard navigation?
Yes — ArrowLeft, ArrowRight navigate between images; Escape closes the viewer or the grid.
QIs the grid responsive?
Grid adapts from 1 → 2 → 3 columns on sm/md/lg breakpoints.