---
title: "Renderings and rendering variants"
slug: "renderings-and-rendering-variants"
abstract: "Experience Manager comes with a library of predefined renderings to ensure modular component based design."
---
# Renderings and rendering variants

You can construct your pages by dragging and dropping standard components directly where you need them. These components are called renderings and they are listed in the toolbox in the Experience Editor and in Pages. The renderings available are listed below.

If a rendering has any variants, you can select one of its variants from a list below the floating toolbar. Variants make a rendering appear differently or make them show different content. If the **Variant** column in the tables below contains **yes**, it means that the rendering supports variants.

> [!note]
> You can configure the default renderings and create your own rendering variants in the Content Editor.

<details>
<summary><h2>Media</h2></summary>

| **Rendering** | **Variant** | **Description** |
| --- | --- | --- |
| [Image](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-a--reusable--image.html) | yes | Adds an image that you select from the Media library to a page. |

</details>

<details>
<summary><h2>Navigation</h2></summary>

| **Rendering** | **Variant** | **Description** |
| --- | --- | --- |
| [Link List](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-links-and-breadcrumbs.html) | yes | Displays lists with items that contain a title, link, and text. |
| [Navigation](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-navigation.html) | no | Generates a navigation menu. You can select:<br><br><ul><li>**Main navigation - drop-down vertical** – standard drop-down navigation</li><li>**Main navigation - drop-down horizontal** – drop-down navigation with child items in a single line</li><li>**Sidebar navigation** – all child items displayed vertically</li><li>**Sitemap navigation** - all child items displayed vertically</li><li>**Big/fat navigation –** all child items displayed horizontally.</li><li>**Mobile navigation** – navigation for mobile</li></ul> |

</details>

<details>
<summary><h2>Page Content</h2></summary>

| **Rendering** | **Variants** | **Description** |
| --- | --- | --- |
| [Page Content](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-a-page-content-component.html) | yes | Displays the specific fields on a page from the data source item that you select. |
| [Promo](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-a-promo-rendering.html) | yes | Renders a field from another page and works as a placeholder for other renderings. It consists of an icon or a title and links. |
| [Rich Text](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add--reusable--rich-text.html) | yes | Adds formatted text on a page. You can write text using HTML tags. |
| [Title](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/add-a-title-component.html) | yes | Displays the title or subtitle of the current page. |

</details>

<details>
<summary><h2>Page Structure</h2></summary>

| **Rendering** | **Variant** | **Description** |
| --- | --- | --- |
| [Container](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/combine-content-from-multiple-components.html) | no | Adds additional CSS styling using a wrapper for other renderings. |
| [Column Splitter](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/change-the-layout-of-a-page-1064966.html#add-a-column-splitter-component) | no | Splits a placeholder horizontally. |
| [Row Splitter](https://doc.sitecore.com/xp/en/users/sxa/105/sitecore-experience-accelerator/change-the-layout-of-a-page-1064966.html#add-a-row-splitter-component) | no | Splits a placeholder vertically. |

</details>