---
title: "Adding dynamic content to a component"
slug: "adding-dynamic-content-to-a-component"
abstract: "Replace attributes of elements with dynamic data from external and XM data sources."
---
# Adding dynamic content to a component

Dynamic content allows components to be flexible and re-usable in different contexts. Text, images, videos, and links can be populated from a data source, like a CMS or a database, as long as the data source has an API and has been [added to the Data Sources library](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-external-data-sources.html "Get your content from external data sources") of the Component builder.

Components are built with elements: for example, a Button, a Card, or another Component. 

Elements contain one or more attributes which affect what the element displays: for example, a Variable is defined by the attribute *Text*, but an Image element has several attributes such as *Image source*, *Caption*, *Alt text*.

For each attribute, you can choose to add content according to the following options:

- **None** – Add no content to an attribute, for example, you can choose to not have any *Alt text* for an Image.      
- **Static** - You can define specific content for the attribute, for example enter a text for the attribute *Alt text* of an Image, or upload an image from your computer for a *Background image* attribute.
- **Mapped** – You can choose to map the attribute with text, image, or link from a data source that was previously added to your environment. You can use dynamic content multiple times within a single element, even using different data sources. You can also mix static and dynamic text inside one text element by combining regular text with the variables, such as *Price: {price}USD* or *By {author} in {category}*.

When using mapped data, you can select:

- A unique **property** from the data tree. That property is a content item if the [data source is external](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-external-data-sources.html "Get your content from external data sources"). However, that property corresponds to a template if you are using a [XM data source](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/get-your-content-from-an-xm-data-source.html "Get your content from an XM data source"), and you have first to stage the component to Page builder and insert it in a webpage to assign the content item that fits the template.
- An **object** (a parent folder that contains several properties) when you want to [repeat the element](https://doc.sitecore.com/sai/en/users/sitecoreai/design-components/components/adding-dynamic-content-to-a-component/set-a-repeater-for-an-array.html "Set a repeater for an array") according to the number of properties included in the object.