Housing Embed

No notes defined.

<!-- Default -->
<div class="sds-embed sds-housingEmbed sds-box sds-stackXl">
    <img class="sds-embed__logo img-fluid" src="../../media/logos/logo-bcee-secondary.svg" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
            <fieldset class="sds-stackXl">
                <div class="sds-stackXs">
                    <h3 class="h3">Financez votre projet</h3>
                    <p>Calculez les mensualités de votre prêt</p>
                </div>
                <div class="sds-stackLg">
                    <div class="form-group">
                        <label for="inputHousingEmbed-price" class="sds-label -labelForm">
                            Prix du bien

                        </label>
                        <div class="sds-input -hasShadow">
                            <input id="inputHousingEmbed-price" class="sds-input form-control" type="number" placeholder="0" value="500">

                            <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                <div class="sds-input__shadowValue">
                                    500
                                </div>
                                <div class="sds-input__shadowCurrency">
                                    €
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputHousingEmbed-apport" class="sds-label -labelForm">
                            Apport personnel

                        </label>
                        <div class="sds-input -hasShadow">
                            <input id="inputHousingEmbed-apport" class="sds-input form-control" type="number" placeholder="0" value="0">

                            <div class="sds-input__shadowInput form-control" aria-hidden="true">
                                <div class="sds-input__shadowValue">
                                    0
                                </div>
                                <div class="sds-input__shadowCurrency">
                                    €
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputHousingEmbed-rateRange" class="sds-label -labelForm">
                            Taux nominal

                        </label>
                        <div class="sds-range -alignToInput">
                            <div class="sds-range__body">
                                <input type="range" class="custom-range" id="inputHousingEmbed-rateRange" value="5" min="0" max="10">

                                <div class="sds-range__indicator">
                                    <span>5</span>%
                                </div>

                            </div>

                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputHousingEmbed-durationRange" class="sds-label -labelForm">
                            Durée

                        </label>
                        <div class="sds-range -alignToInput">
                            <div class="sds-range__body">
                                <input type="range" class="custom-range" id="inputHousingEmbed-durationRange" value="15" min="0" max="30">

                                <div class="sds-range__indicator">
                                    <span>15</span>ans
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-12 sds-stackSm">
            <div class="sds-box -insetLg -boxSunken sds-stackSm">
                <h4 class="h4">Récapitulatif</h4>

                <table class="sds-infoTable table -hasTotal">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant du prêt

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">500.000,00</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Taux nominal

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">9,00</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        TAEG

                                    </div>

                                    <button type="button" class="sds-infoDot -small" data-trigger="focus" data-container="body" data-placement="right" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                        <span class="sr-only">Show more info</span>
                                    </button>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">3,18</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Mensualité

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountXl -hasTotal">
                                        <span class="sds-amount__value">4.043,45</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

                <div class="sds-exceptionStackMd sds-stackMd d-flex flex-column justify-content-center align-items-center text-center">
                    <a href="" class="sds-btn -btnPrimary">

                        <span class="sds-btn__text">Faire ma demande en ligne</span>

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

                    </a>
                    <a href="" class="sds-btn -btnSecondary -btnInverse">

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

                        <span class="sds-btn__text">Fixer un rendez-vous</span>

                    </a>
                </div>
            </div>
            <p class="sds-formDisclaimer -small -insetHorizMd">
                La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
            </p>
        </div>
    </div>
</div>


<!-- Loading -->
<div class="sds-embed sds-housingEmbed sds-box sds-stackXl">
    <img class="sds-embed__logo img-fluid" src="../../media/logos/logo-bcee-secondary.svg" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2 align-items-stretch">
        <div class="col-12">
            <fieldset class="sds-stackXl">
                <div class="sds-stackXs">
                    <div class="h3">
                        <span class="sds-skeletonUnit -skeletonUnitH3"></span>
                    </div>
                    <p>
                        <span class="sds-skeletonUnit -skeletonUnitTextBody"></span>
                    </p>
                </div>
                <div class="sds-stackLg">
                    <div class="form-group">
                        <span class="sds-skeletonUnit -skeletonUnitFormGroup"></span>
                    </div>
                    <div class="form-group">
                        <span class="sds-skeletonUnit -skeletonUnitFormGroup"></span>
                    </div>
                    <div class="form-group">
                        <span class="sds-skeletonUnit -skeletonUnitFormGroup"></span>
                    </div>
                    <div class="form-group">
                        <span class="sds-skeletonUnit -skeletonUnitFormGroup"></span>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-12 sds-stackSm">
            <span class="sds-skeletonUnit -floating"></span>
            <div class="sds-box -insetLg -boxSunken sds-stackSm">
                <h4 class="h4">Récapitulatif</h4>

                <table class="sds-infoTable table -hasTotal">
                    <tbody>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Montant du prêt

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">500.000,00</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Taux nominal

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">9,00</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        TAEG

                                    </div>

                                    <button type="button" class="sds-infoDot -small" data-trigger="focus" data-container="body" data-placement="right" data-toggle="popover" title="Popover title" data-content="Le détail de la / des transactions (bénéficiaire et communication) sera masqué dans les mouvements des transactions (sur S-Net Pro et dans les extraits de compte)">
                                        <span class="sds-icon sds-icon-infocirclefill"></span>
                                        <span class="sr-only">Show more info</span>
                                    </button>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountLg -hasTotal">
                                        <span class="sds-amount__value">3,18</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-label">
                                        Mensualité

                                    </div>

                                </div>
                            </td>
                            <td class="">
                                <div class="sds-infoTable__cellContent">

                                    <div class="sds-amount -amountXl -hasTotal">
                                        <span class="sds-amount__value">4.043,45</span>

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

                                    </div>

                                </div>
                            </td>
                        </tr>

                    </tbody>
                </table>

                <div class="sds-exceptionStackMd sds-stackMd d-flex flex-column justify-content-center align-items-center text-center">
                    <a href="" class="sds-btn -btnPrimary">

                        <span class="sds-btn__text">Faire ma demande en ligne</span>

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

                    </a>
                    <a href="" class="sds-btn -btnSecondary -btnInverse">

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

                        <span class="sds-btn__text">Fixer un rendez-vous</span>

                    </a>
                </div>
            </div>
            <p class="sds-formDisclaimer -small -insetHorizMd">
                La présente simulation est uniquement fournie à titre indicatif et n'engage nullement la Spuerkeess. Pour une proposition concrète, nous vous prions de vous adresser à une de nos agences, respectivement de présenter une demande en ligne.
            </p>
        </div>
    </div>
</div>


<!-- Default -->
<div class="{{ namespace }}embed {{ namespace }}housingEmbed {{ namespace }}box {{ namespace }}stackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <img class="{{ namespace }}embed__logo img-fluid" src="{{ (mediaPath + "/logos/logo-bcee-secondary.svg") | path }}" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2">
        <div class="col-12">
			<fieldset class="{{ namespace }}stackXl">
				<div class="{{ namespace }}stackXs">
					<h3 class="h3">Financez votre projet</h3>
					<p>Calculez les mensualités de votre prêt</p>
				</div>
				<div class="{{ namespace }}stackLg">
					<div class="form-group">
						{% render "@label--form",{
							text: "Prix du bien",
							labelFor: "inputHousingEmbed-price"
						},true %}
						{% render "@input--shadow",{
							value: "500",
							id: "inputHousingEmbed-price"
						},true %}
					</div>
					<div class="form-group">
						{% render "@label--form",{
							text: "Apport personnel",
							labelFor: "inputHousingEmbed-apport"
						},true %}
						{% render "@input--shadow",{
							value: "0",
							id: "inputHousingEmbed-apport"
						},true %}
					</div>
					<div class="form-group">
						{% render "@label--form",{
							text: "Taux nominal",
							labelFor: "inputHousingEmbed-rateRange"
						},true %}
						{% render "@range",{
							classes: ["-alignToInput"],
							footer: false,
							hasIndicator: true,
							minValue: "0",
							maxValue: "10",
							currentValue: "5",
							indicatorValueType: "%",
							id: "inputHousingEmbed-rateRange"
						},true %}
					</div>
					<div class="form-group">
						{% render "@label--form",{
							text: "Durée",
							labelFor: "inputHousingEmbed-durationRange"
						},true %}
						{% render "@range",{
							classes: ["-alignToInput"],
							footer: false,
							hasIndicator: true,
							minValue: "0",
							maxValue: "30",
							currentValue: "15",
							indicatorValueType: "ans",
							id: "inputHousingEmbed-durationRange"
						},true %}
					</div>
				</div>
			</fieldset>
        </div>
        <div class="col-12 {{ namespace }}stackSm">
            <div class="{{ namespace }}box -insetLg -boxSunken {{ namespace }}stackSm">
            	<h4 class="h4">Récapitulatif</h4>
                {% render '@snet-info-table',{
					classes: ["-hasTotal"],
                    tableItems: tableItems
                }, true %}
				<div class="{{ namespace}}exceptionStackMd {{ namespace}}stackMd d-flex flex-column justify-content-center align-items-center text-center">
					{% render '@btn-primary--icon-right',{
						eltType: "a",
						icon: "icon-arrownext",
						text: "Faire ma demande en ligne"
					}, true %}
					{% render '@btn-secondary-inverse--icon-left',{
						eltType: "a",
						icon: "icon-calendar",
						text: "Fixer un rendez-vous"
					}, true %}
				</div>
            </div>
			{% render '@form-disclaimer--small',{
				modifiers: ["-small", "-insetHorizMd"]
			}, true %}
        </div>
    </div>
</div>

<!-- Loading -->
<div class="{{ namespace }}embed {{ namespace }}housingEmbed {{ namespace }}box {{ namespace }}stackXl{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
    <img class="{{ namespace }}embed__logo img-fluid" src="{{ (mediaPath + "/logos/logo-bcee-secondary.svg") | path }}" alt="Spuerkeess.lu Logo">
    <div class="row row-cols-md-2 align-items-stretch">
        <div class="col-12">
			<fieldset class="{{ namespace }}stackXl">
				<div class="{{ namespace }}stackXs">
					<div class="h3">
						{% render "@skeleton-unit--h3" %}
					</div>
					<p>
						{% render "@skeleton-unit--text-body" %}
					</p>
				</div>
				<div class="{{ namespace }}stackLg">
					<div class="form-group">
						{% render "@skeleton-unit--form-group" %}
					</div>
					<div class="form-group">
						{% render "@skeleton-unit--form-group" %}
					</div>
					<div class="form-group">
						{% render "@skeleton-unit--form-group" %}
					</div>
					<div class="form-group">
						{% render "@skeleton-unit--form-group" %}
					</div>
				</div>
			</fieldset>
        </div>
		<div class="col-12 {{ namespace }}stackSm">
			{% render '@skeleton-unit',{
				classes: ["-floating"]
			},true %}
			<div class="{{ namespace }}box -insetLg -boxSunken {{ namespace }}stackSm">
				<h4 class="h4">Récapitulatif</h4>
				{% render '@snet-info-table',{
					classes: ["-hasTotal"],
					tableItems: tableItems
				}, true %}
				<div class="{{ namespace}}exceptionStackMd {{ namespace}}stackMd d-flex flex-column justify-content-center align-items-center text-center">
					{% render '@btn-primary--icon-right',{
						eltType: "a",
						icon: "icon-arrownext",
						text: "Faire ma demande en ligne"
					}, true %}
					{% render '@btn-secondary-inverse--icon-left',{
						eltType: "a",
						icon: "icon-calendar",
						text: "Fixer un rendez-vous"
					}, true %}
				</div>
			</div>
			{% render '@form-disclaimer--small',{
				modifiers: ["-small", "-insetHorizMd"]
			}, true %}
		</div>
    </div>
</div>