<div class="slide-highlight swiper-slide">
<div class="wrap-img">
<picture>
<source srcset="/dist/images/slider-767.jpg" media="(max-width:767px)" />
<source srcset="/dist/images/slider-768.jpg" media="(max-width:768px)" />
<source srcset="/dist/images/slider-1024.jpg" media="(max-width:1024px)" />
<img src="/dist/images/slider-desktop.jpg" />
</picture>
</div>
<div class="
slide-highlight__tile
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-mr-ml col-md-5 col-lg-5 col">
<div class="tile-highlight">
<div class="tile-highlight__wrapper">
<div class="tile-highlight__content">
<div class="tile-highlight__title tile-highlight__title_header">
<h1 class="
title-xl title-xl_color_light
">Hipotecas para vivir</h1>
</div>
<div class="tile-highlight__description">
<div id="" class="
bodycopy-l
bodycopy_color_light
">
<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.</p>
</div>
</div>
<div class="tile-highlight__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<ul>
<li>Condiciones transparentes y sin sorpresas</li>
<li>Siempre con un gestor personalizado para asesorarte</li>
<li>Productos adaptados a tus necesidades y estilo de vida</li>
</ul>
</div>
</div>
<div class="tile-highlight__btn">
<a class="btn
" href="#" id="">
Solicita tu hipoteca
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide-highlight swiper-slide">
{{#if isImg}}
<div class="wrap-img">
<picture>
<source srcset="{{ srcmobile }}" media="(max-width:767px)" />
<source srcset="{{ src768 }}" media="(max-width:768px)" />
<source srcset="{{ src1024 }}" media="(max-width:1024px)" />
<img src="{{ src }}" />
</picture>
</div>
{{/if}}
{{#if isVideo}}
<video class="video video-mobile" src="{{video-urlmobile}}" muted autoplay loop></video>
<video class="video video-768" src="{{video-url768}}" muted autoplay loop></video>
<video class="video video-1024" src="{{video-url1024}}" muted autoplay loop></video>
<video class="video video-desktop" src="{{video-url}}" muted autoplay loop></video>
{{/if}}
<div class="
slide-highlight__tile
{{#if isReversed}}
slide-highlight__tile_reversed
{{/if}}
{{#if isNarrowReversed}}
slide-highlight__tile_reversed
{{/if}}
{{#if isLight}}
slide-highlight__tile_light
{{/if}}
{{#if isAccentDark}}
slide-highlight__tile_accent-dark
{{/if}}
{{#if isNone}}
slide-highlight__tile_none
{{/if}}
">
<div class="row">
{{#if isReversed}}
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-6 col-lg-6 col">
{{> @tile-highlight tile-highlight }}
</div>
{{else if isNarrowReversed}}
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-right-1 col-md-5 col-lg-5 col">
{{> @tile-highlight tile-highlight }}
</div>
{{else if isNarrowCentered}}
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-mr-ml col-md-5 col-lg-5 col">
{{> @tile-highlight tile-highlight }}
</div>
{{else if isNarrow}}
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-1 col-md-5 col-lg-5 col">
{{> @tile-highlight tile-highlight }}
</div>
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-7 col-sm-offset-1 col-md-6 col-lg-6 col">
{{> @tile-highlight tile-highlight }}
</div>
{{/if}}
</div>
</div>
</div>
{
"isImg": true,
"src": "/dist/images/slider-desktop.jpg",
"src1024": "/dist/images/slider-1024.jpg",
"src768": "/dist/images/slider-768.jpg",
"srcmobile": "/dist/images/slider-767.jpg",
"video-url": "https://player.vimeo.com/progressive_redirect/playback/676215292/rendition/720p?loc=external&signature=d5eb3e7c357ad80e30b96a74996734b862e06773e0733f48f1b20a788830c01f",
"video-url1024": "https://player.vimeo.com/progressive_redirect/playback/677753029/rendition/540p?loc=external&signature=87b6dd7502bc9bf502aa8a9795d0f1607169cf9849934005972696ef4d01b241",
"video-url768": "https://player.vimeo.com/progressive_redirect/playback/677753154/rendition/360p?loc=external&signature=5e10e56e591771bc71075cfd16a7affd40d754d4eec1e1a12667f2126cb374d4",
"video-urlmobile": "https://player.vimeo.com/progressive_redirect/playback/677753384/rendition/480p?loc=external&signature=947e4105d6dc9fe88231958391bad7455e8e62edf6dc6736a38a54f1b06e879c",
"tile-highlight": {
"isHeader": true,
"title": {
"text": "Hipotecas para vivir",
"colorLight": true
},
"description": {
"text": "<p>UCI, un proyecto único donde solo tú eliges lo que quieres y cuando quieres: financiación, seguros y servicios para tu casa.</p>",
"colorLight": true
},
"bodycopy": {
"text": "<ul><li>Condiciones transparentes y sin sorpresas</li><li>Siempre con un gestor personalizado para asesorarte</li><li>Productos adaptados a tus necesidades y estilo de vida</li></ul>",
"colorLight": true
},
"btn": {
"href": "#",
"text": "Solicita tu hipoteca"
}
},
"isNarrowCentered": true
}
.slide-highlight {
position: relative;
margin-bottom:50px;
margin-top:0;
@media (--viewport-ms-max) {
display:flex;
flex-direction: column;
}
@media (--viewport-xs-max) {
margin-bottom:0;
}
.wrap-img{/*min-height:450px;*/position: relative;width: 100%;top:0;overflow: hidden;display: flex; align-items: flex-start;justify-content: center;
@media (--viewport-ms-max) {
min-height: auto;
align-items: flex-end;
}
@media (--viewport-xs-max) {
top:0;
}
picture{
line-height: 0;
img{width: 100%; height: auto;}
}
}
.video {
width: 100%;
height:auto;
left: 0;
top: 0;
overflow: hidden;
display:none;
&.video-desktop{
@media (min-width: 1025px) {
display:block;
}
}
&.video-1024{
@media (max-width: 1024px) and (min-width: 769px) {
display:block;
}
}
&.video-768{
@media (max-width: 768px) and (min-width: 501px) {
display:block;
}
}
&.video-mobile{
@media (max-width: 500px) {
display:block;
}
}
}
&__tile {position: absolute;bottom:0;width: 100%;margin: 0 0 -50px 0;
@media (--viewport-ms-max) {
position:relative;
margin-top:0;
margin-right:0;
padding-right:0;
}
@media (--viewport-xs-max) {
margin-bottom:0;
}
.tile-highlight{
&__content{
@media (--viewport-xs-max) {
justify-content: flex-start;
}
&__description{
@media (--viewport-xs-max) {min-height:120px;}
}
}
}
&_reversed {
.row{
justify-content:flex-end;
}
}
&_none {display:none;
@media (--viewport-ms-max) {
display:block;
}
}
&_light{
.tile-highlight__wrapper {
background-color:var(--color-accent-light);
.tile-highlight__content{
.title-xl_color_light{
color:var(--color-accent);
}
.bodycopy-l.bodycopy_color_light,
.bodycopy-l_color_light,
.bodycopy-m.bodycopy_color_light,
.bodycopy-m.bodycopy_color_light .bodycopy__link,
.bodycopy-m_color_light,
.text-label-m_color_light{color:var(--color-accent);}
}
}
}
&_accent-dark{
.tile-highlight__wrapper {
background-color:var(--color-accent-dark);
}
}
}
}
No notes defined.