Link List

Synopsis: The link list component is a component that allows authors to create a list of related links within a page. It has 3 display variations:  Title Only, Eyebrow with Title, Title with Copy.

Content Fields:

Title, Eyebrow, Copy, Link Path

Options: 

Variation: Title Only, Eyebrow with Title, Title with Copy.

Title Color: Fiserv color palette.

Eyebrow Color: Fiserv color palette.

Copy Color: Fiserv color palette.

Background Color: Fiserv color palette.

Hover Background Color: Fiserv color palette.

Link Target: Same Tab, New Tab.

Link Icon: Arrow, Download.

Usage: All pages.

Note: This should be used as an example only. There will be additional requirements related to each individual component usage and page design, such as font treatments, padding and margin requirements, ADA compliance etc, so please use the below examples for reference only to demonstrate core function.

Scenario 1

Title Only

Ingredients: 1 Container, 1 Link List Component

This use case involves an outside container set to full width to allow the link list component to extend edge-to-edge. In this example the background color is set to Primary Black for all links. The last link is defined as a download link.

Scenario 2

Eyebrow with Title

The eyebrow with title variation shows the the eyebrow and title only.

Ingredients: 1 Container, 1 Link List Component

This use case involves an outside container set to full width to allow the link list component to extend edge-to-edge. The hover state in this example is set to various colors.