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 -textTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" 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>
</footer>
</div>
</article>
{% extends "@spk-product-frame" %}
{% block header %}
<div class="{{ namespace }}box__outOfBoundsLg {{ namespace }}product__img {{ namespace }}product__imgInlineEnd"{% if interaction %} data-{{ namespace }}move-with-shadow{% endif %}>
<img src="{{ (mediaPath + "/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png") | path }}" 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>
{% endblock %}