Image Gallery

Image gallery with lightbox

Marketing BlockContent

Overview

A CSS grid gallery with configurable column count and fixed row height. Individual images can span multiple columns (wide) or rows (tall) for a magazine-style layout.

Usage

import { ImageGallery } from "@leanicon/web-builder-library";

Default

Three-column grid with mixed span sizes.

Two columns

Four columns

With heading and subtitle

We have fun too

Our culture in pictures

Heading only

Gallery

Wide span only

One image set to span: "wide" to span two columns.

Tall span only

One image set to span: "tall" to span two rows.

No spans (uniform grid)

All images at normal size — a simple uniform grid.

Two images

Single image

Dark mode

With heading — dark mode

We have fun too

Our culture in pictures

Two columns — dark mode

No spans — dark mode

Props

Prop	Type	Default	Description
`images`	`GalleryImage[]`	—	Array of images to display (required)
`heading`	`string?`	—	Optional heading above the grid
`subtitle`	`string?`	—	Optional subtitle below the heading
`columns`	`2 \| 3 \| 4`	`3`	Number of grid columns
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root

GalleryImage

Field	Type	Description
`src`	`string`	Image URL (required)
`alt`	`string`	Alt text (required)
`span`	`"normal" \| "wide" \| "tall"`	Grid span — `"wide"` = 2 columns, `"tall"` = 2 rows

Notes

Each row is fixed at 250px height (auto-rows-[250px]).
"wide" spans 2 columns; "tall" spans 2 rows.
Images are rendered with object-cover to fill their grid cell.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.

Props

Name	Type	Default	Required
`heading`	`string`	—	No
`subtitle`	`string`	—	No
`images`	`GalleryImage[]`	—	Yes
`columns`	`enum`	`3`	No
`animation`	`ImageGalleryAnimation`	—	No
`colorScheme`	`enum`	—	No
`className`	`string`	—	No