Image list
Image lists display 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.
<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.
<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.
<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.
<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@bkristastucchio
- Burger@rollelflex_graphy726
- Camera@helloimnik
- Coffee@nolanissac
- Hats@hjrc33
- Honey@arwinneil
- Basketball@tjdragotta
- Fern@katie_wasserman
- Mushrooms@silverdalex
- Tomato basil@shelleypauls
- Sea star@peterlaster
- Bike@southside_customs
- Breakfastby: @bkristastucchio
- Burgerby: @rollelflex_graphy726
- Cameraby: @helloimnik
- Coffeeby: @nolanissac
- Hatsby: @hjrc33
- Honeyby: @arwinneil
- Basketballby: @tjdragotta
- Fernby: @katie_wasserman
- Mushroomsby: @silverdalex
- Tomato basilby: @shelleypauls
- Sea starby: @peterlaster
- Bikeby: @southside_customs
- swabdesign
- Pavel Nekoranec
- Charles Deluvio
- Christian Mackie
- Darren Richardson
- Taylor Simpson
- Ben Kolde
- Philipp Berndt
- Jen P.
- Douglas Sheppard
- Fi Bell
- 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
- Burger
- Camera
- Coffee
- Hats
- Honey
- Basketball
- Fern
- Mushrooms
- Tomato basil
- Sea star
- Bike