ImageList

ImageList is a thin grid wrapper for laying out image tiles (typically ImageListItem) into evenly spaced columns — use it for galleries, media pickers, and thumbnail grids. Set cols for the number of columns and gap for the pixel spacing between tiles; it forwards any other div props and merges className.

Example

Preview

Light Dark

import { ImageList, ImageListItem } from '@officina/ui';

<ImageList cols={3} gap={8}>
  {photos.map((photo) => (
    <ImageListItem key={photo.id} caption={photo.title}>
      <img src={photo.src} alt={photo.title} />
    </ImageListItem>
  ))}
</ImageList>;

API

ImageList

The grid container.

ImageListItem

A single framed image tile, with an optional caption.