Grids & Layouts
Hero Expand
Click-to-expand hero gallery with fullscreen interactions.
galleryexpandherofullscreen
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
items | Array<{id: string, title: string, col: string, img: string}> | [{id: '1', title: 'Cyber', col: 'col-span-2 row-span-2', img: '...'}, ...] | Array of items with id, title, grid span classes, and image URL (empty img for empty slots). |
backgroundColor | string | #18181b | Background color (hex, rgb, or hsl). |
emptySlotText | string | Empty | Text displayed in empty grid slots. |
fullScreenText | string | Full screen immersive view active. Click anywhere to return to the grid matrix. | Text displayed in fullscreen view. |