Card Product Vertical: Spot Small

Interaction

The sds-scaleInteraction defines the background scale on interaction with the component.

The data-sds-move-with-shadow attribute defines the animation of 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:

  • -cardProductSpotSmall
  • -cardProductTextTop
  • -cardProductAlignTop
<article class="sds-cardProduct sds-box  sds-scaleInteraction -boxInsetLg -cardProductTextTop -cardProductSpotSmall">
    <div class="sds-cardProduct__inner sds-stackXl">
        <div class="sds-cardProduct__mainContent">

            <div class="sds-box__outOfBoundsLg sds-cardProduct__img sds-cardProduct__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-cardProduct__header">
                    <div class="sds-metaColor sds-textHelperSmall">La classqiue</div>
                    <ul class="sds-cardProduct__headerBtnGroup sds-btnGroup -btnGroupWrap justify-content-end">
                        <li>
                            <span class="sds-badge badge -badgeHighlight -badgeMuted">

                                badge

                            </span>
                        </li>
                    </ul>
                </div>
                <div class="sds-stackXs">
                    <h3 class="h3">Prêt personnel</h3>
                    <p class="sds-cardProduct__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
                </div>
            </div>

        </div>

        <div class="sds-cardProduct__revealAction">
            <ul class="sds-cardProduct__revealActionInner sds-btnGroup">
                <li>
                    <a href="" class="sds-btn -btnSecondary stretched-link">

                        <span class="sds-btn__text">
                            Découvrir

                        </span>

                    </a>
                </li>
                <li class="sds-aboveClickArea">
                    <a href="" class="sds-btn -btnPrimary">

                        <span class="sds-btn__text">
                            Faire une demande

                        </span>

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

                    </a>
                </li>
            </ul>
        </div>

    </div>
</article>
 
{% extends "@card-product-frame" %}
{% block header %}
	<div class="{{ namespace }}box__outOfBoundsLg {{ namespace }}cardProduct__img {{ namespace }}cardProduct__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 }}cardProduct__header">
			<div class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">{{ meta }}</div>
			<ul class="{{ namespace }}cardProduct__headerBtnGroup {{ namespace }}btnGroup -btnGroupWrap justify-content-end">
				<li>
					{% render "@badge--highlight-muted" %}
				</li>
			</ul>
		</div>
		<div class="{{ namespace }}stackXs">
			<h3 class="h3">{{ title }}</h3>
			<p class="{{ namespace }}cardProduct__description">{{ text }}</p>
		</div>
	</div>
{% endblock %}
{% block body %}
	<div class="{{ namespace }}cardProduct__revealAction">
		<ul class="{{ namespace }}cardProduct__revealActionInner {{ namespace }}btnGroup">
			<li>
				{% render "@btn-secondary",{
					classes: ["stretched-link"],
					eltType: "a",
					text: "Découvrir"
				},true %}
			</li>
			<li class="{{ namespace }}aboveClickArea">
				{% render "@btn-primary--icon-right",{
					eltType: "a",
					text: "Faire une demande",
					icon: "icon-arrownext"
				},true %}
			</li>
		</ul>
	</div>
{% endblock %}
{% block footer %}
{% endblock %}