<section class="splitter splitter_bg-color_white ">
<div class="container">
<div class="splitter__wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="simulator-results">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="simulator-results__previous-info">
<div class="simulator-results__previous-info-label">
<div class="text-label-m">2 TITULARES / 30 AÑOS / 1600€ + 1500€ NETOS AL MES / SANTA CRUZ DE TENERIFE</div>
</div>
</div>
<div class="simulator-results__numbers">
<div class="simulator-results__numbers-main">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="simulator-results__info-box">
<div class="simulator-results__info-box-title">
<h3 class="
title-m
title-m_color_light
">Rellena estos campos y estarás un paso más cerca de tu hipoteca. Con unos pocos datos más podrás enviar tu solicitud de hipoteca. ¿A qué esperas?</h3>
</div>
<div class="simulator-results__info-box-btn">
<a class="btn
" href="#" id="">
Solicita tu hipoteca
</a>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="simulator-results__value-banner">
<div class="value-banner" id="fixedFinancing">
<div class="value-banner__main">
<div class="value-banner__label">
<div class="value-banner__label-text">
<h3 class="
title-m
">UCI te financia</h3>
</div>
</div>
<div class="value-banner__chosen">
<input class="value-banner__chosen-value" value="170000" readonly>
<div class="value-banner__chosen-label">
<div class="
number-m
"><span>€</span></div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="simulator-results__numbers-additional">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="simulator-results__value-banner">
<div class="value-banner" id="housePrice">
<div class="value-banner__main">
<div class="value-banner__label">
<div class="value-banner__label-text">
<h3 class="
title-m
">Puedes comprar una casa de hasta</h3>
</div>
</div>
<div class="value-banner__chosen">
<input class="value-banner__chosen-value" min="200000" max="500000" data-default="200000" readonly>
<div class="value-banner__chosen-label">
<div class="
number-m
"><span>€</span></div>
</div>
</div>
<div class="value-banner__slider"></div>
<div class="value-banner__legend">
<div class="value-banner__legend-start">
<div class="
number-xs
"><span></span></div>
</div>
<div class="value-banner__legend-end">
<div class="
number-xs
"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="simulator-results__value-banner">
<div class="value-banner" id="clientInput">
<div class="value-banner__main">
<div class="value-banner__label">
<div class="value-banner__label-text">
<h3 class="
title-m
">Aportación</h3>
</div>
</div>
<div class="value-banner__chosen">
<input class="value-banner__chosen-value" min="6000" max="100000" data-default="6000" readonly>
<div class="value-banner__chosen-label">
<div class="
number-m
"><span>€</span></div>
</div>
</div>
<div class="value-banner__slider"></div>
<div class="value-banner__legend">
<div class="value-banner__legend-start">
<div class="
number-xs
"><span></span></div>
</div>
<div class="value-banner__legend-end">
<div class="
number-xs
"><span></span></div>
</div>
</div>
</div>
<div class="value-banner__additional">
<div class="lightbox " value="isDefault">
<div class="lightbox__trigger">
<button class="link
link_simple
link_has-icon link_has-icon_after
" type="button">
<span>Ver desglose de gastos</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</button>
</div>
<div class="lightbox__overlay" id="">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__title">
<h2 class="
title-l
">
Ver desglose de gastos
</h2>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="simulator-results{{#if isICO}} ico{{/if}}">
<div class="row">
<div class="col-xs-12{{#if isICO}} col-ms-12{{else}} col-ms-9{{/if}} col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="simulator-results__previous-info">
{{#if isICO}}
{{> @quota-simulation-summary quota-simulation-summary }}
{{else}}
<div class="simulator-results__previous-info-label">
{{> @text-label-m previous-info-label }}
</div>
{{/if}}
</div>
<div class="simulator-results__numbers">
<div class="simulator-results__numbers-main">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{#if isICO}}
<div class="simulator-results__value-banner">
{{> @value-banner main-banner }}
</div>
{{else}}
<div class="simulator-results__info-box">
<div class="simulator-results__info-box-title">
{{> @title-m info-box-title }}
</div>
<div class="simulator-results__info-box-btn">
{{> @btn info-box-btn }}
</div>
</div>
{{/if}}
</li>
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
{{#if isICO}}
<div class="simulator-results__info-box">
<div class="simulator-results__info-box-title">
{{> @title-m info-box-title }}
</div>
<div class="simulator-results__info-box-btn">
{{> @btn info-box-btn }}
</div>
</div>
{{else}}
<div class="simulator-results__value-banner">
{{> @value-banner main-banner }}
</div>
{{/if}}
</li>
</ul>
</div>
<div class="simulator-results__numbers-additional">
<ul class="row">
{{#if isICO}}
<li class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
{{> @requirements-banner requirements }}
</li>
{{else}}
{{#each additional-banner}}
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="simulator-results__value-banner">
{{> @value-banner this }}
</div>
</li>
{{/each}}
{{/if}}
</ul>
</div>
{{#if isICO}}
<p class="legal">
{{> @bodycopy legal }}
</p>
<div class="row brands">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
{{> @brands brands }}
</div>
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"previous-info-label": {
"text": "2 TITULARES / 30 AÑOS / 1600€ + 1500€ NETOS AL MES / SANTA CRUZ DE TENERIFE"
},
"main-banner": {
"id": "fixedFinancing",
"label": {
"text": "UCI te financia"
},
"value": "170000",
"tooltip": false,
"chosen-label": {
"number": "€"
}
},
"additional-banner": [
{
"id": "housePrice",
"label": {
"text": "Puedes comprar una casa de hasta"
},
"tooltip": false,
"min": 200000,
"max": 500000,
"default": 200000,
"chosen-label": {
"number": "€"
},
"legend-start": {
"text": "200.000€"
},
"legend-end": {
"text": "500.000€"
}
},
{
"id": "clientInput",
"label": {
"text": "Aportación"
},
"tooltip": false,
"min": 6000,
"max": 100000,
"default": 6000,
"chosen-label": {
"number": "€"
},
"legend-start": {
"text": "36.000€"
},
"legend-end": {
"text": "100.000€"
},
"lightbox": {
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Ver desglose de gastos"
},
"title": {
"text": "Ver desglose de gastos"
},
"rte": true
}
}
],
"info-box-title": {
"text": "Rellena estos campos y estarás un paso más cerca de tu hipoteca. Con unos pocos datos más podrás enviar tu solicitud de hipoteca. ¿A qué esperas?",
"colorLight": true
},
"info-box-btn": {
"href": "#",
"text": "Solicita tu hipoteca"
},
"form-list": [
{
"form-select": {
"distinguisher": "province",
"select": {
"chosen-label": "¿EN QUÉ PROVINCIA QUIERES COMPRAR?",
"option": [
{
"id": "randomProvinceId1",
"select-name": "Province",
"text": "Alicante"
},
{
"id": "randomProvinceId2",
"select-name": "Province",
"text": "Barcelona"
},
{
"id": "randomProvinceId3",
"select-name": "Province",
"text": "Biscay"
},
{
"id": "randomProvinceId4",
"select-name": "Province",
"text": "Valencia"
}
]
},
"error-message": {
"text": "Choose a province, please*"
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6",
"isRequired-1": true,
"form-radio-group-1": {
"distinguisher": "resident",
"tooltip-label": {
"label": {
"text": "¿ERES RESIDENTE EN ESPAÑA?"
}
},
"radio-group": [
{
"distinguisher": "resident-yes",
"id": "randomRadioId9",
"title": "Yes",
"name": "Spain resident",
"additionalAttributes": "checked",
"label": {
"text": "SI",
"type": "-placeholder-m"
}
},
{
"distinguisher": "resident-no",
"id": "randomRadioId10",
"title": "No",
"name": "Spain resident",
"label": {
"text": "NO",
"type": "-placeholder-m"
}
}
],
"error-message": {
"text": "Choose one of the options, please*"
}
},
"col-2": "col-xs-12 col-ms-12 col-sm-12 col-md-6 col-lg-6",
"isHidden-2": true,
"isRequired-2": true,
"distinguisher-2": "other-country",
"form-select-2": {
"select": {
"chosen-label": "Choose a country",
"option": [
{
"id": "randomOtherCountryId1",
"select-name": "Resident of other country",
"text": "Belarus"
},
{
"id": "randomOtherCountryId2",
"select-name": "Resident of other country",
"text": "Norway"
},
{
"id": "randomOtherCountryId3",
"select-name": "Resident of other country",
"text": "Poland"
},
{
"id": "randomOtherCountryId4",
"select-name": "Resident of other country",
"text": "Sweden"
},
{
"id": "randomOtherCountryId5",
"select-name": "Resident of other country",
"text": "Switzerland"
}
]
},
"error-message": {
"text": "Choose your country, please*"
}
}
}
],
"submit-btn": {
"btn": {
"type": "submit",
"text": "Solicita tu hipoteca"
}
}
}
.simulator-results {
&__previous-info {
margin-bottom: 20px;
@media (--viewport-sm-min) {
margin-bottom: 30px;
}
}
&__numbers {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
&-main {
@media (--viewport-sm-min) {
margin-top: 30px;
margin-bottom:30px;
}
li{
flex-basis: 46%;
max-width: 46%;
padding-left: 0;
padding-right:0;
margin-left:1.5%;
margin-right:1.5%;
background-color: var(--color-accent);
justify-content: center;
@media (--viewport-ms-max){
flex-basis: 100%;
max-width: 100%;
margin-left:0;
margin-right:0;
margin-bottom: 30px;
}
&:last-child{
background-color: var(--color-accent-light);
@media (--viewport-ms-max){margin-bottom: 30px;}
}
.simulator-results {
&__value-banner {
.value-banner {
background-color:unset;
@media (--viewport-sm-min) {
padding: 30px;
}
@media (--viewport-ms-max) {
padding: 30px;
}
}
}
}
}
}
&-additional {
li{
flex-basis: 46%;
max-width: 46%;
padding-left: 0;
padding-right:0;
margin-left:1.5%;
margin-right:1.5%;
background-color: var(--color-accent-light);
@media (--viewport-ms-max){
flex-basis: 100%;
max-width: 100%;
margin-left:0;
margin-right:0;
margin-bottom: 30px;
}
li{
flex-basis:auto;
max-width:none;
margin-left:inherit;
margin-right:inherit;
}
.simulator-results {
&__value-banner {
height: 100%;
.value-banner{
background-color:unset;
@media (--viewport-ms-max) {
padding: 30px;
}
}
}
}
}
}
}
&__info {
&-box {
padding: 50px 20px;
@media (--viewport-sm-min) {
padding: 50px 80px;
}
@media (--viewport-ms-max) {
padding: 30px;
}
&-btn {
margin-top: 22px;
}
}
}
&.ico{
@media (--viewport-ms-only) {
margin: 0 -15px;
max-width: calc(100% + 30px);
}
.simulator-results__previous-info{
margin-bottom: 40px;
}
.simulator-results__info-box{
@media (--viewport-ms-max) {
padding: 32px 30px;
}
}
.simulator-results__numbers {
&-main {
margin-top:0;
li{
background-color: var(--color-accent-light);
&:last-child{
background-color: var(--color-accent);
}
.simulator-results__value-banner{
.value-banner{
padding: 50px 80px;
@media (--viewport-ms-max) {
padding: 32px 30px;
}
}
}
}
}
&-additional {
li{
flex-basis: 95%;
max-width: 95%;
margin-left:1.5%;
margin-right:1.5%;
margin-bottom: 30px;
@media (--viewport-ms-max){
flex-basis: 100%;
max-width: 100%;
margin-left:0;
margin-right:0;
margin-bottom: 24px;
}
li{
flex-basis:auto;
max-width:none;
margin-left:inherit;
margin-right:inherit;
margin-bottom: 0;
}
}
}
}
.legal{
margin-bottom: 80px;
@media (--viewport-ms-max) {
margin-bottom: 64px;
padding: 0 20px;
}
}
}
}
No notes defined.