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

You can create a list. 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

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

You can 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.

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.


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

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 are 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 based on the configured colors of each option in the Theme Builder.

You can specify:
- the Icon that is displayed inside of the list item.
- whether to show the Icon Avatar.

- the color of the selected icon.

Use the checkboxes to indicate whether:

  • the icon is shown as an avatar

  • the list item is disabled.

  • the gutters (left padding) is 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

Did this answer your question?