Renders each item from an array of data using a custom-built row of components.


The List component displays a list of items or options. It can be used to organize and present information in a concise and easy-to-navigate manner. The List component may also include formatting options to help the items stand out and convey the desired message or concept. You can also customize the appearance and functionality of the list to improve the overall user experience.
Here are some of the key features of the List component:
  • Shows a list of things like items or choices.
  • It makes the information easy to look at and find what you need.
  • It lets you change how it looks to grab attention or get the point across.
  • You can make tweaks to make it even better to use.

Changing the Properties


The Divider field lets you set a divider position around an item element. By default, there's no divider, but you can set it to Top, Bottom , Around and Card.
Allows you to place a divider at the top of each item in the list.
Adds a divider line at the bottom of each list item.
Places divider lines both above and below each item in the list. This fully encloses each entry, making it simple to differentiate between items and improving the list's overall readability.
Sets each list item within its own card-like container, separated by dividers. This gives each entry a distinct, framed appearance, making it easy to focus on individual items and enhancing the overall organization of the list.
Divider options example
The Header section gives you control over the appearance and functionality of your List header.
With the integrated header section in the List, there's no need to use the separate Avonni Header component to create a table header. It's now directly built into the List component, simplifying the building process.
Define a meaningful title for your List. It introduces the timeline's content and is a key element of the visual hierarchy.
Use the caption field to add a brief description or supplementary information for your List. This can be especially useful for providing context or additional details about the table data.
Add an icon to your header to enhance its visual appeal or to help convey the Liste's purpose or content at a glance.
Is Joined
This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the List appear as a continuous, unified element.
Add interactive buttons to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the List.


Items can be added to a layout. You can set the number of columns for your layout (from 1 to 12). The number of columns can also be explicitly set for the device's size.
3 columns layout example

Avatar Attributes

The Avatar Attributes section enables you to customize the appearance and placement of avatars within each item in your Avonni List. With options for modifying the avatar's shape, size, and position and presence icons, this section offers a range of capabilities to align the avatar with your list's overall look and feel.


  • Modify the shape of the avatar for each item in the list. Choose from various built-in options such as circle, square, or empty.

Icon Size

  • Adjust the size of the avatar icon to suit your design specifications. Whether you need small icons to maintain a minimalist look or larger ones for emphasis, this attribute offers the flexibility you need.


  • Define where you'd like the avatar to appear within each list item. Options generally include left, top-left, bottom-left, right, top-right, bottom-right and left-of-the-title.

Presence Position

  • Customize the location of the presence icon, which can indicate status like online, busy, or offline, relative to the avatar. Include Top-Left, Top-Right, Bottom-Left, Bottom-Right.

Image Attributes

An image can be added to any item. The image attributes lets you customize the image attributes for your items. You can set the position, size, height and Crop options.
The Picklist Values data source doesn't support images

Field Attributes

The Field Attributes section allows you to define the number of columns each field will occupy within the container, giving you granular control over the layout and appearance of your list content. By specifying these attributes, you can optimize the visual presentation of the list to enhance readability, alignment, and responsiveness across various screen sizes.

How to Use

  1. 1.
    Define Fields: Start by adding fields to your Avonni List Component.
  2. 2.
    Specify Column Span: Use the field attributes to specify the number of columns it should span.


Item Action

Item action located in yellow

Media Action

Media action located in yellow

Pagination Options

The "Pagination Options" area lets you split long lists into smaller parts in the Avonni List Component. You can choose how many items are shown on each page and how the controls look. This makes it easier to handle extensive lists.

Key Features

Show Pagination

  • Control the visibility of the pagination controls. When enabled, pagination controls will appear at the bottom of the list.

Number of Items Per Page

  • Specify the number of list items to be displayed per page. You can set a value between 1 and 200, depending on your requirement for data density and user experience.

Pagination Alignment

  • Choose the alignment of the pagination controls. Options include left, center, or right alignment to fit your design layout.

Customize Button Icons and Labels

  • Personalize the icons and labels for the First, Last, Next, and Previous buttons. This allows you to adapt the pagination controls to various languages or better to match your application's branding and stylistic guidelines.

Sortable Options

Items can be sortable by activating the Sortable toggle. Add a sortable icon on each item to let end-users know things are sortable.
Sortable icon in Left Position example

Filtering Options

The "Filtering Option" allows you to add a filter menu that appears as a popover. When this feature is enabled, all the fields designated as filters will be displayed in this popover, keeping the list uncluttered and focused.

Search Engine Options

The "Searchable" toggle lets you specify whether the records within a particular column can be searched. When activated, a search bar is made available. Additionally, you can set placeholder text for the search bar and determine its position with available values: left, right, center, and fill.
Activating Search: To make a column searchable, toggle on the "Searchable" option in the configuration settings of your Avonni List Component.
Setting Placeholder Text: Customize the search bar by adding placeholder text to guide users.
Positioning the Search Bar: Use the position attribute to set the location of the search bar. Options include:
  • left: Aligns the search bar to the left.
  • right: Aligns the search bar to the right.
  • center: Centers the search bar.
  • fill: Expands the search bar to fill the available space.
Best Practices
  • Use descriptive placeholder text to guide users on what they can search for.
  • Choose a search bar position that harmonizes with the overall layout of your list component.
Only the title and description fields are searchable.

Selecting a Data Source

This section explains how to link your list to a Data Source. You have three options for sourcing your data:
  • Manual Entry: If you choose this option, you must type in the items for your list yourself and specify all their attributes individually.
  • Variable: With this option, you can select an existing collection from your flow (like an array or list of objects) and map its attributes to populate your list automatically.
  • Picklist Values: This allows you to add items based on the values in a Salesforce picklist field. Once selected, these values will become the data source for your list.

Adding Interactions

Interactions define what will happen when users interact with the list component. Here are the available interactions for the List component:
  • On Item Click: The event is fired when a user clicks on an item.
  • On Action Click: The event is fired when a user clicks on an action.
  • On Media Action Click: The event is fired when a user clicks on a media action.
  • On Reorder: The event fired when a user reordered the items.

Styling the List

From the Styles panel, you can customize styling attributes for the Input Date Range:
  • Size: to customize a specific size for the component
  • Header: to customize main label text
  • Item: to customize the look and feel of each item text
You can find the instructions for styling here.


This tutorial provides a concise guide to creating an attractive, image-based grid list.
This instructional guide details the steps to create dynamic, sortable lists, improving data organization and usability.
This tutorial provides an in-depth explanation of how to construct interactive vertical lists with actions.
This quick guide teaches you how to build and instantly display a detailed contact list.



Alternative text used to describe the list. If the list is sortable, it should describe its behavior, for example: “Sortable menu. Press spacebar to grab or drop an item. Press up and down arrow keys to change position. Press escape to cancel
Default number of columns on smaller container widths. Valid values include 1, 2, 3, 4, 6 and 12
Number of columns on small container widths. Valid values include 1, 2, 3, 4, 6 and 12.
Number of columns on medium container widths. Valid values include 1, 2, 3, 4, 6 and 12.
Number of columns on large container widths and above. Valid values include 1, 2, 3, 4, 6 and 12
Position of the item divider. Valid values include top, bottom and around
Text label for the list
Variant to display the items as list or single line. Accepted values are base or single-line. The base variant displays a list. The variant defaults to base
If true, it is be possible to reorder the list items. Only the base variant supports item sorting
The Lightning Design System name of the sortable icon. Names are written in the format 'standard:account' where 'standard' is the category, and 'account' is the specific icon to be displayed
Position of the sortable icon. Valid values include left and right.
Image attributes: cropFit, position, size, width, height and cropPosition
Array of action objects
Array of action objects displayed in the image
Array of item objects
Name of the picklist field
Define a sort order for the picklist values


The event fired when a user clicks on an action.
The event fired when a user clicks on a media action.
The event fired when a user clicks on an item.
The event fired when a user reordered the items.

Styling Hooks


Block Start
Block End
Block Between
Inline Start
Inline End
Inline Between


Text Color
Define the text color for the header if a label is present
Font Size
Define the font size for the header if a label is present
Font Style
Define the font size for the header if a label is present
Font Weight
Define the font weight for the header if a label is present


Header Text Color
Define the header text color for the item
Header Font Size
Define the header font size for the item
Header Font Style
Define the header font style for the item
Header Font Weight
Define the header font weight for the item
Description Text Color
Define the description text color for the item
Description Font Size
Define the description font size for the item
Description Font Style
Define the description font style for the item
Description Font Weight
Define the description font weight for the item
Background Color
Define the background color for the item
Background Color Hover
Define the background color hover for the item
Background Color Sortable
Define the background color sortable for the item
Background Color Sortable Hover
Define the background color sortable hover for the item
Border Color
Define the border color for the item
Border Size
Define the border size for the item
Border Style
Define the border style for the item
Border Radius
Define the border radius for the item

Possible use cases

Customer Relationship Management (CRM)

  1. 1.
    Contact Lists: Create sortable and searchable lists of client contact information.
  2. 2.
    Opportunity Pipeline: Display sales opportunities in a well-organized list, categorizing them by stages and likelihood of closing.

Task Management

  1. 1.
    To-Do Lists: Utilize the list component to create a list of tasks, featuring details like deadlines, statuses, and responsible parties.
  2. 2.
    Project Milestones: Create a timeline of project deliverables, making them sortable by due date or importance.

Inventory Management

  1. 1.
    Product Catalog: Display a list of products with filtering options, allowing sales reps to quickly find what they're looking for.
  2. 2.
    Stock Level: A real-time list of inventory levels sortable by product type, location, or availability.

Reporting and Dashboards

  1. 1.
    KPI Monitoring: List out key performance indicators (KPIs) and sort them by relevance or time frame.
  2. 2.
    Sales Leaderboard: Showcase top-performing sales representatives in a sortable list, complete with their total sales, recent achievements, etc.

Support and Service

  1. 1.
    Ticket Tracking: Create a list to manage and track customer support tickets, sorted by urgency, agent, or status.
  2. 2.
    FAQ: Use lists to neatly display frequently asked questions and their answers.

Event Management

  1. 1.
    Event Agenda: Display the day’s events or presentations in a sortable list, allowing attendees to plan their schedules easily.
  2. 2.
    Attendee List: Create a searchable list of event attendees sorted by company name, industry, or other criteria.