> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.teleporthq.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How to use the CMS list element

**CMS lists are one of the basic building blocks for any CMS project.**

They are designed to display the data from multiple items from an imported collection, in the form of a list. Lists can be found by default in CMS List pages, but they can be added to non-CMS pages as well.

|    |    |    |
| --- | --- | --- |
| [1. Adding a CMS list to a project](#2-adding-a-cms-list-to-a-project) | [2. CMS list options](#2-cms-list-options) | [3. Adding elements to list items](#2-adding-elements-to-list-items) |
| [4. Styling CMS lists](#2-styling-cms-lists) | [5. Styling CMS list items](#2-styling-cms-list-items) |    |

## Adding a CMS list to a project

CMS lists can be added either to a CMS page or a regular page. 

To add list to a project:

* Go to the **Left panel -> Elements tab -> CMS section**
* Drag the **CMS List** element to a page
* Go to the **Right panel -> Collection settings**
* Select a **Source** from one of the collections that you imported

The sources available to set up the List will be the collections imported when establishing the CMS connection.

![Adding a CMS list to a project](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-cms-lists_1dzld5u.gif)

## CMS list options

From the **Right panel -> Collection settings **where you also set the source for the CMS list you have several options to customize the list.

* Pagination - [Read more](/en/article/pagination-in-cms-lists-lcho6/)
* Sorting - [Read more](/en/article/sorting-in-cms-lists-tep5p7/)
* Filtering - [Read more](/en/article/filtering-in-cms-lists-1w9tv5e/)
* UI States  - [Read more](/en/article/cms-ui-states-success-loading-error-empty-1ttd5b3/)

![CMS List available customization options](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-cms-lists_1lasz0v.gif)

## Adding elements to list items

To add new elements to a CMS list item:

* From the **Left panel -> Elements**
* Drag any element to the **Success layer** of the CMS List
* **Select the element**
* Go to the **Right panel**
* Click on the **Bind property icon** to bind dynamic data to the element

Check out this article to learn more about [How to bind dynamic data to elements](/en/article/how-to-bind-dynamic-data-to-elements-1ojkk98/).

![Adding elements to a CMS list](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-cms-lists_1upzhfa.gif)

## Styling CMS lists

To make styling changes to the list itself:

* Go to the **Left panel - Layers and Files**
* Expand the **Main list element**
* Expand the **Success layer**
* Select the **List layer**
* From the **Right panel** you can **style the list like any other container**

![Styling CMS lists](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/4-cms-lists_mh47co.gif)

## Styling CMS list items

To style a CMS list element:

* Select the elements in **Success -> List -> Items**
* Style the elements using the **Right panel**, like any other element

| The most important thing to remember is that editing one CMS item in a list will affect all of the other elements in the list as well.

![Styling items in a CMS list](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/5-cms-lists_n2c2qa.gif)