Skip to content

🎉 v5 beta is out! Head to the v5 documentation to get started.

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.

  • Breakfast
  • Tasty burger
  • Camera
  • Morning
  • Hats
  • Honey
  • Vegetables
  • Water plant
  • Mushrooms
  • Olive oil
  • Sea star
  • Bike
<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
  • Breakfast
    Breakfast
    by: jill111
  • Tasty burger
    Tasty burger
    by: director90
  • Camera
    Camera
    by: Danson67
  • Morning
    Morning
    by: fancycrave1
  • Hats
    Hats
    by: Hans
  • Honey
    Honey
    by: fancycravel
  • Vegetables
    Vegetables
    by: jill111
  • Water plant
    Water plant
    by: BkrmadtyaKarki
  • Mushrooms
    Mushrooms
    by: PublicDomainPictures
  • Olive oil
    Olive oil
    by: congerdesign
  • Sea star
    Sea star
    by: 821292
  • Bike
    Bike
    by: 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
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    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
    Breakfast
  • Tasty burger
    Tasty burger
  • Camera
    Camera
  • Morning
    Morning
  • Hats
    Hats
  • Honey
    Honey
  • Vegetables
    Vegetables
  • Water plant
    Water plant
  • Mushrooms
    Mushrooms
  • Olive oil
    Olive oil
  • Sea star
    Sea star
  • Bike
    Bike