<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="distributor">
<div class="distributor__description">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-9 col-lg-9 col">
<div class="distributor__description-wrapper">
<div class="distributor__label">
<div class="text-label-m">Te ofrecemos los seguros que mejor se adaptan a tu hipoteca y a tu vida</div>
</div>
<div class="distributor__title">
<h2 class="
title-l
">
Combina tu hipoteca con tu plan de seguros<sup>34</sup>
</h2>
</div>
<div class="distributor__bodycopy">
<div class="
bodycopy-m
">
<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="distributor__link">
<a class="link
" href="#">
<span>Descubre nuestro blog<sup>34</sup></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="distributor__tiles distributor__tiles_three-column">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="
tile-distributor
">
<div class="tile-distributor__pic" style="background-image: url(/dist/images/distributor-3.jpg)"></div>
<div class="tile-distributor__content">
<div class="tile-distributor__label">
<div class="text-label-m text-label-m_color_light">POR LO QUE PUEDA PASAR</div>
</div>
<div class="tile-distributor__title">
<h3 class="
title-m
title-m_color_light
">Seguro de hogar<sup>34</sup></h3>
</div>
<div class="tile-distributor__link">
<a class="link
link_color_light
" href="#">
<span>Ver detalle</span>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="
tile-distributor
">
<div class="tile-distributor__pic" style="background-image: url(/dist/images/distributor-2.jpg)"></div>
<div class="tile-distributor__content">
<div class="tile-distributor__label">
<div class="text-label-m text-label-m_color_light">PARA PROTEGER LO QUE MÀS TE IMPORTA</div>
</div>
<div class="tile-distributor__title">
<h3 class="
title-m
title-m_color_light
">Seguro de protección de pagos<sup>34</sup></h3>
</div>
<div class="tile-distributor__link">
<a class="link
link_color_light
" href="#">
<span>Ver detalle</span>
</a>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="
tile-distributor
">
<div class="tile-distributor__pic" style="background-image: url(/dist/images/distributor-1.jpg)"></div>
<div class="tile-distributor__content">
<div class="tile-distributor__label">
<div class="text-label-m text-label-m_color_light">POR LO QUE PUEDA PASAR</div>
</div>
<div class="tile-distributor__title">
<h3 class="
title-m
title-m_color_light
">Seguro de hogar</h3>
</div>
<div class="tile-distributor__link">
<a class="link
link_color_light
" href="#">
<span>Ver detalle</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="distributor{{#if isAccentLight}} accentlight{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="distributor__description">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-9 col-lg-9 col">
<div class="distributor__description-wrapper">
{{#if isLabel}}
<div class="distributor__label">
{{> @text-label-m label }}
</div>
{{/if}}
<div class="distributor__title">
{{> @title-l title }}
</div>
{{#if isBodycopy}}
<div class="distributor__bodycopy">
{{> @bodycopy-m bodycopy }}
</div>
{{/if}}
{{#if isLink}}
<div class="distributor__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
<div class="distributor__tiles{{#if threeColumn}} distributor__tiles_three-column{{/if}}{{#if
threeColumnsAlways}} distributor__tiles_three-columns-always{{/if}}">
<div class="row">
{{#if twoColumn}}
<div class="col-xs-12 col-ms-12 col-sm-10 col-sm-mr-ml col-lg-10 col">
<ul class="row">
{{#each distributor}}
<li class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{> @tile-distributor this }}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if threeColumn}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<ul class="row">
{{#each distributor}}
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
{{> @tile-distributor this }}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if swiper}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="row">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each distributor}}
<div class="col-sm-4 col-lg-4 col swiper-slide">
{{> @tile-distributor this }}
</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>
</ul>
</div>
{{/if}}
</div>
</div>
{{#if isBottomLink}}
<div class="distributor__bottomlink">
{{> @link bottomlink }}
</div>
{{/if}}
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"isLabel": true,
"label": {
"text": "Te ofrecemos los seguros que mejor se adaptan a tu hipoteca y a tu vida"
},
"title": {
"text": "Combina tu hipoteca con tu plan de seguros<sup>34</sup>"
},
"isBodycopy": true,
"bodycopy": {
"text": "<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
},
"isLink": true,
"link": {
"href": "#",
"text": "Descubre nuestro blog<sup>34</sup>"
},
"twoColumn": false,
"distributor": [
{
"imageUrl": "/dist/images/distributor-3.jpg",
"text-label": {
"text": "POR LO QUE PUEDA PASAR",
"colorLight": true
},
"title": {
"text": "Seguro de hogar<sup>34</sup>",
"colorLight": true
},
"link": {
"href": "#",
"text": "Ver detalle",
"isLight": true
}
},
{
"imageUrl": "/dist/images/distributor-2.jpg",
"text-label": {
"text": "PARA PROTEGER LO QUE MÀS TE IMPORTA",
"colorLight": true
},
"title": {
"text": "Seguro de protección de pagos<sup>34</sup>",
"colorLight": true
},
"link": {
"href": "#",
"text": "Ver detalle",
"isLight": true
}
},
{
"imageUrl": "/dist/images/distributor-1.jpg",
"text-label": {
"text": "POR LO QUE PUEDA PASAR",
"colorLight": true
},
"title": {
"text": "Seguro de hogar",
"colorLight": true
},
"link": {
"href": "#",
"text": "Ver detalle",
"isLight": true
}
}
],
"threeColumn": true
}
.distributor {
&__description {
margin-bottom: 40px;
text-align: center;
@media (--viewport-ms-min) {
margin-bottom: 60px;
}
}
&__label {
margin-bottom: 10px;
@media (--viewport-ms-min) {
margin-bottom: 20px;
}
}
&__bodycopy {
margin-top: 10px;
@media (--viewport-ms-min) {
margin-top: 20px;
}
}
&__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&__bottomlink {
text-align: center;
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&__tiles {
margin-bottom: -30px;
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
&_three-column {
.tile-distributor {
&__content {
@media (--viewport-sm-min) {
padding: 40px 50px;
margin-right: 30px;
}
}
&__title {
&.justtitle{
margin-bottom:0;
}
}
}
}
&_three-columns-always {
@media (--viewport-ms-max){
margin-left: 0; margin-right: 0;
}
}
.tile-distributor {
margin-bottom: 30px;
}
}
&.accentlight{
background-color: var(--color-accent-light);
padding:40px 0;
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
.distributor__description {
padding: 0 20px;
}
}
&__tiles {
@media (--viewport-xs-max) {
margin-right: 0;
margin-left: 0;
}
}
}
@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: 80%;
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, Accent Light, Three columns, With a description, for UCI.pt, for UCI.pt Accent light BG