Image Grid Block

Back to Style Guide

The Image Grid block is a repeatable block allowing any number of images to be shown in a grid. Each child block has a WYSIWYG editor, allowing a title, text and button to be added to each block. If only one child block is entered, it will expand to the full content width, but if more than one is added, all blocks will display at a 50% width. The vertical and horizontal gutters are consistent based on the theme sizing. A rollover effect can be chosen in the CMS, which will scale the image slightly (but not the overlaid content)  This can be set to ‘None’ to disable any rollover state.

Example One

This Image Grid is configure with four images. It has no rollover state, tint or overlay content.

Example Two

This Image Grid is configure with six images. The first image is configured with a white overlay, black text and a scale rollover, and the fourth image is configured with a black overlay, white text and a scale rollover. All other blocks are static and do not have any rollover, tint or overlay content.

Example Three

This Image Grid is configured with one image, and should expand to full width.

Example Four

This Image Grid is configured with three images, to demonstrate how it breaks on an odd number