Icon Boxes
Creating An Icon Box
Many fields are self explanatory and will not be addressed in this documentation. This documentation will focus on tips, best practices and explanation of fields that generally need some clarification.
- Determine where the Cell will be used.
- In the Dashboard, select Cells in either the top or left-hand navigation.
- If you do not see this option, then the ºÚÁÏÍøSOM Cells plugin needs to be activated.
- Select the Add New button.
- Cell Name: provide a descriptive name so that site editors understand the purpose or placement of the cell. This field does not display anywhere other than in the Dashboard where it lists all Cells for a website.
- Layout: Repeatable Boxes
- Box Category: Icon Link Boxes
- Box Style: Icon Box
- Define the base settings:
- Primary Heading ²¹²Ô»åÌýPrimary Text: heading and text fields that display above the icon boxes.
- Add Title Accent Underline: show or hide the short yellow accent line that displays under the Primary Heading.
- Background Color Options: choose the color of the icons
- Include Link (Global): selecting Yes will provide you with the choice of adding an optional link per box.
- Column Layout: choose the number of columns in which the icon boxes will be arranged.
- The four column layout only works on pages without left-hand navigation (e.g.: a web site’s home page). This is to prevent the content from getting too squished. Look at the examples to see what it looks like on a page with and without left-hand navigation.
- For each box:
- Select the Add New Box button.
- Icon: click the Valid Icons link below the field to browse the available icon options. You can also reference our short list of popular icons for School of Medicine websites. Once you’ve selected an icon, add it’s name to the Icon field in Cells.
- Box Heading: this is the main heading of the icon box. Provide a clear indication of the topic of the box.
- Box Text: this is the description within the icon box. Provide additional information related to the box heading.
- Include Link (Box): each box has the option of linking to a webpage.
- More Link Text: this is the text that appears in the button at the bottom of the icon box. Provide a short description of where the box links to. This field is restricted to 30 characters. Ensure the text you add is meaningful and descriptive – view our accessibility documentation for more information. This option only appears if you select Yes to Include Link.
- Click the Create Cell button.
- If you’re ready, you can display the Cell on your website.