<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="steps accent-light">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="steps__description">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-md-5 col-lg-5 col">
<div class="steps__title">
<h2 class="
title-l
">
Estamos contigo para lo que necesites en cada paso
</h2>
</div>
</div>
</div>
</div>
<ul class="steps__list">
<li class="steps__item">
<div class="step">
<div class="row middle-sm">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<div class="step__head">
<div class="row middle-ms">
<div class="col-xs-12 col-ms-2 col-ms-ml col-sm-4 col-lg-4 col">
<div class="step__number">
<div class="
number-l
"><span>1</span></div>
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-8 col-lg-8 col">
<div class="step__title">
<h3 class="
title-m
">Antes de solicitar</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="step__body">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-ml col-sm-12 col-lg-12 col">
<div class="step__bodycopy">
<div class="
bodycopy-m
">
<p>Tendrás a tu servicio a tu propio gestor, un profesional con el que te sentirás acompañado de principio a fin. Por teléfono o en persona, te atenderemos cuando tú decidas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="steps__item">
<div class="step">
<div class="row middle-sm">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<div class="step__head">
<div class="row middle-ms">
<div class="col-xs-12 col-ms-2 col-ms-ml col-sm-4 col-lg-4 col">
<div class="step__number">
<div class="
number-l
"><span>2</span></div>
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-8 col-lg-8 col">
<div class="step__title">
<h3 class="
title-m
">En la tramitación</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="step__body">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-ml col-sm-12 col-lg-12 col">
<div class="step__bodycopy">
<div class="
bodycopy-m
">
<p>Creemos que para que todo funcione bien, ambas partes - cliente y entidad - deben ser ??responsables y conscientes de lo que supone contratar una hipoteca.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="steps__item">
<div class="step">
<div class="row middle-sm">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<div class="step__head">
<div class="row middle-ms">
<div class="col-xs-12 col-ms-2 col-ms-ml col-sm-4 col-lg-4 col">
<div class="step__number">
<div class="
number-l
"><span>3</span></div>
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-8 col-lg-8 col">
<div class="step__title">
<h3 class="
title-m
">Tras la firma</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="step__body">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-ml col-sm-12 col-lg-12 col">
<div class="step__bodycopy">
<div class="
bodycopy-m
">
<p>Hay familias que crecen, otras que se mudan y algunas cambian... pero todos tienen algo en común: buscan respuestas.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="steps {{#if isAccentLight}} accent-light{{/if}}">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-10 col-lg-10 col">
<div class="steps__description">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-md-5 col-lg-5 col">
<div class="steps__title">
{{> @title-l title }}
</div>
</div>
</div>
</div>
{{#if swiper}}
<div class="steps__list">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each step}}
<div class="steps__item swiper-slide">
<div class="step">
<div class="row middle-sm">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<div class="step__head">
<div class="row middle-ms">
<div class="col-xs-12 col-ms-2 col-ms-ml col-sm-4 col-lg-4 col">
<div class="step__number">
{{> @number-l this.number }}
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-8 col-lg-8 col">
<div class="step__title">
{{> @title-m this.title }}
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="step__body">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-ml col-sm-12 col-lg-12 col">
<div class="step__bodycopy">
{{> @bodycopy-m this.bodycopy }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--arrow-left' }}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next">
{{ render '@icon--arrow-right' }}
</div>
</div>
</div>
</div>
{{else}}
<ul class="steps__list">
{{#each step}}
<li class="steps__item">
<div class="step">
<div class="row middle-sm">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<div class="step__head">
<div class="row middle-ms">
<div class="col-xs-12 col-ms-2 col-ms-ml col-sm-4 col-lg-4 col">
<div class="step__number">
{{> @number-l this.number }}
</div>
</div>
<div class="col-xs-12 col-ms-10 col-sm-8 col-lg-8 col">
<div class="step__title">
{{> @title-m this.title }}
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="step__body">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-ml col-sm-12 col-lg-12 col">
<div class="step__bodycopy">
{{> @bodycopy-m this.bodycopy }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Estamos contigo para lo que necesites en cada paso"
},
"step": [
{
"number": {
"number": "1"
},
"title": {
"text": "Antes de solicitar"
},
"bodycopy": {
"text": "<p>Tendrás a tu servicio a tu propio gestor, un profesional con el que te sentirás acompañado de principio a fin. Por teléfono o en persona, te atenderemos cuando tú decidas.</p>"
}
},
{
"number": {
"number": "2"
},
"title": {
"text": "En la tramitación"
},
"bodycopy": {
"text": "<p>Creemos que para que todo funcione bien, ambas partes - cliente y entidad - deben ser ??responsables y conscientes de lo que supone contratar una hipoteca.</p>"
}
},
{
"number": {
"number": "3"
},
"title": {
"text": "Tras la firma"
},
"bodycopy": {
"text": "<p>Hay familias que crecen, otras que se mudan y algunas cambian... pero todos tienen algo en común: buscan respuestas.</p>"
}
}
],
"isAccentLight": true
}
.steps {
&.accent-light{
background-color: var(--color-accent-light);
margin-top: -60px;
padding-top: 60px;
margin-bottom: -30px;
padding-bottom: 30px;
padding-right: 19px;
padding-left: 20px;
@media (--viewport-xs-min) {
margin-top: -50px;
padding-top: 50px;
margin-bottom: -50px;
padding-bottom: 50px;
}
@media (--viewport-md-min) {
margin-top: -80px;
padding-top: 80px;
margin-bottom: -40px;
padding-bottom: 40px;
}
.steps__item {
&:last-child {
&::after{
background-color: transparent;
height:0;
}
}
}
}
&__description {
margin-bottom: 10px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
}
&__item {
position: relative;
padding: 30px 0;
&::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: var(--color-secondary-light);
content: '';
}
}
.step {
&__number {
@media (--viewport-xs-max) {
margin-bottom: 10px;
}
}
&__title {
@media (--viewport-ms-max) {
margin-bottom: 10px;
}
}
}
/* Swiper Variation */
@media (--viewport-ms-max){
.swiper-wrapper{
padding-left: 10px;
}
}
.swiper-container{
padding-bottom: 50px;
@media (--viewport-ms-max) {
padding-bottom:40px;
}
}
.swiper-slide {
/*background-color:var(--color-accent-light);*/
height: auto;
width: 100%;
padding-left:10px;
padding-right:10px;
}
.swiper-navigation {
display: flex;
max-width: 300px;
margin-left: auto;
margin-right: auto;
padding: 20px;
justify-content: center;
align-items: center;
.swiper-pagination {
margin: 0 40px;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill:var(--color-accent)
}
}
.swiper-button-next,
.swiper-button-prev {
top: 0;
width: 28px;
height: 20px;
margin-top: 0;
}
.swiper-pagination-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
.swiper-pagination-bullet-active {
background: var(--color-accent);
}
@media (--viewport-ms-max) {
display:flex;
}
}
}
Variantes: Default, Background Accent Light