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.
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.
In the Rich Text Editor,
- Create an unordered list
- Using the styles dropdown , select either:
- 3 Column Image Grid or
- 4 Column Image Grid
- With the cursor in the block, add an image using the image tool
- With the image highlighted, click on the link button
- In the link options do the following:
- In the Link Info Tab, enter your link destination
- Switch to the Advanced tab
- In the Advisory Title field, enter the your desired text. This will be the text that will be displayed as the title.
- In the Stylesheets Classes field, enter
- Click OK
- 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.
- Repeat steps 3 to 6 for additional images or press enter a second time to end the list
- 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