The SXA renderings and rendering variants

Last updated Thursday, May 17, 2018 in Sitecore Experience Accelerator for Administrator, Content Author, Designer, Developer, Marketer
Keywords: Layouts

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.

Send feedback about the documentation to docsite@sitecore.net.