<section class="splitter splitter_bg-color_white splitter_padding_top_large splitter_padding_bottom_large ">
<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="process-states-wrap">
<div class="process-states">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-mr-ml col-md-12 col-lg-12 col">
<ul>
<li>
<div class="states active">
<label class="label-m" for="">Pendiente</label>
<h3 class="
title-m
">1 Solicitud</h3>
<div class="
bodycopy-s
">
Es el primer paso, has elegido tu hipoteca y quieres una financiación a medida. Empieza el camino.
</div>
<span class="triangle"></span>
</div>
</li>
<li>
<div class="states">
<label class="label-m" for="">Pendiente</label>
<h3 class="
title-m
">2 Estudio</h3>
<div class="
bodycopy-s
">
Has entregado toda la documentación y nuestro equipo la está analizando. ¡Seguimos avanzando!
</div>
</div>
</li>
<li>
<div class="states">
<label class="label-m" for="">Pendiente</label>
<h3 class="
title-m
">3 Pre-Firma</h3>
<div class="
bodycopy-s
">
Tu documentación ha sido aceptada. Ahora, elige la notaría y pon fecha a tu firma. ¡Estás a un paso!
</div>
</div>
</li>
<li>
<div class="states">
<label class="label-m" for="">Pendiente</label>
<h3 class="
title-m
">4 Firma</h3>
<div class="
bodycopy-s
">
Después de tu tiempo de reflexión, llega el momento más importante. Sí, tu casa pronto será tuya.
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-mr-ml col-md-12 col-lg-12 col">
<div class="pagination">
<ul class="pagination__list">
<li class="pagination__item">
<div class="pagination__link pagination__prev">
<svg class="icon icon-16_arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-left"></use>
</svg>
</div>
</li>
<li class="pagination__item">
<div class="pagination__link pagination__next">
<svg class="icon icon-16_arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-left"></use>
</svg>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="process-states-wrap" {{#if id}} id="{{id}}" {{/if}}>
<div class="process-states">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-mr-ml col-md-12 col-lg-12 col">
<ul>
{{#each item}}
<li>
{{> @states this.states }}
</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-mr-ml col-md-12 col-lg-12 col">
<div class="pagination">
<ul class="pagination__list">
<li class="pagination__item">
<div class="pagination__link pagination__prev">
{{ render '@icon--16-arrow-left' }}
</div>
</li>
<li class="pagination__item">
<div class="pagination__link pagination__next">
{{ render '@icon--16-arrow-left' }}
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"item": [
{
"states": {
"active": true,
"title": {
"text": "1 Solicitud"
},
"text": {
"text": "Es el primer paso, has elegido tu hipoteca y quieres una financiación a medida. Empieza el camino."
},
"label": {
"text": "Pendiente"
}
}
},
{
"states": {
"title": {
"text": "2 Estudio"
},
"text": {
"text": "Has entregado toda la documentación y nuestro equipo la está analizando. ¡Seguimos avanzando!"
},
"label": {
"text": "Pendiente"
}
}
},
{
"states": {
"title": {
"text": "3 Pre-Firma"
},
"text": {
"text": "Tu documentación ha sido aceptada. Ahora, elige la notaría y pon fecha a tu firma. ¡Estás a un paso!"
},
"label": {
"text": "Pendiente"
}
}
},
{
"states": {
"title": {
"text": "4 Firma"
},
"text": {
"text": "Después de tu tiempo de reflexión, llega el momento más importante. Sí, tu casa pronto será tuya."
},
"label": {
"text": "Pendiente"
}
}
}
]
}
.process-states-wrap {
.process-states{
overflow-x:scroll;
scrollbar-width: none;
ul {
width: 1098px;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
gap: 30px;
li {
width: 249px;
display: flex;
height: 100%;
}
}
}
.pagination{
margin-top: 30px;
padding-bottom: 30px;
border-bottom: solid 1px var(--color-border-disable);
@media (--viewport-md-min) {
display:none;
}
.pagination__list{
display: flex;
justify-content: center;
width: auto;
gap: 30px;
li{padding:0;
width: auto;margin: 0;
.pagination__link:before, .pagination__link:after{display: none;}
}
}
}
}
No notes defined.