{"id":1000,"date":"2024-01-18T21:31:58","date_gmt":"2024-01-18T21:31:58","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/doc-central\/?page_id=1365"},"modified":"2024-01-18T21:31:58","modified_gmt":"2024-01-18T21:31:58","slug":"icon-list","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/commencement\/blocks\/icon-list\/","title":{"rendered":"Icon List"},"content":{"rendered":"\n

The icon list block allows you to highlight important calls to action by adding graphical elements to the page. It should be used when there are multiple calls to action or resources for a user to choose from, not just a single option.<\/p>\n\n\n\n

Maximum of 5 items<\/h3>\n\n\n\n

You can add up to 5 icons when the block is displayed in a horizontal row. <\/p>\n\n\n\n

\n
<\/div>
Meet our staff<\/a><\/div><\/div>\n\n\n\n
<\/div>
Sign up for our mailing<\/a><\/div><\/div>\n\n\n\n
<\/div>
Make a gift<\/a><\/div><\/div>\n\n\n\n
<\/div>
Review graduation requirements<\/a><\/div><\/div>\n\n\n\n
<\/div>
Register for our newsletter<\/a><\/div><\/div>\n<\/div>\n\n\n\n

Link can appear to the right of icon<\/h3>\n\n\n\n

In the right-hand block editor, you have the option to put link to the right of the icon as seen below. This is useful in filling horizontal space when there is 1-3 icons or if each icon has limited link text. Select the icon list block as a whole and click the “Toggle link to the right of the icon” button to enable this layout change across all icons in the block.<\/p>\n\n\n\n

\n
<\/div>
This one has a link to the right<\/a><\/div><\/div>\n\n\n\n
<\/div>
When I add a second, it is automatically aligned<\/a><\/div><\/div>\n\n\n\n
<\/div>
The others in this row automatically go to the right once the toggle is on<\/a><\/div><\/div>\n<\/div>\n\n\n\n

Single item has less impact<\/h3>\n\n\n\n

It is generally best to use the Icon List block when displaying multiple links. If only one is used, it is wise to place the block within a column and toggle the link to the right. Below is how it will appear if the block is used on its own with only one item.<\/p>\n\n\n\n

\n
<\/div>
One icon by itself leaves quite a bit of unused space within the layout<\/a><\/div><\/div>\n<\/div>\n\n\n\n

Block can be placed within column<\/h3>\n\n\n\n

Icon list blocks that are placed inside columns automatically display the link to the right of the icon. This helps to create a consistent look and enable the links to be more easily scanned by users. It is also a great option when pairing the links with other content side-by-side for context. <\/p>\n\n\n\n

\n
\n
\n
<\/div>
Call to action here<\/a><\/div><\/div>\n\n\n\n
<\/div>
The icons automatically stack vertically if added in a column<\/a><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Relevant content<\/h3>\n\n\n\n

Other blocks can be displayed in columns next to links to help give context.<\/p>\n<\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

How to use the icon list block<\/h2>\n\n\n\n
    \n
  1. Insert the icon list block on the page where you’d like it to span the width of the page. \n