Image list
Image lists display a collection of images in an organized image.
Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.
Basic image list
A simple example of a scrollable image ImageList.
<ImageList rowHeight={160} className={classes.imageList} cols={3}>
{itemData.map((item) => (
<ImageListItem key={item.img} cols={item.cols || 1}>
<img src={item.img} alt={item.title} />
</ImageListItem>
))}
</ImageList>Image list with titlebars
This example demonstrates the use of the ImageListItemBar to add an overlay to each ImageListItem.
The overlay can accommodate a title, subtitle and secondary action - in this example an IconButton.
- December
Breakfastby: jill111
Tasty burgerby: director90
Cameraby: Danson67
Morningby: fancycrave1
Hatsby: Hans
Honeyby: fancycravel
Vegetablesby: jill111
Water plantby: BkrmadtyaKarki
Mushroomsby: PublicDomainPictures
Olive oilby: congerdesign
Sea starby: 821292
Bikeby: danfador
Single line image list
This example demonstrates a horizontal scrollable single-line image list of images. Horizontally scrolling image lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. One notable exception is a horizontally-scrolling, single-line image list of images, such as a gallery.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike
Advanced image list
This example demonstrates "featured" items, using the rows and cols props to adjust the size of the item, and the gap prop to adjust the spacing.
The items have a customized titlebar, positioned at the top, and with a custom gradient titleBackground.
The secondary action IconButton is positioned on the left.
- Breakfast
- Tasty burger
- Camera
- Morning
- Hats
- Honey
- Vegetables
- Water plant
- Mushrooms
- Olive oil
- Sea star
- Bike