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 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} > < imgsrc = { ` ${ 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 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 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} > < imgsrc = { ` ${ 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 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} > < imgsrc = { ` ${ 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 > 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.
The title bar can be placed below the image.
< ImageList variant = " masonry" cols = { 3 } gap = { 8 } > { itemData. map ( ( item ) => (
< ImageListItem key = { item. img} > < imgsrc = { ` ${ 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 > 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.