components

Use:

When listing a collection of high priority, static content which requires more visual impact and descriptive text than a Link List can provide.

Don't use:

To list simple related content. A List Nav should contain content that is meant to be a main focal point of a page. Static related content should be given a less visually impactful treatment by using a link list.

Visual Style:

Each Item in a List Navigation is made up of five elements: Image, Title, Hammer, Description, and Links.

1. Image: Has the option of acting as a link, but if there are other links in the list item, linking the image may not be necessary. There are four image configuration options: Vertical, horizontal, large square, and small square. Only one image configuration can be used in a single list.
2. Title: Has the option of acting as a link, but if there are other links in the list item linking the title may not be necessary. It is suggested that linking or non-linking titles be consistent across a List Navigation.
3. Hammer: An optional element which can be used to communicate either date or source information if it is relevant. The hammer is commonly used when listing publications.
4. Description: A brief overview of the item being listed.
5. Links: An optional component, but are often used when there are more than one relevant page and/or document pertaining to a list item. This is common with reports, which often come in multiple languages and have downloadable data tables.

Editorial:

It is important that the content of a List Navigation item be short and clear. The Title must be unambiguous and should reflect the title of the destination page(s) or content. The description should be a brief overview of the destination page(s), and should provide enough information to effectively introduce the subject of the list item.

Responsiveness:

On mobile devices, the description and links will wrap around the image to maximize available space.