Image List

Image lists display a collection of images in an organized grid. They are best suited for presenting homogeneous data, typically images, and optimize for responsive behavior.

<x-mbc::image-list>
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/1/400/300" 
        alt="Random image 1" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/2/400/300" 
        alt="Random image 2" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/3/400/300" 
        alt="Random image 3" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/4/400/300" 
        alt="Random image 4" 
    />
</x-mbc::image-list>

Standard Image List link

The standard image list displays images in a responsive grid layout. Each image maintains its aspect ratio within the grid cells.

<x-mbc::image-list>
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/10/400/300" 
        alt="Landscape photo" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/11/400/300" 
        alt="Nature photo" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/12/400/300" 
        alt="Architecture photo" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/13/400/300" 
        alt="City photo" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/14/400/300" 
        alt="Travel photo" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/15/400/300" 
        alt="Wildlife photo" 
    />
</x-mbc::image-list>

Note: The standard layout creates a responsive grid that adapts to screen size. Images are displayed in a consistent grid pattern.

Image List with Labels link

Add descriptive labels to images using the label prop. Labels appear below each image as captions.

Mountain Vista
Ocean Sunset
Forest Trail
Urban Skyline
Desert Landscape
Hidden Waterfall

<x-mbc::image-list>
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/20/400/300" 
        alt="Mountain landscape"
        label="Mountain Vista" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/21/400/300" 
        alt="Ocean sunset"
        label="Ocean Sunset" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/22/400/300" 
        alt="Forest path"
        label="Forest Trail" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/23/400/300" 
        alt="City skyline"
        label="Urban Skyline" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/24/400/300" 
        alt="Desert dunes"
        label="Desert Landscape" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/25/400/300" 
        alt="Waterfall"
        label="Hidden Waterfall" 
    />
</x-mbc::image-list>

Tip: Labels help users understand the content of each image. They're especially useful for galleries, portfolios, or product catalogs.

Masonry Layout link

The masonry layout creates a Pinterest-style grid where images of varying heights flow naturally. Use variant="masonry" to enable this layout.

Portrait Shot
Vertical View
Square Format
Wide Angle
Medium Height
Landscape Mode

<x-mbc::image-list variant="masonry">
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/30/400/300" 
        alt="Portrait image"
        label="Portrait Shot" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/31/400/600" 
        alt="Tall image"
        label="Vertical View" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/32/400/400" 
        alt="Square image"
        label="Square Format" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/33/400/250" 
        alt="Wide image"
        label="Wide Angle" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/34/400/500" 
        alt="Medium tall image"
        label="Medium Height" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/35/400/350" 
        alt="Landscape image"
        label="Landscape Mode" 
    />
</x-mbc::image-list>

Note: Masonry layout works best when images have varying aspect ratios. It creates a dynamic, Pinterest-style arrangement that optimizes vertical space.

Text Protection link

When using labels over images, enable text protection with withTextProtection to add a dark scrim overlay. This ensures labels remain readable over any image.

Bright Landscape
Light Background
High Contrast
Soft Colors
Bright Scene
Light Tones

<x-mbc::image-list :withTextProtection="true">
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/40/400/300" 
        alt="Bright landscape"
        label="Bright Landscape" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/41/400/300" 
        alt="Light colored photo"
        label="Light Background" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/42/400/300" 
        alt="White subject"
        label="High Contrast" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/43/400/300" 
        alt="Pastel colors"
        label="Soft Colors" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/44/400/300" 
        alt="Bright scene"
        label="Bright Scene" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/45/400/300" 
        alt="Light tones"
        label="Light Tones" 
    />
</x-mbc::image-list>

Tip: Text protection adds a semi-transparent dark gradient overlay at the bottom of each image, ensuring white text labels remain legible regardless of the image content.

Clickable Images link

Make images clickable by adding the href prop. This converts the image container to a link, making the entire image area interactive.

View Product 1
View Product 2
View Product 3
View Product 4
View Product 5
View Product 6

<x-mbc::image-list>
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/50/400/300" 
        alt="Product 1"
        label="View Product 1"
        href="https://example.com/product-1" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/51/400/300" 
        alt="Product 2"
        label="View Product 2"
        href="https://example.com/product-2" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/52/400/300" 
        alt="Product 3"
        label="View Product 3"
        href="https://example.com/product-3" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/53/400/300" 
        alt="Product 4"
        label="View Product 4"
        href="https://example.com/product-4" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/54/400/300" 
        alt="Product 5"
        label="View Product 5"
        href="https://example.com/product-5" 
    />
    <x-mbc::image-list-item 
        src="https://picsum.photos/seed/55/400/300" 
        alt="Product 6"
        label="View Product 6"
        href="https://example.com/product-6" 
    />
</x-mbc::image-list>

Tip: Clickable images are perfect for product galleries, portfolio items, or any scenario where users should be able to navigate to a detail page. Hover over the images above to see the interactive effect.

Properties link

mbc::image-list link

Name	Type	Default	Description
`slot`	`html`		Image list items
`variant`	`string`	`standard`	Layout variant: standard, masonry
`withTextProtection`	`boolean`	`false`	Add dark scrim overlay to protect text labels

mbc::image-list-item link

Name	Type	Default	Description
`alt`	`string`	`null`	Image alt text for accessibility
`href`	`string`	`null`	Optional link URL to make the image clickable
`label`	`string`	`null`	Image caption/label displayed below the image
`src`	`string`	`null`	Image source URL

References link

Edit this page