I need to create an SXA
component in which I need to apply a specific CSS
class to each alternative div.
The component should read the item from a multi-list and then render the HTML and apply a reverse CSS class to each alternative div.
<div class="landing-feature-card reverse">
I have currently used SXA Scriban to do it but there is a lot of duplicate code. Is there a more efficient way to implement this
{{x=1}}
{{ for i_child in (sc_followmany i_item "Landing Feature Content") }}
{{- if x%2 == 0 -}}
<div class="landing-feature-card reverse">
<div class="inner-wrapper">
<div class="landing-feature__image">
{{ i_child.Image}}
</div>
<div class="landing-feature__text">
<p class="landing-feature__label"> {{ i_child.Featured}}</p>
<h3 class="landing-feature__title">{{ i_child.Title}}</h3>
<div class="landing-feature__description">
{{ i_child.Description}}
</div>
<div class="landing-feature__cta">
<a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
</div>
</div>
</div>
</div>
{{ else -}}
<div class="landing-feature-card">
<div class="inner-wrapper">
<div class="landing-feature__image">
{{ i_child.Image}}
</div>
<div class="landing-feature__text">
<p class="landing-feature__label"> {{ i_child.Featured}}</p>
<h3 class="landing-feature__title">{{ i_child.Title}}</h3>
<div class="landing-feature__description">
{{ i_child.Description}}
</div>
<div class="landing-feature__cta">
<a class="link" href="{{ sc_link i_child }}">{{ i_child.CTA }}</a>
</div>
</div>
</div>
</div>
{{ end -}}
{{x=x+1}}
{{ end }}