Skip to Content

All University of South Carolina system institutions will be closed through the end of the spring semester. Columbia campus virtual instruction will continue through the end of the Summer II semester (Aug 1). Details can be found on the coronavirus landing page.

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

     

     

 

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

  • 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.

©