The sds-boxShadowInteraction defines the background scale on interaction with the component.
The data-sds-move-with-shadow attribute defines the animation og the child element sticking to the scaled shape's edge.
Should the component not be interacted with, remove sds-boxShadowInteraction and replace it with sds-boxShadowActive. Remove the data attribute on any children that have it.
Classes for various variants include:
<article class="sds-product sds-box sds-boxShadowInteraction -insetLg">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="text-center">
<img src="https://design.spuerkeess.lu/media/illustrations/svg750x560/hero/sdsillu-unlockofflinecedies.svg" alt="" class="img-fluid">
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -elevated">
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
</div>
</footer>
</div>
</article>
{% extends "@spk-product-frame" %}
{% block header %}
<div class="text-center">
<img src="{{ img }}" alt="" class="img-fluid">
</div>
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
<p class="{{ namespace }}product__description">{{ text }}</p>
</div>
{% endblock %}
{% block body %}
{% endblock %}
{% block footer %}
<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -elevated">
<div class="d-flex justify-content-center">
{% render "@btn-primary--icon-right",{
eltType: "a",
classes: ["stretched-link"],
text: "Faire une demande",
icon: "icon-arrownext"
},true %}
</div>
</div>
{% endblock %}