Card Product Vertical: Checkbox

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">
    <div class="sds-cardProduct__inner sds-stackXl">
        <div class="sds-cardProduct__mainContent">

            <div class="d-flex justify-content-between align-items-start sds-staticGapMd">

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

                    <img src="../../media/illustrations/svg/hero/sdsillu-packagefull.svg" alt="">

                </div>
                <div class="sds-checkbox custom-control custom-checkbox sds-cardProduct__checkbox">
                    <input value="zebra-premium" type="checkbox" name="card-product-choice" class="sr-only custom-control-input " id="card-product-checkbox"><span class="sds-checkboxDot sds-checkbox__shape" aria-hidden="true"></span>
                    <label class="custom-control-label" for="card-product-checkbox"></label>

                </div>
            </div>
            <div class="sds-stackLg">
                <div class="sds-cardProduct__header">
                    <div class="sds-metaColor sds-textHelperSmall">Carte de débit</div>
                </div>
                <div class="sds-stackXs">
                    <h3 class="h3"><label for="card-product-checkbox" class="stretched-link">Package Zebra Premium</label></h3>
                    <p class="sds-cardProduct__description">Le package bancaire complet, idéal pour gérer votre relation bancaire au meilleur prix. Tenue de compte: 9,50 EUR/mois (6 mois gratuits)</p>
                </div>
            </div>

        </div>

        <footer class="sds-cardProduct__footer sds-stackLg">

            <div class="sds-boxPrice sds-box -boxSunken -boxInsetLg sds-staticStackXl">
                <div class="sds-staticStackXl -stackBorder">

                    <div class="sds-staticStackXs">
                        <dl class="d-flex justify-content-between flex-wrap align-items-baseline sds-staticInlineMd">
                            <dt class="flex-shrink-0">

                                <span class="sds-label">
                                    Tarif

                                </span>

                            </dt>
                            <dd>
                                <div class="sds-boxPrice__price d-flex flex-column align-items-end">

                                    <div class="sds-amount -amountNeutral -amountXl">

                                        <div class="sds-amount__body">
                                            <span class="sds-amount__value">3.50</span>

                                            <span class="sds-amount__currency">€</span>

                                        </div>

                                        <span class="sds-amount__suffix">
                                            / mois
                                        </span>

                                    </div>

                                </div>
                            </dd>
                        </dl>

                        <p class="sds-metaColor sds-textHelperSmall">Lorem ipsum dolor sit amet</p>

                    </div>

                </div>

            </div>

            <div class="text-center sds-aboveClickArea">
                <a href="#" class="sds-btn -btnSecondary -btnInverse">

                    <span class="sds-btn__text">
                        En savoir plus

                    </span>

                </a>
            </div>

        </footer>

    </div>
</article>
 
{% extends "@card-product-frame" %}
{% block header %}
	<div class="d-flex justify-content-between align-items-start {{ namespace }}staticGapMd">
		{% render "@media--lg", {
			classes: ["-mediaHasBg"],
			img: imgSmall
		}, true %}
		{% render "@checkbox", {
			modifiers: [namespace + "cardProduct__checkbox"],
			id: id,
			inputName: inputName,
			value: value,
			checked: checked,
			disabled: disabled,
			text: ""
		}, true %}
	</div>
	<div class="{{ namespace }}stackLg">
		<div class="{{ namespace }}cardProduct__header">
			<div class="{{ namespace }}metaColor {{ namespace }}textHelperSmall">{{ meta }}</div>
		</div>
		<div class="{{ namespace }}stackXs">
			<h3 class="h3"><label for="{{ id }}" class="stretched-link">{{ title }}</label></h3>
			<p class="{{ namespace }}cardProduct__description">{{ text }}</p>
		</div>
	</div>
{% endblock %}
{% block body %}
{% endblock %}
{% block footer %}
	{% render "@box-price", {
		header: false,
		alternativePrice: false,
		argument: false,
		link: false,
		disclaimer: false,
		download: false,
		compactAmount: true,
		priceLabel: priceLabel,
		priceDescription: priceDescription,
		amountContext: amountContext
	}, true %}
	<div class="text-center {{ namespace }}aboveClickArea">
		{% render "@btn-secondary-inverse", {
			eltType: "a",
			href: linkHref,
			text: linkText
		}, true %}
	</div>
{% endblock %}