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.