Skip to content

Image List

The Image List displays a collection of images in an organized grid.

Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.

Standard image list

Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and spacing.

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
        srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Quilted image list

Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios.

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
<ImageList
  sx={{ width: 500, height: 450 }}
  variant="quilted"
  cols={4}
  rowHeight={121}
>
  {itemData.map((item) => (
    <ImageListItem key={item.img} cols={item.cols || 1} rows={item.rows || 1}>
      <img
        {...srcset(item.img, 121, item.rows, item.cols)}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Woven image list

Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.

  • Bed
  • Kitchen
  • Sink
  • Books
  • Chairs
  • Candle
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Coffee table
  • Blinds
<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=161&fit=crop&auto=format`}
        srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Masonry image list

Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped peer content.

  • Bed
  • Books
  • Sink
  • Kitchen
  • Blinds
  • Chairs
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Candle
  • Coffee table
<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
    </ImageListItem>
  ))}
</ImageList>

Image list with title bars

This example demonstrates the use of the ImageListItemBar to add an overlay to each item. The overlay can accommodate a title, subtitle and secondary action - in this example an IconButton.

  • December
  • Breakfast
    Breakfast
    @bkristastucchio
  • Burger
    Burger
    @rollelflex_graphy726
  • Camera
    Camera
    @helloimnik
  • Coffee
    Coffee
    @nolanissac
  • Hats
    Hats
    @hjrc33
  • Honey
    Honey
    @arwinneil
  • Basketball
    Basketball
    @tjdragotta
  • Fern
    Fern
    @katie_wasserman
  • Mushrooms
    Mushrooms
    @silverdalex
  • Tomato basil
    Tomato basil
    @shelleypauls
  • Sea star
    Sea star
    @peterlaster
  • Bike
    Bike
    @southside_customs

Title bar below image (standard)

The title bar can be placed below the image.

  • Breakfast
    Breakfast
    by: @bkristastucchio
  • Burger
    Burger
    by: @rollelflex_graphy726
  • Camera
    Camera
    by: @helloimnik
  • Coffee
    Coffee
    by: @nolanissac
  • Hats
    Hats
    by: @hjrc33
  • Honey
    Honey
    by: @arwinneil
  • Basketball
    Basketball
    by: @tjdragotta
  • Fern
    Fern
    by: @katie_wasserman
  • Mushrooms
    Mushrooms
    by: @silverdalex
  • Tomato basil
    Tomato basil
    by: @shelleypauls
  • Sea star
    Sea star
    by: @peterlaster
  • Bike
    Bike
    by: @southside_customs

Title bar below image (masonry)

  • Bed
    swabdesign
  • Books
    Pavel Nekoranec
  • Sink
    Charles Deluvio
  • Kitchen
    Christian Mackie
  • Blinds
    Darren Richardson
  • Chairs
    Taylor Simpson
  • Laptop
    Ben Kolde
  • Doors
    Philipp Berndt
  • Coffee
    Jen P.
  • Storage
    Douglas Sheppard
  • Candle
    Fi Bell
  • Coffee table
    Hutomo Abrianto
<ImageList variant="masonry" cols={3} gap={8}>
  {itemData.map((item) => (
    <ImageListItem key={item.img}>
      <img
        src={`${item.img}?w=248&fit=crop&auto=format`}
        srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
        alt={item.title}
        loading="lazy"
      />
      <ImageListItemBar position="below" title={item.author} />
    </ImageListItem>
  ))}
</ImageList>

Custom image list

In this example 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. The gap prop is used to adjust the gap between items.

  • Breakfast
    Breakfast
  • Burger
    Burger
  • Camera
    Camera
  • Coffee
    Coffee
  • Hats
    Hats
  • Honey
    Honey
  • Basketball
    Basketball
  • Fern
    Fern
  • Mushrooms
    Mushrooms
  • Tomato basil
    Tomato basil
  • Sea star
    Sea star
  • Bike
    Bike