The sds-scaleInteraction 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-scaleInteraction 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-scaleInteraction -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-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -btnGroupWrap justify-content-end">
<span class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</span>
</div>
</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>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
<span class="sr-only">Service inclus</span>
</li>
<li>
item
<span class="sr-only">Service inclus</span>
</li>
<li>
item
<span class="sr-only">Service inclus</span>
</li>
<li class="sds-list__disabled">
item
<span class="sr-only">Service non inclus</span>
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box__outOfBoundsMd">
<div class="sds-stackLg">
<div class="sds-boxPrice sds-box -boxSunken -boxInsetLg sds-staticStackXl">
<div class="sds-staticStackXl -stackBorder">
<div class="sds-staticStackXs">
<dl class="d-flex justify-content-between flex-wrap align-items-baseline sds-staticInlineMd">
<dt class="flex-shrink-0">
<span class="sds-label">
{Price label}
</span>
</dt>
<dd>
<div class="sds-boxPrice__price d-flex flex-column align-items-end">
<div>
<span class="sr-only">This is the new price</span>
<div class="sds-amount -amountNeutral -amount2xl">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-amount__suffix">
{suffix}
</span>
</div>
</div>
<s>
<span class="sr-only">This is the old price</span>
<div class="sds-amount -amountNeutral -amountSm">
<div class="sds-amount__body">
<span class="sds-amount__value">{-#.###,##}</span>
<span class="sds-amount__currency">€</span>
</div>
<span class="sds-amount__suffix">
{suffix}
</span>
</div>
</s>
</div>
</dd>
</dl>
<p class="sds-metaColor sds-textHelperSmall">{Price description}</p>
</div>
</div>
<div class="sds-staticGapMd d-flex flex-column-reverse">
<p class="text-center sds-textHelper sds-metaColor">{sales argument}</p>
<div class="text-center">
<button type="button" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">{Label}</span>
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="sds-btn -btnSecondary -btnInverse sds-aboveClickArea">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">{ Label }</span>
</button>
</div>
</div>
</div>
<div class="sds-alertBanner sds-staticInlineMd alert -alertBannerSuccess">
<div class="sds-alertBanner__text sds-staticStackXxs">
<p class="sds-textHelper"><b>Taux de faveur et commission de dossier réduite</b></p>
<p class="sds-textHelper">Commission : EUR 350 au Luxembourg EUR 1.500 à l’étranger (Standard : 0,50% avec max. EUR 2.000)</p>
</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 }}stackLg">
<div class="{{ namespace }}product__header">
<div class="{{ namespace }}product__meta {{ namespace }}textHelperSmall">{{ meta }}</div>
<div class="{{ namespace }}product__headerBtnGroup {{ namespace }}btnGroup -btnGroupWrap justify-content-end">
{% render "@badge--highlight-muted" %}
</div>
</div>
<div class="{{ namespace }}stackXs">
<h3 class="h3">{{ title }}</h3>
<p class="{{ namespace }}product__description">{{ text }}</p>
</div>
</div>
{% endblock %}
{% block body %}
{% render "@list--checked-alt-disabled",{
listItem: listItem
}, true %}
<div class="{{ namespace }}product__meta {{ namespace }}textHelperSmall {{ namespace }}exceptionStackLg">*sous réserve d'acceptation du dossier</div>
{% endblock %}
{% block footer %}
<div class="{{ namespace }}box__outOfBoundsMd">
{% render "@box-price",{
header: false,
disclaimer: false,
extendClickZone: true
},true %}
</div>
{% render "@alert-banner--success",{
icon: false,
heading: false,
link: false,
close: false,
description: "<b>Taux de faveur et commission de dossier réduite</b>",
description2: "Commission : EUR 350 au Luxembourg EUR 1.500 à l’étranger (Standard : 0,50% avec max. EUR 2.000)"
},true %}
{% endblock %}