Skip to Content

Communications and Public Affairs

Simple List

The simple list is the most commonly used menu element in our CMS. The goal of this snippet is to present a series of information in a pleasing format with images and brief text.

  • Using Simple Lists

    The simple list element is a visually appealing way to present a list of items that may or may not link to other content. It provides ample room for clear explanation that can preclude additional pages or that can put lower-level pages in proper context.

    This is the most flexible of our list elements in that you can use 124-pixel square images or not, can have links or not and can use with a callout or not. Each list item must have a headline and a single paragraph of text, and if you choose to add a link, the entire item becomes a button.

    As always, remember: consistency is the key. All items in the list should have images, or none should; all the items should be links, or none should. Keep descriptions about the same length and preferably the depth of the image, if using images. Simple lists automatically use heading 4s, so you will need to use a heading 3 before each list to preserve the university's guidelines for accessible heading hierarchy on the Digital Accessibility site.

  • Simple List Example

     

     

 

Formatting Simple Lists

Simple lists can be used with or without a 124 x 124 px image. Be sure to follow accessibility guidelines on the Digital Accessibility site for all images in simple lists.

  • Simple List with Images
     
  • Simple List without Images
     

Simple lists can be used with or without images and have callouts on the same page. 

  • simple list with images and callouts
     
  • Simple list with callouts
     

Simple lists can be used without links to give you a structured list. This can also be a good way to use images within your main content region. It works well for identifying people or places. 

  • simple list without links
     
  • Simple lists with images and without links
     

 

  •  

    Simple lists can be stacked on top of each other with headers and/or paragraphs in between. When using a subheader as a label on top of a simple list, use an H3 since the simple list item titles are H4s. 

  • Multiple Simple lists
     
Best practice

Using Images

When adding images to your simple list, use a detail of the banner on the next page for your thumbnail when possible. This gives the reader a visual reference to the item initially clicked. 

 


Challenge the conventional. Create the exceptional. No Limits.

©