Product Detail

No notes defined.

<!-- Default -->
<div class="sds-stackLg">
    <ul class="sds-list -checkIcon -checkIconAlt">

        <li>

            item

        </li>

        <li>

            item

        </li>

        <li>

            item

        </li>

        <li class="sds-list__unavailable">

            <s>item unavailable</s>

        </li>

    </ul>
    <p class="sds-textHelperSmall sds-metaColor">*Footnote sous réserve d'acceptation du dossier</p>
</div>


<!-- Summary -->
<div class="sds-stackLg">
    <div class="sds-box -insetLg -boxSunken position-relative">
        <div class="sds-stackLg">
            <div class="sds-stackLg -stackBorder">
                <div class="sds-staticInlineMd d-flex align-items-center justify-content-between">
                    <div class="h4">Le package bancaire complet Idéal pour gérer votre relation bancaire</div>
                    <div class="sds-aboveClickArea">
                        <button type="button" class="sds-infoDot" data-toggle="modal" data-target="#">
                            <span class="sds-icon sds-icon-infocircleborder"></span>
                            <span class="sr-only">Show more info</span>
                        </button>
                    </div>
                </div>
                <table class="sds-infoTable table">
                    <tr>
                        <td>
                            <div class="sds-infoTable__cellContent">
                                <div class="sds-label">
                                    Prix par mois

                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="sds-infoTable__cellContent">
                                <div class="sds-colorInherit h1 text-right">9,50 €</div>

                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="sds-staticStackMd">
                <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 sds-textHelper text-center">Gratuit les 6 premiers mois</p>
            </div>
        </div>
    </div>
    <div class="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>
</div>


<!-- Default -->
<div class="{{ namespace }}stackLg">
	{% render "@list--checked-alt-unavailable" %}
	<p class="{{ namespace }}textHelperSmall {{ namespace }}metaColor">*Footnote sous réserve d'acceptation du dossier</p>
</div>

<!-- Summary -->
<div class="{{ namespace }}stackLg">
	<div class="{{ namespace }}box -insetLg -boxSunken position-relative">
		<div class="{{ namespace }}stackLg">
			<div class="{{ namespace }}stackLg -stackBorder">
				<div class="{{ namespace }}staticInlineMd d-flex align-items-center justify-content-between">
					<div class="h4">Le package bancaire complet Idéal pour gérer votre relation bancaire</div>
					<div class="{{ namespace }}aboveClickArea">
						{% render "@info-dot--modal" %}
					</div>
				</div>
				<table class="{{ namespace }}infoTable table">
					<tr>
						<td>
							<div class="{{ namespace }}infoTable__cellContent">
								{% render "@label",{
									eltType: "div",
									text: "Prix par mois"
								},true %}
							</div>
						</td>
						<td>
							<div class="{{ namespace }}infoTable__cellContent">
								<div class="{{ namespace }}colorInherit h1 text-right">9,50 €</div>

							</div>
						</td>
					</tr>
				</table>
			</div>
			<div class="{{ namespace }}staticStackMd">
				<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 {{ namespace }}textHelper text-center">Gratuit les 6 premiers mois</p>
			</div>
		</div>
	</div>
	<div class="text-center">
		{% render "@btn-secondary-inverse--icon-left",{
			eltType: "a",
			text: "Consulter le dépliant",
			icon: "icon-download"
		},true %}
	</div>
</div>