Masonry component

With this component you can display small pieces of content in tiles within a responsive grid system.

Examples

Image gallery

Large image

image-gallery-image

Image

image-gallery-image

Long image

image-gallery-image

Image

image-gallery-image

Wide image

image-gallery-image

Image

image-gallery-image

Image

image-gallery-image

List of articles

This is an article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, risus vitae dictum facilisis, eros dui eleifend dui, a consectetur ante erat finibus augue.

Cras eget eleifend odio, ac elementum quam. Morbi vestibulum iaculis nibh rutrum pellentesque.

This is an article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, risus vitae dictum facilisis, eros dui eleifend dui, a consectetur ante erat finibus augue.

This is an article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, risus vitae dictum facilisis, eros dui eleifend dui, a consectetur ante erat finibus augue.

This is an article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, risus vitae dictum facilisis, eros dui eleifend dui, a consectetur ante erat finibus augue.

Highlighted article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, risus vitae dictum facilisis, eros dui eleifend dui, a consectetur ante erat finibus augue.

Larger article

Lorem ipsum dolor sit ametFusce tempor nulla sed blandit volutpat. Morbi mollis nisl ultricies, feugiat odio sit amet, gravida augue. Etiam diam est, venenatis vitae augue at, malesuada porttitor lorem. Sed nec tortor vel ex vestibulum elementum id ac mauris. Maecenas nec libero maximus, rhoncus erat vitae, facilisis tortor. Etiam id tristique metus, vitae gravida nunc. Proin laoreet, sapien laoreet fermentum ullamcorper, justo sem consequat elit, ac sollicitudin nibh justo eget ante. Integer cursus tellus ac tellus fermentum finibus. Phasellus ligula risus, hendrerit sit amet tristique non, varius ut lorem. Nulla tincidunt, orci non placerat maximus, lorem libero euismod arcu, id maximus ligula orci et neque. Phasellus non urna dapibus, rutrum arcu vitae, condimentum risus. Nam nunc magna, blandit quis augue a, placerat fermentum ipsum.

Customization options

Color

The tiles can be customized using five distinct background colors: light, white, black, dark and primary.

Background: light (default)

Background: white

Background: black

Background: dark

Background: primary

Size

The tiles can be customized using four different sizes: normal, vertical, horizontal and large.

Size: normal (default)

Size: large

Size: vertical

Size: normal (default)

Size: horizontal

Size: normal (default)

Size: normal (default)

Masonry tiles with background images with text on top

Title on top of masonry file

Text on top of masonry tile

Masonry tiles with background images and gradients

Gradient to the left

Gradient to the right

Gradient to the top

Gradient to the bottom