Card Product Horizontal: Small Img Big

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.

The title link uses stretched-link to open the product page from the card surface. Set titleHref for that destination. When present, the button remains a separate action above the stretched link; set buttonHref and buttonText for it. Set hideButton to true for a card with only the title action.

Variant classes

Classes for various variants include:

  • -cardProductRowSmall
  • -cardProductRow
<article class="sds-cardProduct sds-box  sds-scaleInteraction -boxInsetMd -cardProductRowSmall">
    <div class="sds-cardProduct__inner sds-stackXl">
        <div class="sds-cardProduct__mainContent">

            <div class="sds-media -mediaXl -mediaHasBg">

                <img src="https://sds.apart.lu/media/illustrations/svg240x240/spot/sdsillu-safecover.svg" alt="">

            </div>
            <div class="sds-cardProduct__text sds-stackSm d-lg-flex flex-lg-column justify-content-lg-center flex-grow-1">
                <div class="sds-cardProduct__header">
                    <ul class="sds-btnGroup">
                        <li>
                            <span class="sds-badge badge -badgeHighlight -badgeMuted">

                                badge

                            </span>
                        </li>
                    </ul>
                </div>
                <div class="sds-cardProduct__textContent sds-stackLg">
                    <div class="sds-stackXs">
                        <h3 class="h3"><a href="#card-action" class="stretched-link">Prêt personnel</a></h3>
                        <p>Empruntez au meilleur taux pour financer vos dépenses importantes</p>
                    </div>

                    <div class="sds-aboveClickArea">
                        <a href="#button-action" class="sds-btn -btnSecondary">

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

                            </span>

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

                        </a>
                    </div>

                </div>
            </div>

        </div>

    </div>
</article>
 
{% extends "@card-product-frame" %}
{% block header %}
	{% render "@media--xl",{
		classes: ["-mediaHasBg"],
		internalResource: false,
		img: img
	},true %}
	<div class="{{ namespace }}cardProduct__text {{ namespace }}stackSm d-lg-flex flex-lg-column justify-content-lg-center flex-grow-1">
		<div class="{{ namespace }}cardProduct__header">
			<ul class="{{ namespace }}btnGroup">
				<li>
					{% render "@badge--highlight-muted" %}
				</li>
			</ul>
		</div>
		<div class="{{ namespace }}cardProduct__textContent {{ namespace }}stackLg">
			<div class="{{ namespace }}stackXs">
				<h3 class="h3"><a href="{{ titleHref or '#!' }}" class="stretched-link">{{ title }}</a></h3>
				<p>{{ text }}</p>
			</div>
			{% if not hideButton %}
				<div class="{{ namespace }}aboveClickArea">
					{% render "@btn-secondary--icon-right", {
						eltType: "a",
						href: buttonHref or "#!",
						text: buttonText or "{Label}",
						icon: "icon-arrownext"
					}, true %}
				</div>
			{% endif %}
		</div>
	</div>
{% endblock %}
{% block body %}
{% endblock %}