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.

  • 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 List Example

 

With Images

Simple lists can be used with or without a 124 x 124 px image.

  • Simple List with Images
  • Simple List without Images
With Callouts

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
Without Links

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

 

Multiple Simple Lists on a Page
  • 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.