I need to create a list of items in SXA with a background defined by the items themselves. On the items, the editor can select a colour (droplist). On the display, I want to use that colour as the background of that items tile.

I know that I can set css classes on the variants, but then they are fixed by the variant definition. I also know I can get fields from the item, but then they are just displayed and not in the class of a div or section.

I tried using a NVelocity template to open a div with the css class in it, but apparently SXA is too clever and closes the div for me (so the rest of my data is not in but after the div).

I considered using the rules engine to enable or disable part of the variant definition. But that seems weird, because I think I would need to create a variant section (including all needed children) for each possible colour.

Is this possible ootb? Or with a bit of custom javascript if necessary?

2 Answers 2


Yes, you can do it out of the box using tokens inside of the Data attributes field in the Rendering Variant. Take a look:

enter image description here

Each of my items has a Colour field:

enter image description here

And here is an example output (Page List in my case):

enter image description here

I'm fulfilling here style attribute but you can assign CSS class.

Additional information's: This feature will not work with reference fields (e.g. Drop Link) unless you want an URL of a terget item. So

  • if you want CSS class name to be inserted in the data attribute you must use SingleLine-Text field (there is known issue with DropList field type).
  • you can use reference fields if you want to get the URL of a target item. E.g.: you have an image field and you want to put a link to that image in the data attributes, in such case $(IMAGE_FIELD_NAME) will output link to that image.
  • 1
    Would I be able to use a token if the colour field was a droplink (so a guid, referencing a value)? Or do I need to change the field to a droplist?
    – Gatogordo
    Commented Jul 11, 2018 at 19:08
  • I would need to take a look in the source code tomorrow. I remember that we've been changing something in that logic but I'm not sure if this will support reference values. I will respond tomorrow here. Commented Jul 11, 2018 at 19:19
  • @Gatogordo I've updated my answer. Commented Jul 12, 2018 at 6:22
  • @DawidRutkowski any updates to this functionality in 1.8 such that referenced droplinks or droplists can be used?
    – andyp
    Commented Feb 28, 2019 at 4:26
  • @andyp As far as I can see in code - yes. DropList's should work. Commented Feb 28, 2019 at 8:13

From Sitecore 9.3, you can use Scriban templates to create your variant renderings, and you can now have easy access to the value of the DropLink.

If your field is in the rendering parameters, you can use: {{ sc_parameter 'Colour' }}

If your field is in the object's template, you can use: {{ i_item.Colour }}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.