Link List

Overview

The link list module is an alternative to the list module for creating a list of links with two or more items.  Link list settings are streamlined and support text or text and icon configurations.   Styling options also differ from the list module.  Icons and links are selected directly in the settings window. Layout can be set to one or two columns.

The link list module provides a convenient way to add a basic list quickly to a Visual Composer page. Icon color is selected in the color tab, and the background color is defaulted to white.

More examples are provided at the bottom of this page.

Usage

• Use a link 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, simply select Icon from the item type dropdown and the desired icon for each item.

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 icons.
• 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 on contrast ratios, see the color contrast analyzer.

Layout

• One or two columns can be selected.  Select the option that best suits the module’s placement on the page.
• Refer to the presentation TP4 UX Best Practices [PPT – 14 MB] for general guidelines on color usage and layout.
• 2 Columns will automatically adjust to one in smaller viewports so make sure to preview in all viewports.

Linking

• Follow CDC policy when linking to non-HTML files and external sites.

Examples