Product Row: Small

Interaction

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.

<article class="sds-product sds-box  sds-scaleInteraction -insetMd -rowSmall">
    <div class="sds-product__inner sds-stackXl">
        <div class="sds-product__mainContent">

            <div class="sds-product__imgWrapper">
                <img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-safecover.svg" alt="" class="img-fluid">
            </div>
            <div class="sds-product__text sds-stackSm d-lg-flex flex-lg-column justify-content-lg-center flex-grow-1">
                <div class="sds-product__header">

                    <div class="sds-btnGroup">
                        <div class="sds-badge badge -badgeHighlight -badgeMuted">

                            badge
                        </div>
                    </div>

                </div>
                <div class="sds-product__textContent sds-stackLg">
                    <div class="sds-stackXs">
                        <h3 class="h4">Prêt personnel</h3>
                        <p>Empruntez au meilleur taux pour financer vos dépenses importantes</p>
                    </div>

                    <a href="" class="sds-btn -btnSecondary stretched-link">

                        <span class="sds-btn__text">{Label}</span>

                        <span class="sds-icon sds-icon-arrownext"></span>

                    </a>

                </div>
            </div>

        </div>

    </div>
</article>
 
{% extends "@spk-product-frame" %}
{% block header %}
	<div class="{{ namespace }}product__imgWrapper">
		<img src="{{ img }}" alt="" class="img-fluid">
	</div>
	<div class="{{ namespace }}product__text {{ namespace }}stackSm d-lg-flex flex-lg-column justify-content-lg-center flex-grow-1">
		<div class="{{ namespace }}product__header">
			{% if badge %}
			<div class="{{ namespace }}btnGroup">
				{% render "@badge--highlight-muted" %}
			</div>
			{% endif %}
		</div>
		<div class="{{ namespace }}product__textContent {{ namespace }}stackLg">
			<div class="{{ namespace }}stackXs">
				<h3 class="h4">{{ title }}</h3>
				<p>{{ text }}</p>
			</div>
			{% if parentIsLink %}
				{% else %}
			{% render "@btn-secondary--icon-right", {
				eltType: "a",
				classes: ["stretched-link"],
				text: "{Label}",
				icon: "icon-arrownext"
			}, true %}
			{% endif %}
		</div>
	</div>
{% endblock %}
{% block body %}
{% endblock %}