Image Grid

Image grid is a content style that takes a list of image links / buttons and displays it in a grid. It provides a consistent look and feel that is responsive, accessible and on brand.

Image grid example

Use Case

Intended for a group/list of images that are used as links, or a set of components that typically has an image, link, and a title. 

Example:

 

Usage

In the Rich Text Editor,

  1. Create an unordered list Unordered List Icon 
  2. Using the styles dropdown Styles Drodown, select either:
    • 3 Column Image Grid or 
    • 4 Column Image Grid
Image Grid Step 1
Steps 1 & 2. Creating an unordered list and adding the predefined image grid style. A box with a gray dotted border should appear once the image grid style has been applied to indicate a block item.
  1. With the cursor in the block, add an image using the image tool Image Button
  2. With the image highlighted, click on the link button Link Icon
  3. In the link options do the following: 
    1. In the Link Info Tab, enter your link destination
    2. Switch to the Advanced tab 
    3. In the Advisory Title field, enter the your desired text. This will be the text that will be displayed as the title.
    4. In the Stylesheets Classes field, enter image-grid-item  
    5. Click OK 
Image Grid Step 5
Step 5b - 5e. Configuring advanced settings on the link top add the item's title and class. The image item should now display the title in the approrpiate visual style.
  1. Move the insertion point to just past the first image and press enter to add another item to the list. You should see another block with gray dotted border appear. 
    • Note: Space may be limited while editing and maybe push some items into the next line. You can just continue as normal. Once saved, the page will always display either 3 or 4 items in a row, depending on the style chosen in Step 2.
  2. Repeat steps 3 to 6 for additional images or press enter a second time to end the list 

 

Best Practice

  • Use short and concise titles. For best results, stay within two lines of text
  • Avoid images that have the informational text on it. It is not accessible and may partially be cut off visually by the title component