List Module

Overview

The list module is typically used to create a list of links with two or more items. Supported paragraph styles are block, block light, bulleted, and numbered. Layout can be one to three columns. In addition to the required link title, each item can have a description.

There are two types of list modules in the WCMS: reusable and single-use. The single-use list provides a convenient way to add a basic list quickly to a Visual Composer page or module. The reusable list, however, is more robust and offers several advantages (in addition to reusability):

• Optional graphic (icon or image) for each list item, with two size options and multiple color options for icons
• Optional action button for the list as a whole
• Optional link on module header

More examples are provided at the bottom of this page. (Note also that “Related Topics” on the right is a list module.)

Usage

• Use a list module to group two to 20 related links.
• If you have a large number of links of different types — non-HTML files, internal pages, external gov pages, external non-gov pages — consider grouping by type in separate lists.
• To associate an icon or image to each list item, use a reusable list (rather than a single-use Visual Composer list).
• For a list of action items, consider using the “checkbox” style, which uses checkboxes as bullets.

Text

• Keep link titles and descriptions as brief as possible.
• Use consistent grammatical structures within the same list — for example, all complete sentences or all noun phrases for the descriptions.

Colors

• For big lists, use more subdued colors for the list background (the “box styles” option).
• Be careful when using boldly colored icons, particularly when using the large size in long lists.  And make certain that your lists meet the 508 guidelines for color contrast.  For more information, see the color contrast analyzer.
• The reusable list module currently allows icons of different colors in the same list. Generally, we do not recommend the mixing of icon colors this way.

Layout

• For lists with icons or images, use the block or block light paragraph style (not bulleted or numbered).
• Use images with the same aspect ratio.
• Refer to the presentation TP4 UX Best Practices [PPT – 14 MB] for general guidelines on color usage and layout.
• Preview in all viewports.

Linking

• The WCMS allows linking on module headers, but generally this is not recommended.  Use an action button instead if a link is needed for the whole list.
• Consider suppressing the link underlining, particularly when list items do not have descriptions (list Settings pop-up).
• Make icons  / images clickable (the “Graphics as Link” option).
• Follow CDC policy when linking to non-HTML files and external sites.

Examples

The list below demonstrates a two-column layout and the use of the checkbox-style bullet. Note that the checkbox is not interactive; it is used for visual effect.