<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="product-swiper">
<div id="swiperID" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product " id=product>
<div class="row bg-color_yellow">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
<div class="
number-xl
number-xl_color_light
"><span>5.000</span></div>
</div>
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
<div class="text-label-m text-label-m_color_light">personas han comprado casa con nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__icon">
<img class="product__img" src="/dist/images/compracasa.svg" alt="Product">
</div>
<div class="product__label">
<div class="text-label-m">VIVE / HIPOTECA COMPRA CASA</div>
</div>
<div class="product__title">
<h1 class="
title-l
">
1 - Tu quieres una casa y nosotros lo hacemos posible
</h1>
</div>
<div class="product__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="product__btn">
<a class="btn
" href="#" id="">
Comprar casa
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<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>
<div class="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<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 class="swiper-slide">
<div class="product " id=product2>
<div class="row ">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
<div class="
number-xl
number-xl_color_light
"><span>5.000</span></div>
</div>
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
<div class="text-label-m text-label-m_color_light">personas han comprado casa con nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__icon">
<img class="product__img" src="/dist/images/compracasa.svg" alt="Product">
</div>
<div class="product__label">
<div class="text-label-m">VIVE / HIPOTECA COMPRA CASA</div>
</div>
<div class="product__title">
<h2 class="
title-l
">
2 - Tu quieres una casa y nosotros lo hacemos posible
</h2>
</div>
<div class="product__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="product__btn">
<a class="btn
" href="#" id="">
Comprar casa
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<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>
<div class="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<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>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="product-swiper">
<div id="{{swiperID}}" class="swiper-container">
<div class="swiper-wrapper">
{{#each product}}
<div class="swiper-slide">
<div class="product {{#if this.isReversed}} product_reversed {{/if}}" id={{ this.id }}>
<div
class="row {{#if this.isReversed}} reverse {{/if}}{{#if this.isMobileReversed}} mobileReverse {{/if}}{{#if this.isYellow}}bg-color_yellow{{/if}}">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
{{#if isVideo}}
<video{{#if isAutoplay}}{{else}} controls{{/if}}
class="video{{#if isCover}} isCover{{/if}}" src="{{video-url}}" {{#if isAutoplay}}
muted autoplay{{/if}} loop></video>
{{else if isVideoYoutube}}
<div class="video-responsive{{#if isCover}} isCover{{/if}}">
<iframe width="560" height="315"
src="{{video-url-youtube}}{{#if isAutoplay}}&autoplay=1&mute=1&controls=0{{/if}}"
class="optanon-category-4" title="YouTube video player" frameborder="0"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
{{else}}
<img src="{{ this.data-img }}" {{#if isContain}} class="isContain" {{/if}} />
{{/if}}
{{#if isVideo}}
{{else if isVideoYoutube}}
{{else}}
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
{{#if this.number}}
{{> @number-xl this.number }}
{{/if}}
</div>
{{#if this.support-label }}
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
{{> @text-label-m this.support-label }}
</div>
</div>
</div>
</div>
{{/if}}
</div>
</div>
</div>
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
{{#if src}}
<div class="product__icon">
<img class="product__img" src="{{ this.src }}" alt="{{ this.alt }}">
</div>
{{/if}}
<div class="product__label">
{{> @text-label-m this.label }}
</div>
<div class="product__title">
{{> @title-l this.title }}
</div>
<div class="product__bodycopy">
{{> @bodycopy-m this.bodycopy }}
</div>
{{#if bulletlistitem}}
<div class="product__bulletList">
<ul>
{{#each bulletlistitem}}
<li>
{{> @icon this }}{{> @bodycopy-m this }}
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if isTest}}
<div class="product__btn">
{{ render '@lightbox--steps-form' }}
</div>
{{else if isLink}}
<div class="product__link">
{{> @link this.link }}
</div>
{{else if btn}}
<div class="product__btn">
{{> @btn this.btn }}
</div>
{{else}}
{{/if}}
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
{{ render '@nav-arrow--back' }}
</div>
<div class="product__nav-forward nav-forward">
{{ render '@nav-arrow--forward' }}
</div>
</div>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"swiperID": "swiperID",
"product": [
{
"id": "product",
"isYellow": true,
"data-img": "/dist/images/product.jpg",
"number": {
"number": "5.000",
"colorLight": true
},
"support-label": {
"text": "personas han comprado casa con nosotros este año",
"colorLight": true
},
"btn": {
"href": "#",
"text": "Comprar casa"
},
"link": {
"href": "#",
"text": "Comprar casa"
},
"src": "/dist/images/compracasa.svg",
"alt": "Product",
"label": {
"text": "VIVE / HIPOTECA COMPRA CASA"
},
"title": {
"text": "1 - Tu quieres una casa y nosotros lo hacemos posible",
"isH1": true
},
"bodycopy": {
"text": "<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
}
},
{
"id": "product2",
"isYellow": false,
"data-img": "/dist/images/product.jpg",
"number": {
"number": "5.000",
"colorLight": true
},
"support-label": {
"text": "personas han comprado casa con nosotros este año",
"colorLight": true,
"isH2": true
},
"btn": {
"href": "#",
"text": "Comprar casa"
},
"src": "/dist/images/compracasa.svg",
"alt": "Product",
"label": {
"text": "VIVE / HIPOTECA COMPRA CASA"
},
"title": {
"text": "2 - Tu quieres una casa y nosotros lo hacemos posible",
"isH2": true
},
"bodycopy": {
"text": "<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>"
}
}
]
}
.product {
position: relative;
&_reversed {
.product {
&__content {
@media (--viewport-ms-only) {
padding: 11px 11px 11px 30px;
}
}
}
}
&-swiper {
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
}
&__support {position: relative;height: 100%; overflow:hidden; /* para evitar espacio bajo la imagen en reversed */line-height: 0;
img{width:100%; height:100%;object-fit:cover;
&.isContain{
height:auto;
object-fit: contain;
}
}
.video {
width: 100%;
height: auto;
left: 0;
top: 0;
overflow: hidden;
&.isCover {
height: 100%;
object-fit: cover;
}
}
.row {
padding: 40px 20px 34px;
position: absolute;
top: 0;
left: 0;
width: 100%;
@media (--viewport-ms-min) {
height: 100%;
padding: 60px 40px;
}
@media (--viewport-sm-min) {
padding: 60px 82px;
}
@media (--viewport-md-min) {
padding: 60px 74px;
}
&-label {
margin-top: 10px;
}
}
&-label-wrapper {
position: relative;
.row {
padding: 0;
position: relative;
}
}
&-text {
position: relative;
}
}
.video-responsive {
overflow: hidden;
padding-bottom: 56.3%;
/* Adecua este valor para controlar la altura del video */
position: relative;
height: 0;
iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
&.isCover {
width: 100vw;
height: 100%;
padding-bottom: 0;
/* Adecua este valor para controlar la altura del video */
iframe {
top: 50%;
left: 21%;
/*left: 70vh;*/
width: 100vw;
height: 100%;
transform: translate(-50%, -50%);
@media (--viewport-ms-min) {
left: 22vw;
}
@media only screen and (min-width: 800px) {
left: 22vw;
}
@media only screen and (min-width: 950px) {
left: 23vw;
}
@media (--viewport-sm-min) {
left: 23vw;
}
@media only screen and (min-width: 1100px) {
left: 24vw;
}
@media (--viewport-md-min) {
left: 23vw;
}
@media only screen and (min-width: 1900px) {
left: 17vw;
}
@media (--viewport-lg-min) {
left: 16.8vw;
}
@media only screen and (min-width: 2100px) {
left: 15vw;
}
@media (--viewport-xl-min) {
left: 13vw;
}
@media only screen and (max-width: 1189px) {
width: 130vw;
}
@media only screen and (max-width: 921px) {
width: 160vw;
}
@media only screen and (max-width: 800px) {
width: 174vw;
}
}
@media (--viewport-xs-max) {
padding-bottom: 56.3%;
height: 0;
iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: none;
}
}
}
}
&__content {
padding: 20px 20px 30px 20px;
@media (--viewport-ms-min) {
padding: 11px 30px 30px 10px;
}
@media (--viewport-sm-min) {
padding: 42px 0;
}
@media (--viewport-md-min) {
padding: 32px 0;
}
}
&__icon {
margin-bottom: 20px;
}
&__label {
margin-bottom: 20px;
}
&__bodycopy {
margin-top: 20px;
}
&__btn,
&__link {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&__nav {
display: flex;
justify-content: space-between;
padding: 0 20px;
@media (--viewport-ms-min) {
justify-content: center;
padding: 0;
}
&-back,
&-forward {
margin-top: 20px;
@media (--viewport-ms-min) {
margin-top: 30px;
}
}
&-back {
@media (--viewport-ms-min) {
margin-right: 30px;
}
}
}
&__bulletList {
margin-top: 30px;
li {
display: flex;
flex-direction: row;
margin-bottom: 24px;
&:last-child {
@media (--viewport-xs-max) {
margin-bottom: 0;
}
}
.icon {
width: 20px;
height: 20px;
margin-right: 16px;
}
}
}
.row.mobileReverse {
@media (--viewport-ms-max) {
flex-direction: column-reverse;
}
}
.bg-color {
&_yellow {
background-color: var(--color-accent-light);
}
}
}
Variantes: Default, Link, Video, Image cover and contain (cover en el primero (por defecto) y contain en el segundo), Test hipotecas, Text instead of a number, Reversed, Slider, Slider Reversed. Permite configurar el id de cada producto, el src de imágen y vídeo, src y alt del icono.