Product Column: News

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.

Variant classes

Classes for various variants include:

  • -rowSmall
  • -row
  • -spotSmall
<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-stackXs">
                <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="d-flex justify-content-end">
                <a href="" class="sds-btn -iconBtn -btnSecondary stretched-link">

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

                    <div class="sr-only">Faire une demande</div>

                </a>
            </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">
		<p class="{{ namespace }}product__description">{{ text }}</p>
	</div>
{% endblock %}
{% block body %}
{% endblock %}
{% block footer %}
	<div class="d-flex justify-content-end">
		{% render "@icon-btn-secondary",{
			eltType: "a",
			classes: ["stretched-link"],
			action: "Faire une demande",
			icon: "icon-arrownext"
		},true %}
	</div>
{% endblock %}