> ## 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 Item element

**CMS items are another basic building block for CMS projects.**

They are designed to display the data from only a single item from an imported collection. They can be found by default in **CMS Details pages**, but they can also be added to non-cms pages. 

|    |    |    |
| --- | --- | --- |
| [1. Adding a CMS Item to a project](#2-adding-a-cms-item-to-a-project) | [2. Adding elements to CMS items](#2-adding-elements-to-cms-items) | [3. Styling CMS items](#2-styling-cms-items) |

## Adding a CMS item to a project

CMS items can be used both in CMS pages and regular non-cms pages. 

To add a CMS item to a project:

* Go to the **Left panel -> Elements tab -> CMS section**
* Drag the **CMS Item** element to a page
* Go to the **Right panel -> Collection Item Settings**
* **Select a Source** from one of the collections that you imported
* In the **id field**, add the **item’s ID from the CMS** or set it up dynamically

| The ID for a CMS item can also be set dynamically if the Item is part of a CMS list.

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

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

## Adding elements to CMS 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 Item
* **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 CMS items](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-cms-items_wuefbe.gif)

## Styling CMS items

To style the content inside of a CMS element:

* Select the elements in the **Success layer**
* Style the elements using the **Right panel**, like any other element

![Styling elements in a CMS item](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-cms-items_13fjjsq.gif)