FUSE
DOCS
Nextjs
Reference
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.
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
export default function StandardImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }} cols={3} rowHeight={164}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=164&h=164&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
},
];Quilted image list
Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios.
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
function srcset(image: string, size: number, rows = 1, cols = 1) {
return {
src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${size * cols}&h=${
size * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
export default function QuiltedImageList() {
return (
<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>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
author: '@arwinneil',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
cols: 2,
},
];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.
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
export default function WovenImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }} variant="woven" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=161&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
title: 'Bed',
},
{
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
title: 'Kitchen',
},
{
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
title: 'Sink',
},
{
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
title: 'Books',
},
{
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
title: 'Chairs',
},
{
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
title: 'Candle',
},
{
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
title: 'Laptop',
},
{
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
title: 'Doors',
},
{
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
title: 'Coffee',
},
{
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
title: 'Storage',
},
{
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
title: 'Coffee table',
},
{
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
title: 'Blinds',
},
];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.
import * as React from 'react';
import Box from '@mui/material/Box';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
export default function MasonryImageList() {
return (
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</Box>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
title: 'Bed',
},
{
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
title: 'Books',
},
{
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
title: 'Sink',
},
{
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
title: 'Kitchen',
},
{
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
title: 'Blinds',
},
{
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
title: 'Chairs',
},
{
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
title: 'Laptop',
},
{
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
title: 'Doors',
},
{
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
title: 'Coffee',
},
{
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
title: 'Storage',
},
{
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
title: 'Candle',
},
{
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
title: 'Coffee table',
},
];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
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import ListSubheader from '@mui/material/ListSubheader';
import IconButton from '@mui/material/IconButton';
import InfoIcon from '@mui/icons-material/Info';
export default function TitlebarImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }}>
<ImageListItem key="Subheader" cols={2}>
<ListSubheader component="div">December</ListSubheader>
</ImageListItem>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
subtitle={item.author}
actionIcon={
<IconButton
sx={{ color: 'rgba(255, 255, 255, 0.54)' }}
aria-label={`info about ${item.title}`}
>
<InfoIcon />
</IconButton>
}
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
author: '@bkristastucchio',
rows: 2,
cols: 2,
featured: true,
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
author: '@rollelflex_graphy726',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
author: '@helloimnik',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
author: '@nolanissac',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
author: '@hjrc33',
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
author: '@arwinneil',
rows: 2,
cols: 2,
featured: true,
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
author: '@tjdragotta',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
author: '@katie_wasserman',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
author: '@silverdalex',
rows: 2,
cols: 2,
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
author: '@shelleypauls',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
author: '@peterlaster',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
author: '@southside_customs',
cols: 2,
},
];Title bar below image (standard)
The title bar can be placed below the image.
- 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
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
export default function TitlebarBelowImageList() {
return (
<ImageList sx={{ width: 500, height: 450 }}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
title={item.title}
subtitle={<span>by: {item.author}</span>}
position="below"
/>
</ImageListItem>
))}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
author: '@bkristastucchio',
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
author: '@rollelflex_graphy726',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
author: '@helloimnik',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
author: '@nolanissac',
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
author: '@hjrc33',
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
author: '@arwinneil',
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
author: '@tjdragotta',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
author: '@katie_wasserman',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
author: '@silverdalex',
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
author: '@shelleypauls',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
author: '@peterlaster',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
author: '@southside_customs',
},
];Title bar below image (masonry)
- swabdesign
- Pavel Nekoranec
- Charles Deluvio
- Christian Mackie
- Darren Richardson
- Taylor Simpson
- Ben Kolde
- Philipp Berndt
- Jen P.
- Douglas Sheppard
- Fi Bell
- Hutomo Abrianto
import * as React from 'react';
import Box from '@mui/material/Box';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
export default function TitlebarBelowMasonryImageList() {
return (
<Box sx={{ width: 500, height: 450, overflowY: 'scroll' }}>
<ImageList variant="masonry" cols={3} gap={8}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
srcSet={`${item.img}?w=248&fit=crop&auto=format&dpr=2 2x`}
src={`${item.img}?w=248&fit=crop&auto=format`}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar position="below" title={item.author} />
</ImageListItem>
))}
</ImageList>
</Box>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110',
title: 'Bed',
author: 'swabdesign',
},
{
img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31',
title: 'Books',
author: 'Pavel Nekoranec',
},
{
img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6',
title: 'Sink',
author: 'Charles Deluvio',
},
{
img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3',
title: 'Kitchen',
author: 'Christian Mackie',
},
{
img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3',
title: 'Blinds',
author: 'Darren Richardson',
},
{
img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622',
title: 'Chairs',
author: 'Taylor Simpson',
},
{
img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77',
title: 'Laptop',
author: 'Ben Kolde',
},
{
img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61',
title: 'Doors',
author: 'Philipp Berndt',
},
{
img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7',
title: 'Coffee',
author: 'Jen P.',
},
{
img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee',
title: 'Storage',
author: 'Douglas Sheppard',
},
{
img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62',
title: 'Candle',
author: 'Fi Bell',
},
{
img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4',
title: 'Coffee table',
author: 'Hutomo Abrianto',
},
];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
import * as React from 'react';
import ImageList from '@mui/material/ImageList';
import ImageListItem from '@mui/material/ImageListItem';
import ImageListItemBar from '@mui/material/ImageListItemBar';
import IconButton from '@mui/material/IconButton';
import StarBorderIcon from '@mui/icons-material/StarBorder';
function srcset(image: string, width: number, height: number, rows = 1, cols = 1) {
return {
src: `${image}?w=${width * cols}&h=${height * rows}&fit=crop&auto=format`,
srcSet: `${image}?w=${width * cols}&h=${
height * rows
}&fit=crop&auto=format&dpr=2 2x`,
};
}
export default function CustomImageList() {
return (
<ImageList
sx={{
width: 500,
height: 450,
// Promote the list into its own layer in Chrome. This costs memory, but helps keeping high FPS.
transform: 'translateZ(0)',
}}
rowHeight={200}
gap={1}
>
{itemData.map((item) => {
const cols = item.featured ? 2 : 1;
const rows = item.featured ? 2 : 1;
return (
<ImageListItem key={item.img} cols={cols} rows={rows}>
<img
{...srcset(item.img, 250, 200, rows, cols)}
alt={item.title}
loading="lazy"
/>
<ImageListItemBar
sx={{
background:
'linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, ' +
'rgba(0,0,0,0.3) 70%, rgba(0,0,0,0) 100%)',
}}
title={item.title}
position="top"
actionIcon={
<IconButton
sx={{ color: 'white' }}
aria-label={`star ${item.title}`}
>
<StarBorderIcon />
</IconButton>
}
actionPosition="left"
/>
</ImageListItem>
);
})}
</ImageList>
);
}
const itemData = [
{
img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e',
title: 'Breakfast',
author: '@bkristastucchio',
featured: true,
},
{
img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d',
title: 'Burger',
author: '@rollelflex_graphy726',
},
{
img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45',
title: 'Camera',
author: '@helloimnik',
},
{
img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c',
title: 'Coffee',
author: '@nolanissac',
},
{
img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8',
title: 'Hats',
author: '@hjrc33',
},
{
img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62',
title: 'Honey',
author: '@arwinneil',
featured: true,
},
{
img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6',
title: 'Basketball',
author: '@tjdragotta',
},
{
img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f',
title: 'Fern',
author: '@katie_wasserman',
},
{
img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25',
title: 'Mushrooms',
author: '@silverdalex',
},
{
img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af',
title: 'Tomato basil',
author: '@shelleypauls',
},
{
img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1',
title: 'Sea star',
author: '@peterlaster',
},
{
img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6',
title: 'Bike',
author: '@southside_customs',
},
];