Visual List Example

Here’s an example of how to present content on a visual list page.

Repeatable Visual List Solution

Some content contributors have expressed a need for a visual list with brief explanatory text for a number of different purposes. For pages requiring a visual list please use the “Repeatable Visual List” design snippet. The Repeatable Visual List snippet provides you with an opportunity to add a left justified photo, header text, a single descriptive paragraph and an optional hyperlink.

Tiger tooth pattern

Header

Add brief descriptive text here. This snippet allows for one paragraph of text only. Line breaks are not possible with the Repeatable Visual List snippet.

Optional Link
Tiger tooth pattern

Header

Add brief descriptive text here. This snippet allows for one paragraph of text only. Line breaks are not possible with the Repeatable Visual List snippet.

Optional Link

Image Block Left/Right (w/ Caption) Solution

Another solution for a visual list is required when headers are needed to break up sections of the page. When you need to add a categorical header for a grouping of list items it is best to use the Image Block Left (or Right). From within the snippet you will resize the image within the “dimension” row in the insert/edit image pop-up to 200 x 200. You can then add body copy below the snippet. You can add a title for your list item as an H4, hit enter to add descriptive text, hit enter again to add an optional link, and then add a horizontal line as a visual divider for each item. Here is an example of a presentation of this type of content:

Categorical Header Styled as an H2

Tiger tooth pattern

List Header Styled as an H3

Add brief descriptive text here for this list item.

Optional Link


Tigertooth pattern

List Header Styled as an H3

Add brief descriptive text here for this list item.

Optional Link