The information on this page relates to beta testing within the DXP

This documentation includes information for selected beta testers within the DXP. DO NOT use this unless you have been instructed to do so.

Link list

Use the link list component to present users with a list of suitable next best actions or content. Link lists can surface related content or options for a user to also explore based on the current context.

Add the component to your page

When you are editing your page using page-builder:

  1. Add a component to your page by clicking the widgets Add component button or by adding a content block (by clicking the add_circle button) then clicking the add component button.

  2. Locate the link list Squiz core component within the component browser and then click the select button.

    link list component select

  3. This will add the link list component to your page.

link list fields
  1. The add_circle Add button allows you to add additional items to your link list. When the component loads you will have an unpopulated item that you can fill in (see Link configuration)

  2. (Optional) This allows you to add a unique ID into the HTML markup to the instance of the component so that you can add custom styling and functionality using CSS and javascript respectively.

  3. (Optional) This allows you to add a class into the HTML markup to the instance of the component so that you can add custom styling and functionality using CSS and javascript respectively.

Link configuration

The following options can be used to configure each link:

link list item fields
  1. Choose between linking to a Matrix asset, or a user-defined link.

  2. Depending on what link type you select you will see one or two fields to specify your link.

    Matrix asset

    This is displayed for Matrix asset picker links and allows you to choose the CMS page to which your card links.

    Text

    This is displayed for user-specified links and defines the link text.

    URL

    This is displayed for user-specified links and defines the link URL.

  3. This controls how the link is opened when you click it. For example, open on a new page.

Basic example

This image shows four link items.

link list example

You can apply your own CSS styling.