<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="
advantages-extra
">
<div class="advantages-extra__description">
<div class="advantages-extra__title">
<h2 class="
title-l
">
Despreocúpate, hipotecas sin letra pequeña
</h2>
</div>
<div class="advantages-extra__link">
<a class="link
" href="#">
<span>Ver nuestras ventajas</span>
</a>
</div>
</div>
<div class="advantages-extra__content ">
<ul class="row center-xs center-ms center-sm center-lg ">
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Sin comisiones</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Sin compromisos</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Sin clausulas suelo</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Sin cambio de banco</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Sin dudas</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Siempre con un gestor personalizado</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Productos adaptados a tus necesidades y estilo de vida</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 ">
<div class="advantage">
<div class="advantage__icon">
<svg class="icon icon-big-search ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#big-search"></use>
</svg>
</div>
<div class="advantage__bodycopy">
<div id="" class="
bodycopy-l
">
<p>Condiciones transparentes sin sorpresas</p>
</div>
</div>
<div class="advantage__extra">
<div class="
bodycopy-m
">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="
advantages-extra
{{#if isYellow}}advantages-extra_bg-color_yellow{{/if}}
">
<div class="advantages-extra__description">
<div class="advantages-extra__title">
{{> @title-l title }}
</div>
{{#if isLink}}
<div class="advantages-extra__link">
{{> @link link }}
</div>
{{/if}}
</div>
<div class="advantages-extra__content {{#if swiper}}swiper-container{{/if}}">
<ul class="row center-xs center-ms center-sm center-lg {{#if swiper}}swiper-wrapper{{/if}}">
{{#if isFourColumns}}
{{#each advantage}}
<li class="{{#if isOneColumnInMobile}}col-xs-12 col-ms-6 col-sm-4{{else}}col-xs-6 col-ms-4 col-sm-3{{/if}} col-lg-3 col {{#if swiper}} swiper-slide{{/if}}">
{{> @advantage this }}
</li>
{{/each}}
{{/if}}
{{#if isThreeColumns}}
{{#each advantage}}
<li class="col-xs-12 col-ms-4 col-sm-4 col-md-4 col-lg-4 {{#if swiper}} swiper-slide{{/if}}">
{{> @advantage this }}
</li>
{{/each}}
{{/if}}
</ul>
{{#if swiper}}
<div class="swiper-navigation">
<div class="swiper-button-prev">
{{ render '@icon--16-arrow-left' }}
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next">
{{ render '@icon--16-arrow-right' }}
</div>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"isFourColumns": false,
"isThreeColumns": true,
"isLink": true,
"title": {
"text": "Despreocúpate, hipotecas sin letra pequeña"
},
"link": {
"href": "#",
"text": "Ver nuestras ventajas"
},
"advantage": [
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Sin comisiones</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Sin compromisos</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Sin clausulas suelo</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Sin cambio de banco</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Sin dudas</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Siempre con un gestor personalizado</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Productos adaptados a tus necesidades y estilo de vida</p>"
}
},
{
"icon": {
"name": "big-search"
},
"bodycopy": {
"text": "<p>Condiciones transparentes sin sorpresas</p>"
}
}
]
}
.advantages-extra {
padding: 40px 20px 0;
margin-right: -19px;
margin-left: -20px;
&_bg-color {
&_yellow {
background-color: var(--color-accent-light);
}
}
@media (--viewport-ms-min) {
padding: 60px 30px 30px;
}
@media (--viewport-sm-min) {
padding: 60px 50px 30px;
}
&__description {
margin-bottom: 40px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 40px;
}
}
&__title {
margin-bottom: 21px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 24px;
}
}
&__content {
text-align: center;
.row {
@media (--viewport-sm-min) and (--viewport-md-max) {
margin-right: -20px;
margin-left: -20px;
}
}
.col {
margin-bottom: 40px;
@media (--viewport-ms-min) {
margin-bottom: 30px;
}
@media (--viewport-sm-min) {
margin-bottom: 40px;
}
@media (--viewport-sm-min) and (--viewport-md-max) {
padding-right: 20px;
padding-left: 20px;
}
}
.advantage {
@media (--viewport-ms-min) {
flex-direction: column;
text-align: center;
}
&__icon {
@media (--viewport-ms-min) {
margin-right: 0;
margin-bottom: 20px;
}
}
&__bodycopy{
@media (--viewport-sm-max) {
text-align: center;
}
@media (--viewport-md-min) {
margin-bottom:20px;
}
}
}
/* Swiper Variation*/
.swiper-container{
padding-bottom: 50px;
@media (--viewport-ms-max) {
padding-bottom:40px;
}
}
.swiper-wrapper{
flex-flow: row;
justify-content: flex-start;
}
.swiper-slide{
/*background-color:var(--color-accent-light);*/
height: auto;
//width: 80%;
padding-left:10px;
padding-right:10px;
//max-width: 100%;
margin-bottom: 0 !important;
@media (--viewport-xs-max) {
width: 80%;
max-width: 100%;
flex-basis: 50%;
}
@media (--viewport-ms-max) and (--viewport-ms-max) {
width: 80%;
max-width: 100%;
flex-basis: 33%;
}
}
.swiper-navigation{
display: flex;
max-width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding: 20px;
justify-content: center;
align-items: center;
gap:30px;
.swiper-pagination {
display:none;
}
.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);
}
}
}
}
Variantes: Default, Yellow BG, Three cols, With desciption