List Module

List Module

Best Practices

Updated Feb. 26, 2021

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.

List Header (Reusable List)

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 analyzerexternal icon.
  • 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 icon[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.
  • photo icon

    Go to ExamplesSee examples on this page that illustrate key options.

Examples

  • clothes icon

    List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • edit icon

    List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • book icon

    List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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.

Checkbox-Style List (with Action Button)
  • Square IconList Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • Square IconList Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • Square IconList Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • Square IconList Item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • Square IconList Item 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • Square IconList Item 6Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
Large Icons (with Icons as Links)
List in "Light Block" Paragraph Style
  • List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 5Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 6Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
Large Icons (with Icons as Links)
Block List with Header in Main Theme (Primary Color)
  • clothes icon

    List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • edit icon

    List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • book icon

    List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • clothes icon

    List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • edit icon

    List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • book icon

    List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • clothes icon

    List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • edit icon

    List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • book icon

    List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • clothes icon

    List Item 1Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • edit icon

    List Item 2Lorem ipsum dolor sit amet, consectetur adipisicing elit.

  • book icon

    List Item 3Lorem ipsum dolor sit amet, consectetur adipisicing elit.