Introduction Foundations Components Directives Pipes Motion Brand

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Animated svg File viewer Gallery mosaic Icon Image cropper

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Components Icons / images / media Gallery mosaic

Gallery mosaic

Mosaic grid previews of images and other files, laid out by item count

Contents

Interactive content
Item spacing
Rounded corners
Single image fit

Modern Gallery 1 item

employer-desktop.jpg

Modern Gallery 2 items

section-feature.jpg
section-feature.jpg

Modern Gallery 3 items

employer-desktop.jpg
section-feature.jpg
section-feature.jpg

Modern Gallery 4 items

gallery-6.png
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

DEFAULT Modern Gallery 5 or more items

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

Reverse Gallery

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

forceRectangleMedium Modern Gallery 5 or more items

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg
gallery-5.jpg

forceRectangleMedium Reverse Gallery

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg
gallery-5.jpg
Inputs
galleryItems : readonly GalleryItem[]
autoPlayVideos ?: boolean = true

Only applies with `inlineVideos`.

centerContent ?: boolean = false
forceRectangleMedium ?: boolean = false

Forces the cover items to be rectangular

imageSizes ?: string
inlineVideos ?: boolean = false

When true, VIDEO items render inline playback instead of a file icon preview

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

Total spacing between each gallery item

linkEntireTile ?: boolean = false

When true with `interactiveContent`, the image/video area links to `galleryItem.link` (default `/post-project`) including `queryParams`.

loadMethod ?: PictureLoadMethod

This variable defines how an image is to be loaded

maxHeight ?: number

Caps the gallery at this height. Requires `maxWidth`.

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
useExternalViewer ?: boolean = false

When true, a tile click emits `openItem` but does NOT open the component's own internal media viewer, letting the host own a single shared viewer. `isViewerEnabled` still controls the clickable affordance.

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