Gallery mosaic

Grid preview of files

The gallery mosaic component provides a way of previewing images in a mosaic style based on the amount of elements, it currently supports a general file type and images.

Modern Gallery 1 item

employer-desktop.jpg

Project Title

Project Price

Discover more

Modern Gallery 2 items

section-feature.jpg

Project Title

Project Price

Discover more
section-feature.jpg

Project Title

Project Price

Discover more

Modern Gallery 3 items

employer-desktop.jpg

Project Title

Project Price

Discover more
section-feature.jpg

Project Title

Project Price

Discover more
section-feature.jpg

Project Title

Project Price

Discover more

Modern Gallery 4 items

gallery-6.png

Project Title

Project Price

Discover more
gallery-2.jpg

Project Title

Project Price

Discover more
gallery-3.jpg

Project Title

Project Price

Discover more
gallery-4.jpg

Project Title

Project Price

Discover more

Modern Gallery 5 or more items

gallery-1.jpg

Project Title

Project Price

Discover more
gallery-2.jpg

Project Title

Project Price

Discover more
gallery-3.jpg

Project Title

Project Price

Discover more
gallery-4.jpg

Project Title

Project Price

Discover more

Reverse Gallery

gallery-1.jpg

Project Title

Project Price

Discover more
gallery-2.jpg

Project Title

Project Price

Discover more
gallery-3.jpg

Project Title

Project Price

Discover more
gallery-4.jpg

Project Title

Project Price

Discover more
Inputs
galleryItems : readonly GalleryItem[]
centerContent ?: boolean = false
forceRectangleMedium ?: boolean = false

Forces the cover items to be rectangular

imageSizes ?: string
interactiveContent ?: boolean = false
isGalleryItemsDownloadable ?: boolean = true
isViewerEnabled ?: boolean = false
itemSpacing ?: "xxxsmall" | "xxsmall" | "xsmall" = 'xxxsmall'

Total spacing between each gallery item

loadMethod ?: PictureLoadMethod

This variable defines how an image is to be loaded

maxWidth ?: number
pictureObjectFit ?: PictureObjectFit
reverseGallery ?: boolean = false

This input only works when `forceRectangleMedium` is applied

roundGalleryCorners ?: RoundCornerType

Rounds the gallery's container or item corners

singleImageFit ?: SingleImageFit = 'cover'

How a single image should fit in the container.

textSize ?: TextSize
textSizeDesktop ?: TextSize
textSizeTablet ?: TextSize
usingFastlyIO ?: boolean = false
zoomOnHover ?: boolean = true
Outputs
openItem ?: any = new EventEmitter<number>()