# ImageList

Source: https://design.ritchiebros.com/components/layout/image-list/

An image list displays a collection of images in an organized grid, useful for galleries and media-heavy layouts.

## Figma

The Figma reference for **ImageList** will appear here once the design link is added.

## Storybook

Interactive examples for **ImageList** will render here once the Storybook link is wired in.

## Best practices

- Use it for browsing a set of images rather than mixed content.
- Keep a consistent aspect ratio and gap so the grid reads as a set.
- Use quilted or masonry variants only when varied sizing communicates something meaningful.
- Provide descriptive alt text for every image.

## Do’s and don’ts

**Do:** Show a coherent gallery of similarly-purposed images.

**Don’t:** Use an image list to lay out unrelated content blocks — use a grid instead.

## Accessibility

- Give each image meaningful alt text; use empty alt only for purely decorative images.

## Related components

- [Grid](https://design.ritchiebros.com/components/layout/grid/)
- [Avatar](https://design.ritchiebros.com/components/data-display/avatar/)