The SXA renderings and rendering variants
Version:
In Sitecore Experience Accelerator (SXA), 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. There are renderings available for simple text, images, videos, social media plugins, and so on.
There is a set of out-of-the-box variants that come with renderings that support them. When you place a rendering supporting rendering variants on a page, you can select one of its variants from a dropdown below the Experience Buttons Toolbar. Variants may make a rendering appear differently or may make them show different content. For example, the list rendering can have different variants for: detailed lists, thumbnails list, and a carousel.
You can configure the default renderings and create rendering variants in the Content Editor.
Composites
Composites
| Rendering | Variant | Description |
|---|---|---|
| Accordion | Embedded renderings can support variants | Displays collapsible panels. |
| Carousel | Embedded renderings can support variants | Displays set of slides that can contain images, videos, links, and text. |
| Flip | Embedded renderings can support variants | Displays two sides that both have a title and a content rendering. |
| Tabs | Embedded renderings can support variants | Adds tabs to the page. |
| Snippet | Embedded renderings can support variants | Provides placeholders to create a reusable group of renderings. |
Context
Context
| Rendering | Description |
|---|---|
| Language Selector | Provides a link to switch between different language versions. |
| Site Selector | Provides a link to switch between different tenant sites. |
Engagement
Engagement
| Rendering | Description |
|---|---|
| Facebook Comments | Displays Facebook comments. |
| Disqus | Displays latest comments. |
Events
Events
| Rendering | Description |
|---|---|
| Event Calendar | Displays events from event lists or a Google calendar. |
| Event List | Displays lists of events with name, description, place, start/end time, and link. |
Forms
Forms
| Rendering | Description |
|---|---|
| Sitecore Forms Wrapper | Embeds a form created using the Sitecore Forms module. |
| MVC Form | After you embedded a Form module, you can add the MVC form to your page. |
Maps
Maps
| Rendering | Description |
|---|---|
| Map | Embeds maps from Google or Bing with locations, routes, and areas that you can mark. The component can also display POI results when associated with a search results source. Points on a map can be formatted with rendering variants. |
Media
Media
| Rendering | Variant | Description |
|---|---|---|
| File List | yes | Displays list of files available for download. |
| Flash | no | Embeds a SWF object on the page. |
| Gallery | no | Displays a gallery of images and/or videos. |
| Image | yes | Adds an image that you select from the Media library to a page. |
| Image (Reusable) | yes | Stores image from the Media library to enable reusability. |
| Media Link | yes | Provides a rich link to an asset in the Media library. Includes description and preview. Supports rendering variants. |
| Playlist | yes | Enables you to create a playlist for the Video component. Supports rendering variants. |
| Video | no | Displays an HTML 5 player (with Flash fallback for legacy browsers) to play videos. |
Navigation
Navigation
| Rendering | Variant | Description |
|---|---|---|
| Archive | yes | Displays blog archives in a tree. Supports rendering variants. |
| Breadcrumb | no | Generates a breadcrumb that lists all path items from the root to the current item. Supports rendering variants. |
| Link | yes | Adds a link to:
|
| Link List | yes | Displays lists with items that contain a title, link, and text. |
| Navigation | no | Generates a navigation menu. You can select:
|
Page Content
Page Content
| Rendering | Variants | Description |
|---|---|---|
| Page Content | yes | Displays the specific fields on a page from the data source item that you select. |
| Page List | yes | Displays lists of pages by predefined or composed queries. |
| Pagination | no | Adds pagination for the Page list rendering. |
| Plain HTML | no | Embeds HTML code. |
| Plain HTML (Reusable) | no | Stores HTML code to enable reusability. |
| Promo | 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 | yes | Adds formatted text on a page. You can write text using HTML tags. |
| Rich Text (Reusable) | yes | Stores rich text to enable reusability. |
| Title | yes | Displays the title or subtitle of the current page. |
Page Structure
Page Structure
| Rendering | Description |
|---|---|
| Container | Adds additional CSS styling using a wrapper for other renderings. |
| Divider | Divides a placeholder horizontally. |
| Edit Mode Panel | Creates a placeholder to embed other renderings that are visible to authors in Edit mode only. |
| IFrame | Embeds external pages. |
| Splitter (Columns) | Splits a placeholder horizontally. |
| Splitter (Rows) | Splits a placeholder vertically. |
| Toggle | Displays buttons or links that show additional content when toggled. |
Search
Search
| Rendering | Variants | Description |
|---|---|---|
| Aggregated Facet Filter | yes | Combines filters within one component. |
| Facet Summary | no | Displays active filters on the page and allows visitor to remove them one by one or in bulk. |
| Filter (Checklist) | no | Filters search results based on selected values. |
| Filter (Date) | no | Filters the search results on selected date/time. |
| Filter (Dropdown) | no | Filters search results based on items that are tagged with a selected facet. |
| Filter (Managed Range) | no | Specifies the result with a minimum and maximum. |
| Filter (Radius) | no | Filters the search results based on distance from current user location or location provided in the Location Filter rendering. |
| Filter (Range Slider) | no | Filters the search results based on a facet to be less, more, or equal to the value selected by a visitor. |
| Filter (Slider) | no | Filters search results based on a specific facet within the selected range. |
| Load More | no | Loads search results progressively. |
| Location Finder | no | Specifies user location. |
| Page Selector | no | Provides paging functionality for search results. This rendering is mutually exclusive with the Load More rendering. |
| Page Size | no | Enables visitors to switch the number of results displayed once. |
| Results Count | no | Enables you to indicate the number of results available to the visitor. |
| Results Variant Selector | no | Enables visitors to change the rendering variant that is used dynamically by the Search Results rendering |
| Search Box | yes | Filters the search results based on text provided by a visitor. Note You cannot render or edit placeholders within the Search Box component because its content is generated by the SXA search service. |
| Search Results | yes | Displays the results of a search query. Note You cannot render or edit placeholders within the Search Results component because its content is generated by the SXA search service. |
| Sort Results | no | Enables users to switch the sorting criteria for search results. |
Security
Security
| Rendering | Description |
|---|---|
| Login | Displays a login form. |
| Logout | Displays a logout button. |
Social
Social
| Rendering | Description |
|---|---|
| Feed | Displays RSS and ATOM feeds. |
| Social Media share | Displays social network links (Facebook, Twitter, Google+) |
| Displays latest tweets posted on Twitter. |
If you have suggestions for improving this article, let us know!