Sitecore Scriban: Adding CSS Classes And HTML Attributes To Fields

SXA and Scriban Templates

Sitecore SXA provides tons of functionality and flexibility. I've grown quite fond of the developing websites with it. A very interesting feature of SXA is the ability to leverage a templating language called Scriban to code components (technically, rendering variants) directly within the Sitecore environment.

Adding Class And Custom HTML Attributes

In this sample below we're using Tailwind CSS (which rocks) to add CSS classes to to Sitecore image field.

 {{ sc_field i_item 'Image' [['class', 'absolute inset-0 h-full w-full object-cover']] }}

If you want add multiple attributes like a class and and an ARIA role you can do as follows (note the nested array).

 {{ sc_field i_item 'Image' [['role','img'],['class', 'absolute inset-0 h-full w-full object-cover']] }}

Thanks for reading. Best of luck using Scriban, SXA and maybe even Tailwind CSS.