> ## 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 Mixed type CMS element

**Mixed type elements are versatile helper elements used to display related entries of different types from the CMS.**

|    |    |    |    |
| --- | --- | --- | --- |
| [1. Adding a Mixed type element to a project](#2-adding-a-mixed-type-element-to-a-project) | [2. Setting up a mixed type element](#2-setting-up-the-mixed-type-element) | [Set up a new mapping](#3-setting-up-a-new-mixed-type-mapping) | [Set up default and error](#3-setting-up-the-default-and-error-behaviors) |

The Mixed type element acts like a switch that displays components with data from the CMS based on different rules (mappings) for each data type.

| For example, a blog post entry can have related articles, related authors, related categories. Some blog posts may have one type of relation but not others. The Mixed type element can be set up to account for any situation that may arise.

## Adding a Mixed type element to a project

Mixed type elements ONLY work when used inside a CMS Item or List to use as a data source.

To add an Mixed type element to a project:

* Go to the **Left panel -> Elements tab -> CMS section**
* Drag the **Mixed type** element the **Success Layer** in a **CMS element** with a source set up
* Go to the **Right panel**
* Select a Mixed type **Source** from the available collections

![How to add a Mixed type element to a CMS project](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/1-mixed-type_1af2q2c.gif)

## Setting up the Mixed type element

Once a Mixed type element has been added to another CMS element or page you can:

* **Set up mappings** - will display a component based on the data type you want
* **Set up a Default behavior** - will be used when the types of element received is not handled by a mapping
* **Set up an Error behavior** - will be used in situations when something happens in the deployed website

### Setting up a new Mixed type mapping

To set up a new mapping in the Mixed type element:

* **Select the Mixed type element**
* Go to the **Right panel**
* Click the **“+” icon** in the **Mappings** section
* **Select one of the available content types**
* In the newly added section, **select one of your components**
* **Bind data** to the component elements with the Dynamic panel

![How to set up a new mapping inside a Mixed type element](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/2-mixed-type_1c6q1hw.gif)

| To preview the component you have mapped to, click the play icon in the Mapping section you are currently working on.

### Setting up the default and error behaviors

To customize the default and error behaviors for the Mixed type element:

* **Select the Mixed type element**
* Go to the **Right panel**
* In the **Default** or **Error section** click **Choose component**
* **Select one of your components**
* **Bind data** to the component elements with the Dynamic panel

![How to customize the default and error behaviors for Mixed type elements](https://storage.crisp.chat/users/helpdesk/website/60c4bca58bb99c00/3-mixed-type_1s2ljx8.gif)