<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 ico">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="simulator-results__previous-info">
<div class="quota-simulation-summary lite">
<div class="quota-simulation-summary--wrap">
<div class="quota-simulation-summary--content">
<div class="wrap">
<div><svg class="icon icon-16_user ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_user"></use>
</svg>
</div> <span class="caption-label">1 titular / 33 años / 2.000 € / sin prestamos activos</span>
</div>
<div class="wrap">
<div><svg class="icon icon-16_home ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_home"></use>
</svg>
</div> <span class="caption-label">MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO</span>
</div>
<div class="wrap">
<div><svg class="icon icon-16_savings ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_savings"></use>
</svg>
</div> <span class="caption-label">financiación: 220.000 € / aportación: 100.000 / gastos e impuestos: 68.000 €</span>
</div>
</div>
</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__value-banner">
<div class="value-banner" id="fixedFinancing">
<div class="value-banner__main">
<div class="icon-wrap">
<svg class="icon icon-56_party ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#56_party"></use>
</svg>
</div>
<div class="value-banner__label">
<div class="value-banner__label-text">
<span class="title-l
">¡Hurra!</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="value-banner__chosen">
<span class="title-l
">
<h2>Cumples con todos los requisitos para solicitar el aval ICO</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
</div>
</li>
<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 estudio personalizado
</a>
</div>
</div>
</li>
</ul>
</div>
<div class="simulator-results__numbers-additional">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="requirements-banner">
<span class="title-m
">
<h3>Resumen de requisitos</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="list twocols">
<ul>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">Hasta dos titulares.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">Cumple la antigüedad en residencia española.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">Menor de 36 y mayor de 18 años.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">Los ingresos anuales no superan el 4,5 veces el IPREM</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">No es propietario de otra vivienda.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">No tiene un patrimonio superior a 100.000 €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<a class="link
" href="#">
<span>Ver todos los requisitos</span>
</a>
</div>
</li>
</ul>
</div>
<p class="legal">
<span class="bodycopy-s">La presente simulación ha sido obtenida a partir de los datos suministrados por el usuario y variará según las características que se rellenen en cada consulta. (ACLAAR LO DE LOS INGRESOS BRUTOS) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</p>
<div class="row brands">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="brands">
<span class="title-m
">UCI - Entidad adherida a la línea de avales ICO para jóvenes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<ul>
<li>
<img src="/dist/images/brand_ico.png" alt="ICO" width="150px" />
</li>
<li>
<img src="/dist/images/brand_ministerio-vivienda.png" alt="" width="250px" />
</li>
<li>
<img src="/dist/images/brand_UCI.png" alt="" width="124px" />
</li>
</ul>
</div>
</div>
</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": "€"
},
"icon": {
"name": "56_party"
},
"isJustText": true,
"title": {
"type": "-l",
"text": "¡Hurra!"
},
"result": {
"type": "-l",
"text": "<h2>Cumples con todos los requisitos para solicitar el aval ICO</h2>"
}
},
"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 estudio personalizado"
},
"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"
}
},
"isICO": true,
"quota-simulation-summary": {
"lite": true,
"item": [
{
"text": {
"text": "1 titular / 33 años / 2.000 € / sin prestamos activos",
"type": "-label"
},
"icon": {
"name": "16_user"
}
},
{
"text": {
"text": "MADRID / 320.000 € / VIVIENDA HABITUAL / SEGUNDA MANO",
"type": "-label"
},
"icon": {
"name": "16_home"
}
},
{
"text": {
"text": "financiación: 220.000 € / aportación: 100.000 / gastos e impuestos: 68.000 €",
"type": "-label"
},
"icon": {
"name": "16_savings"
}
}
]
},
"requirements": {
"title": {
"text": "<h3>Resumen de requisitos</h3>",
"type": "-m"
},
"link": {
"text": "Ver todos los requisitos",
"href": "#"
},
"list": {
"isTwoCols": true,
"listitem": [
{
"name": "bullet-list",
"text": "Hasta dos titulares.",
"type": "-m"
},
{
"name": "bullet-list",
"text": "Cumple la antigüedad en residencia española.",
"type": "-m"
},
{
"name": "bullet-list",
"text": "Menor de 36 y mayor de 18 años.",
"type": "-m"
},
{
"name": "bullet-list",
"text": "Los ingresos anuales no superan el 4,5 veces el IPREM",
"type": "-m"
},
{
"name": "bullet-list",
"text": "No es propietario de otra vivienda.",
"type": "-m"
},
{
"name": "bullet-list",
"text": "No tiene un patrimonio superior a 100.000 €",
"type": "-m"
}
]
}
},
"legal": {
"text": "La presente simulación ha sido obtenida a partir de los datos suministrados por el usuario y variará según las características que se rellenen en cada consulta. (ACLAAR LO DE LOS INGRESOS BRUTOS) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"type": "-s"
},
"brands": {
"title": {
"text": "UCI - Entidad adherida a la línea de avales ICO para jóvenes",
"type": "-m"
},
"brand_item": [
{
"src": "/dist/images/brand_ico.png",
"alt": "ICO",
"width": "150px"
},
{
"src": "/dist/images/brand_ministerio-vivienda.png",
"width": "250px"
},
{
"src": "/dist/images/brand_UCI.png",
"width": "124px"
}
]
}
}
.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.