List component reference

Find out which list components the default component set has to offer and what they can be applied to.

 

List components in the page builder

You can use the list components for creating lists for your web page. You need to apply a layout component into which you can drag and drop a list component.

List

 

List component icon

This component contains two predefined list items complete with icons. You can alter the information using the component options menu. See below for details.

List Item

 

List item component icon

You can add a list item to a component and apply specific configurations and styling for the list item using the options menu.

List Subheader

 

List subheader component icon

Apply a list subheader to a list to, for example, indicate a sub-category.

 

Note: A list subheader can only be applied to a List container.

Subview

Subview component icon

This component provides a list of secondary information that you can view by expanding the list items with a button on the right.

Subview Item

Subview item component icon

You can add a subview item to a subview list whenever you see that you need an additional one.

When you select a list component, the options for the selected component are displayed. In the following, the column component is initially selected. When you click on a list item, the item is selected. You can use the Select parent component button to open the options menu for specific components.

Selecting parent component of a list item

The following contains an example of the options menu displayed for a list Item component is selected:

List item component's options

A range of options is available for list item components. You can specify the primary and secondary text displayed. You can insert keys for including specific translation texts or insert data from specific input variables.

A range of styling options is also available such as background color and alignment options.

Page: select the page that is redirected to when the button is clicked.

Align items: determines the relative position of the items within the list item in a vertical scale.
Icon color: the color of the icon is based on the configured colors of each option in the theme builder.

You can specify:
- the icon that is displayed inside the list item

- the color of the selected icon
- whether to show the icon as avatar

Use the checkboxes to indicate whether:

  • the icon is shown as an avatar

  • the list item is disabled

  • the gutters (left padding) are removed

  • list item is denser than other text fields

  • a divider is applied after the list item

  • the list item is selected by default

  • additional styling options available are applied

  • you want to apply advanced settings