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 -form">
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 -form">
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 -form">
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 -form">
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 -elevated 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>
<a href="#!" tabindex="0" 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>
</a>
</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 -h3"></span>
</div>
<p>
<span class="sds-skeletonUnit -textBody"></span>
</p>
</div>
<div class="sds-stackLg">
<div class="form-group">
<span class="sds-skeletonUnit -formGroup"></span>
</div>
<div class="form-group">
<span class="sds-skeletonUnit -formGroup"></span>
</div>
<div class="form-group">
<span class="sds-skeletonUnit -formGroup"></span>
</div>
<div class="form-group">
<span class="sds-skeletonUnit -formGroup"></span>
</div>
</div>
</fieldset>
</div>
<div class="col-12 sds-stackSm">
<span class="sds-skeletonUnit -floating"></span>
<div class="sds-box -insetLg -elevated 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>
<a href="#!" tabindex="0" 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>
</a>
</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 -elevated {{ 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 -elevated {{ 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>