Introduction Foundations Components Patterns Directives Pipes Motion Brand

Components

Structure

Title card

Alerts & notifications

Banner alert Banner announcement Floating action Toast alert

Buttons & actions

Button Link Pull refresh Share buttons Share link Social buttons Split button Toggle buttons

Cards

Card Widget

Forms

Checkbox card Checkbox File select Input Label Location input Multi select Multiple location input Radio Search Select Slider Smart textarea Textarea Toggle

Gallery / images / media

Gallery mosaic

Icons / images / media

Animated svg File viewer Icon Image cropper

Layouts

Container Grid Page layout Table

Navigation

Breadcrumbs Pagination Tabs

Popups / overlays

Callout Drawer Dropdown filter Highlight Modal More options Tooltip

Progress & loading indicators

Countdown timer Loading text Progress bar Progress steps Spinner

Tags

Tag

Typography

Heading Hr

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.
Contents
Default Interactive content Item spacing Rounded corners Single image fit
Setting roundGalleryCorners to RoundCornerType.CONTAINER rounds only the gallery's container corners.
Modern Gallery 5 or more items
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
Setting roundGalleryCorners to RoundCornerType.ITEM rounds the each gallery item corner.
Modern Gallery 5 or more items
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
Modern Gallery 5 or more items with interactive content
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
forceRectangleMedium Modern Gallery 5 or more items with interactive content
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
gallery-5.jpg
Project Title
Project Price
Discover more
Loading preview
Permission granted for Geolocation.
Your login session has expired and you have been logged out. Please log in again.