Image Caption Grids

We have a two-column component consisting of an image and a caption. The background color is editable. These can be used individually or can be stacked so you can have a grid of images and captions. They responsively scale for tablet and mobile and have background color variations- one subtle and the other more colorful. These work well to elevate and draw attention to key messaging or achievements. If you add a link, you can also use these as teasers to content found elsewhere on your website.

To implement this component on your page: While you are on the page you wish to edit, click on the little [+] icon at the top left of your page. Type “quote” in the Block search field to filter all blocks by “quote”. Select the desired reusable quote block. The quote component will load into your page. Click on the block you just loaded. The name of the block will show up over a light gray band above the block. Click on the three vertical dots […] and select “convert to regular block.” You are now ready to edit the quote placeholder text with your text.

Two columns, Caption, and image on light background


Reusable Block Name: Grid__ Image Caption Grid– with Light Background

The following blocks are the same with the “flip column” feature chosen.

This block is available with a light background individually.

This time the image is to the right. Nice to have this flexibility.

It is also available as a stacked component.

This time the image is to the right. Nice to have this flexibility.

This time the image is to the left. Nice to have this flexibility.

This time the image is to the right. Nice to have this flexibility.

Two columns, Caption, and image on light background


Reusable Block Name: Grid__ Image Caption Grid– with colorful background

This reusable block has a colorful background behind the text caption. You can edit the background color in “Color Settings/Background Color”. To use this block, click on the little [+] icon at the top left of your page. Type “Grid” in the Block search field to filter all blocks by “Grid”. Select the block “Grid__ Image Caption Grid– with colorful background”. The block will load into your page. Click on the block you just loaded. The name of the block will show up over a light gray band above the block. Click on the three vertical dots […] and select “convert to regular block.” You are now ready to update the image, the text caption and the background color. Just replace text and images as needed. To change the background color, click on the block to activate it and then select the background color in the right sidebar of the Admin page under “Color Settings/Background Color”.

This block is also available individually.

Architectural detail

We also have preselected palette colors that provide some more options for backgrounds.

And in a grid of stackable components.

We also have preselected palette colors that provide some more options for backgrounds.

This light blue is another background option.

All of the image text lockups can have descriptive text, if so desired.

Students in the Integrative Health program at UVM

We also have preselected palette colors that provide some more options for backgrounds.

Skip to toolbar