Rendering variant

 ØObserve that rendering is the visualization of the content defined in the data source item.

ØSXA introduces an option to alter the appearance of the content without making changes to the rendering of the component by itself or the content.

Ø Additionally, SXA offers Rendering variants that enable editors to use different variations of the original visualization.

What

ØA Rendering variant is defined as an extra layer of configuration on top of the rendering that gives authors the ability to adapt renderings to their needs and to do specific changes to the HTML mark-up without actually making changes to the rendering code or templates.

ØIn the Rendering variant, observe that you can determine which fields from the data source should be displayed and define basic markup and styling for those fields. Also observe that by using different variants, the same rendering can render completely different fields from the data source, change their ordering, or even set separate HTML tags and CSS classes specific to each field.

ØThe default Rendering variant for Promo contains "Promo icon," "Promo text,” which mimic the HTML structure that you are expecting for your item to render in this particular example. Most SXA renderings support Rendering variants.

ØWhen you select any rendering that supports variants, the rendering toolbar is displayed with a variant selector at the bottom. For each of the variants, you can upload a thumbnail that previews the visualization of the variant. 

ØWhen authors want to switch variants, the variants' selector shows those thumbnails, making it easier for authors to decide which variant to use. By default, the first variant in the list is applied to a rendering, and any custom Rendering variant created is added to the list.

Note

ØIt is essential to observe that Map components do not support Rendering variants. However, Map allows selecting Points of Interest to display on the map component.

Øyou can add a thumbnail image for the variant. This image will appear in the variants drop-down box and can help content editors select the best variant for their purpose.