An icon grid is often added to a site’s homepage or within a leading section in the main menu.

It consists of icons and subheaders that are links out to significant internal and external content. An icon grid is a useful way to highlight essential or popular content as well as add an engaging design pattern to your site’s aesthetic.

There are three parts to adding an icon grid, first you create the promotions, then you add the promotions to a list, and then you add the list widget to a region in your section.

As a section manager or webmaster…

Part 1: Create a promotion

1. Go to ‘Create’ icon in the workbar and select ‘Promotion’ in the dropdown menu
2. Add title, body (brief explanation), and relate to section
3. Add your image and crop to an aspect ratio of 1:1
4. Select ‘Apply Crop’
5. Add link internal or external URL to ‘Add link’ field
6. Add ‘Owner’
7. Change Workflow State to Published
8. Save

Repeat this process until you have all of your icons added that you want to appear in your grid.

Part 2: Create a list

1. Go to ‘Create’ icon in the workbar and select ‘List’ in the dropdown menu
2. Add title, body, and relate to section
3. With ‘Content’ selected, search for and select each promotion you added in the order you want them to appear
4. If you want a different title to appear beneath each icon, add title in ‘Title (optional)’
5. Repeat 3 and 4 until you have added all of your promotions
6. Change Workflow State to Published
7. Save

Part 3: Add list widget to section

1. Go to the section you want the icon grid to appear
2. Select ‘Edit’, ‘Widgets’
3. In the appropriate region, select ‘Add widget’ icon
4. Search for and select ‘List’ widget
5. In widget settings, override title with nothing
6. Change items in row to 3 instead of 2
7. In ‘Enter list title’ field, type the title of the list you created and select it from the list that appears
8. In ‘Design’ tab, on the right hand side, select ‘Grid style’
9. Ignore ‘Targeting’ if you want everyone to see the icon grid
10. Select ‘Finish’
11. Select ‘Show preview’ to review that the icon grid is working as expected
12. Save