<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="mortgage-steps row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-10 col">
<div class="mortgage-steps_slider">
<div class="mortgage-steps__title">
<h2 class="
title-l
">
Ter um crédito nunca foi tão fácil e simples!
</h2>
</div>
<div class="swiper-container">
<div class="center-sm center-lg swiper-wrapper">
<div class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col swiper-slide">
<div class="tile-step">
<div class="tile-step__pic" style="background-image: url(/dist/images/happy-couple-talking-having-fun-while-surfing-net-digital-tablet-living-room.jpg)"></div>
<div class="tile-step__number">
<p class="
title-l
title-l_color_light
" id=""> 1
</p>
</div>
<div class="tile-step__content">
<div class="tile-step__label">
<div id="" class="
bodycopy-l
">Faça a sua simulação</div>
</div>
<div class="tile-step__description">
<div class="
bodycopy-m
">
Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores.
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col swiper-slide">
<div class="tile-step">
<div class="tile-step__pic" style="background-image: url(/dist/images/happy-business-couple-working-computer-while-sitting-cafe.jpg)"></div>
<div class="tile-step__number">
<p class="
title-l
title-l_color_light
" id=""> 2
</p>
</div>
<div class="tile-step__content">
<div class="tile-step__label">
<div id="" class="
bodycopy-l
">Escolha a opção ideal</div>
</div>
<div class="tile-step__description">
<div class="
bodycopy-m
">
Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores.
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col swiper-slide">
<div class="tile-step">
<div class="tile-step__pic" style="background-image: url(/dist/images/man-woman-home.jpg)"></div>
<div class="tile-step__number">
<p class="
title-l
title-l_color_light
" id=""> 3
</p>
</div>
<div class="tile-step__content">
<div class="tile-step__label">
<div id="" class="
bodycopy-l
">Submeta o pedido</div>
</div>
<div class="tile-step__description">
<div class="
bodycopy-m
">
Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores.
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col swiper-slide">
<div class="tile-step">
<div class="tile-step__pic" style="background-image: url(/dist/images/happy-couple-writing-notes-while-going-through-home-finances-during-their-coffee-time.jpg)"></div>
<div class="tile-step__number">
<p class="
title-l
title-l_color_light
" id=""> 4
</p>
</div>
<div class="tile-step__content">
<div class="tile-step__label">
<div id="" class="
bodycopy-l
">Assine a Escritura</div>
</div>
<div class="tile-step__description">
<div class="
bodycopy-m
">
Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
<div class="swiper-button-next">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="mortgage-steps row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-10 col">
<div{{#if hasID}} id="{{idComponent}}" {{/if}}
class="mortgage-steps_slider{{#if isAccentLightTheme}} mortgage-steps_accentLight{{/if}}">
<div class="mortgage-steps__title">
{{> @title-l this.title}}
</div>
<div class="swiper-container">
<div class="center-sm center-lg swiper-wrapper">
{{#each steps}}
<div class="col-xs-12 col-ms-6 col-sm-3 col-lg-3 col swiper-slide">
{{> @tile-step this }}
</div>
{{/each}}
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--arrow-left' }}
</div>
<div class="swiper-button-next">
{{ render '@icon--arrow-right' }}
</div>
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Ter um crédito nunca foi tão fácil e simples!"
},
"steps": [
{
"imageUrl": "/dist/images/happy-couple-talking-having-fun-while-surfing-net-digital-tablet-living-room.jpg",
"text-label": {
"text": "Faça a sua simulação"
},
"number": {
"text": "1",
"colorLight": true,
"isP": true
},
"description": {
"text": "Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores."
}
},
{
"imageUrl": "/dist/images/happy-business-couple-working-computer-while-sitting-cafe.jpg",
"text-label": {
"text": "Escolha a opção ideal"
},
"number": {
"text": "2",
"colorLight": true,
"isP": true
},
"description": {
"text": "Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores."
}
},
{
"imageUrl": "/dist/images/man-woman-home.jpg",
"text-label": {
"text": "Submeta o pedido"
},
"number": {
"text": "3",
"colorLight": true,
"isP": true
},
"description": {
"text": "Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores."
}
},
{
"imageUrl": "/dist/images/happy-couple-writing-notes-while-going-through-home-finances-during-their-coffee-time.jpg",
"text-label": {
"text": "Assine a Escritura"
},
"number": {
"text": "4",
"colorLight": true,
"isP": true
},
"description": {
"text": "Texto meramente ilustrativo. Desta maneira evitamos Lorem Impsum. Teste os nossos simuladores."
}
}
]
}
.mortgage-steps {
/*display: flex;
flex-direction: column;*/
/* ACCENT LIGHT THEME */
&_accentLight {
background-color: var(--color-accent-light);
.slider-highlight {
background-color: var(--color-accent-light);
.swiper-slide {
background-color: var(--color-accent-light);
}
}
}
&__title {
text-align: center;
padding-bottom: 75px;
@media(--viewport-ms-only) {
padding-bottom: 45px;
}
@media(--viewport-xs-max) {
padding-bottom: 25px;
}
.title-l {
color: var(--color-text);
}
}
.swiper-container{
@media (--viewport-ms-max) {
padding-bottom:40px;
}
}
.swiper-slide{
/*background-color:var(--color-accent-light);*/
height: auto;
@media (--viewport-ms-max) {
align-items: flex-start;
}
@media (--viewport-xs-max) {
align-items: center;
}
}
.swiper-navigation{
display: none;
/*max-width: 267px;*/
margin-left: auto;
margin-right: auto;
padding: 20px 0;
justify-content: space-between;
align-items: center;
@media (--viewport-ms-only) {
justify-content: center;
gap: 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;
}
}
/*&__items {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
@media(--viewport-sm-min) {
justify-content: space-evenly;
}
&-item {
width: fit-content;
padding-right: 30px;
@media(--viewport-sm-only) {
padding-right: 15px;
}
&:last-child {
padding-right: 0px;
}
}
}*/
}
/* SLIDER-HIGHLIGHT REFERENCES FOR 'MORTGAGE-STEPS__SLIDER' ITEM */
/*.mortgage-steps .swiper-slide {
display:flex;
justify-content:center;
margin: 0;
}*/
No notes defined.