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.
-
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.
-
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 lists can be used with or without images and have callouts on the same page.
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 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.
-
