Javascript behaviour for filtering has to be added separately
<div class="sds-categorizedCouponsList sds-stackXl">
<div class="sds-scrollToNav sds-slider" data-js-scroll-to-nav>
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div class="sds-slider__inner swiper sds-scrollToNav__inner" data-js-scroll-to-nav-swiper>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="sds-scrollToNav__innerWrapper swiper-wrapper list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
<li class="swiper-slide col">
<div class="sds-scrollToNav__item">
<button type="button" class="sds-navigationTile sds-box -noInteraction -isActive" data-js-scroll-nav-interactable-item="">
<div class="sds-label sds-textHelperSmall">
Tout
</div>
</button>
</div>
</li>
<li class="swiper-slide col">
<div class="sds-scrollToNav__item">
<button type="button" class="sds-navigationTile sds-box -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-label sds-textHelperSmall">
Start
</div>
</button>
</div>
</li>
<li class="swiper-slide col">
<div class="sds-scrollToNav__item">
<button type="button" class="sds-navigationTile sds-box -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-label sds-textHelperSmall">
Study
</div>
</button>
</div>
</li>
<li class="swiper-slide col">
<div class="sds-scrollToNav__item">
<button type="button" class="sds-navigationTile sds-box -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-label sds-textHelperSmall">
Job
</div>
</button>
</div>
</li>
</ul>
<div class="sds-scrollToNav__prev swiper-button-prev"></div>
<div class="sds-scrollToNav__next swiper-button-next"></div>
</div>
</div>
<div class="sds-scrollToNav__fakeInteraction" aria-hidden="true"></div>
</div>
<div class="sds-categorizedCouponsList__results">
<div class="row align-items-stretch-immediate">
<div class="col-12 col-md-6 col-lg-4">
<div class="sds-coupon sds-stackXl -stackBorder">
<div class="sds-stackXl">
<img class="img-fluid" src="../../media/spuerkeess-site/components/coupons/coupon-logo.png" alt="">
<div class="sds-stackXs">
<div class="sds-textHelperSmall sds-metaColor">Restaurants & Sorties</div>
<div class="h3">Restaurants Pizza Hut</div>
</div>
</div>
<div>
<div class="h1">5%</div>
<div class="h4 sds-headingLight">jusqu'au 29 Février 2024</div>
</div>
<div class="d-flex sds-staticInlineMd">
<span class="sds-circle -valid d-none d-md-flex"></span>
<p class="sds-textBodyLg">- 5% sur le tarif standard des formations individuelles et en groupe</p>
</div>
<div class="sds-stackMd">
<p class="sds-formDisclaimer -medium">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
<button type="button" class="sds-helperAction sds-textHelper sds-metaColor sds-staticInlineSm" data-toggle="modal" data-target="#modalID">
<span class="sds-helperAction__icon sds-icon sds-icon-infocircleborder"></span>
<span>Modal link</span>
</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="sds-coupon sds-stackXl -stackBorder">
<div class="sds-stackXl">
<img class="img-fluid" src="../../media/spuerkeess-site/components/coupons/coupon-logo.png" alt="">
<div class="sds-stackXs">
<div class="sds-textHelperSmall sds-metaColor">Restaurants & Sorties</div>
<div class="h3">Restaurants Pizza Hut</div>
</div>
</div>
<div>
<div class="h1">5%</div>
<div class="h4 sds-headingLight">jusqu'au 29 Février 2024</div>
</div>
<div class="d-flex sds-staticInlineMd">
<span class="sds-circle -valid d-none d-md-flex"></span>
<p class="sds-textBodyLg">- 5% sur le tarif standard des formations individuelles et en groupe</p>
</div>
<div class="sds-stackMd">
<p class="sds-formDisclaimer -medium">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
<button type="button" class="sds-helperAction sds-textHelper sds-metaColor sds-staticInlineSm" data-toggle="modal" data-target="#modalID">
<span class="sds-helperAction__icon sds-icon sds-icon-infocircleborder"></span>
<span>Modal link</span>
</button>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="sds-coupon sds-stackXl -stackBorder">
<div class="sds-stackXl">
<img class="img-fluid" src="../../media/spuerkeess-site/components/coupons/coupon-logo.png" alt="">
<div class="sds-stackXs">
<div class="sds-textHelperSmall sds-metaColor">Restaurants & Sorties</div>
<div class="h3">Restaurants Pizza Hut</div>
</div>
</div>
<div>
<div class="h1">5%</div>
<div class="h4 sds-headingLight">jusqu'au 29 Février 2024</div>
</div>
<div class="d-flex sds-staticInlineMd">
<span class="sds-circle -valid d-none d-md-flex"></span>
<p class="sds-textBodyLg">- 5% sur le tarif standard des formations individuelles et en groupe</p>
</div>
<div class="sds-stackMd">
<p class="sds-formDisclaimer -medium">
La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
</p>
<button type="button" class="sds-helperAction sds-textHelper sds-metaColor sds-staticInlineSm" data-toggle="modal" data-target="#modalID">
<span class="sds-helperAction__icon sds-icon sds-icon-infocircleborder"></span>
<span>Modal link</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="{{ namespace }}categorizedCouponsList {{ namespace }}stackXl">
<div class="{{ namespace }}scrollToNav {{ namespace }}slider" data-js-scroll-to-nav>
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div class="{{ namespace }}slider__inner swiper {{ namespace }}scrollToNav__inner" data-js-scroll-to-nav-swiper>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="{{ namespace }}scrollToNav__innerWrapper swiper-wrapper list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
{% for key, item in items %}
{% if item %}
<li class="swiper-slide col">
<div class="{{ namespace }}scrollToNav__item">
{% render "@spk-navigation-tile", {
eltType: "button",
onlyText: true,
modifiers: navItemClasses,
classes: item.classes,
icon: item.icon,
text: item.text,
attrs: {
"data-js-scroll-nav-interactable-item": ""
}
},true %}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="{{ namespace }}scrollToNav__prev swiper-button-prev"></div>
<div class="{{ namespace }}scrollToNav__next swiper-button-next"></div>
</div>
</div>
<div class="{{ namespace }}scrollToNav__fakeInteraction" aria-hidden="true"></div>
</div>
<div class="{{ namespace }}categorizedCouponsList__results">
<div class="row align-items-stretch-immediate">
<div class="col-12 col-md-6 col-lg-4">
{% render "@spk-coupon" %}
</div>
<div class="col-12 col-md-6 col-lg-4">
{% render "@spk-coupon" %}
</div>
<div class="col-12 col-md-6 col-lg-4">
{% render "@spk-coupon" %}
</div>
</div>
</div>
</div>