The SXA renderings and rendering variants

Abstract

SXA comes with a library of predefined renderings to ensure modular component based design.

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.

This following tables display an overview of the renderings and rendering variants options available in the Toolbox:

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

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

Rendering	Description
Facebook Comments	Displays Facebook comments.
Livefyre	Displays comments from the blog comment hosting service, Livefyre.

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

Rendering	Description
WFFM Wrapper	Embeds a form created using the Webforms for Marketers module.
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

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

Rendering	Variant	Description
File List	yes	Displays list of files available for download. Supports rendering variants.
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

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: sibling or parent page page from browsing history arbitrary page or resource
Link List	yes	Displays lists with items that contain a title, link, and text.
Navigation	no	Generates a navigation menu. You can select: Main navigation - drop-down vertical – standard drop-down navigation Main navigation - drop-down horizontal – drop-down navigation with child items in a single line Sidebar navigation – all child items displayed vertically Big/fat navigation – all child items displayed horizontally. Mobile navigation – navigation for mobile

Page Content

Rendering	Variants	Description
Field Editor	yes	Enables you to edit content fields directly in the Experience Editor.
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

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

Rendering	Variants	Description
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.
Search Results	yes	Displays the results of a search query.
Sort Results	no	Enables users to switch the sorting criteria for search results.

Security

Rendering	Description
Login	Displays a login form.
Logout	Displays a logout button.
Social Login Wrapper	Embeds a Social Connected module login form on the page.

Social

Rendering	Description
AddThis	Integrates AddThis personalized widgets.
Feed	Displays RSS and ATOM feeds.
Social Media share	Displays social network links (Facebook, Twitter, Google+)

Taxonomy

Rendering	Description
Tag Cloud	Displays the aggregated tags for the search results, visually weighted based on their occurrence frequency.
Tag List	Displays taxonomy entries that a page is tagged with.