Product Column: Spot Footer Img Small Top

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="sds-product__imgWrapper -noTranslate">
                <img src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-safecover.svg" alt="">
            </div>
            <div class="sds-stackLg">
                <div class="sds-product__header">
                    <div class="sds-product__meta sds-textHelperSmall">La classique</div>
                    <div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
                        <div class="sds-badge badge -badgeHighlight -badgeMuted">

                            badge
                        </div>
                    </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

            </li>

            <li>

                item

            </li>

            <li>

                item

            </li>

            <li class="sds-list__disabled">
                <span class="sr-only">N'est pas disponible:</span>
                item

            </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 -insetLg sds-box__outOfBoundsMd -boxSunken">
                <div class="sds-stackXl">
                    <div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
                        <div class="col">
                            <div class="sds-label">
                                Prix par mois

                            </div>
                        </div>
                        <div class="col-auto text-right">
                            <div class="sds-colorInherit h1">9,50 €</div>
                        </div>
                    </div>
                    <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>
                    <p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
                </div>
            </div>
            <div class="sds-aboveClickArea text-center">
                <a href="" class="sds-btn -btnSecondary -btnInverse">

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

                    <span class="sds-btn__text">Consulter le dépliant</span>

                </a>
            </div>

        </footer>

    </div>
</article>
 
{% extends "@spk-product-frame" %}
{% block header %}
	<div class="{{ namespace }}product__imgWrapper -noTranslate">
		<img src="{{ imgSmall }}" alt="">
	</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 -wrap 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" %}
	<div class="{{ namespace }}product__meta {{ namespace }}textHelperSmall {{ namespace }}exceptionStackLg">*sous réserve d'acceptation du dossier</div>
{% endblock %}
{% block footer %}
	<div class="{{ namespace }}box -insetLg {{ namespace }}box__outOfBoundsMd -boxSunken">
		<div class="{{ namespace }}stackXl">
			<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
				<div class="col">
					{% render "@label",{
						eltType: "div",
						text: "Prix par mois"
					},true %}
				</div>
				<div class="col-auto text-right">
					<div class="{{ namespace }}colorInherit h1">9,50 €</div>
				</div>
			</div>
			<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>
			<p class="{{ namespace }}staticExceptionStackMd {{ namespace }}product__meta text-center {{ namespace }}textHelper">Gratuit les 6 premiers mois</p>
		</div>
	</div>
	<div class="{{ namespace }}aboveClickArea text-center">
		{% render "@btn-secondary-inverse--icon-left",{
			eltType: "a",
			text: "Consulter le dépliant",
			icon: "icon-download"
		},true %}
	</div>
{% endblock %}