List Module

Best Practices

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 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.
Specialized Module - Link List Module

The List Module is flexible and can be used in many ways.  A variation of the List Module, the Link List Module, is available as a separate module if you need to quickly create a list with the express purpose of site navigation.  Adapted to use special styling, the Link List Module organizes navigation links uniformly.  The best use of this module is to guide page users to additional pages of interest or related topics without searching or scrolling left navigation.  To populate the list, simply toggle each item’s options in the module and fill the two entry fields for each item.

Example Link List Module - 1 Column

Examples

  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem 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)
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 3
    Lorem 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 5
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 6
    Lorem 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 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 3
    Lorem 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 5
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, necessitatibus dicta ipsa quidem architecto numquam.
  • List Item 6
    Lorem 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)
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 1
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 2
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • List Item 3
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.