<section class="splitter splitter_bg-color_white ">
<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="header-highlight">
<div class="wrap-img">
<picture>
<source srcset="/dist/images/access-highlight-mobile.jpg" media="(max-width:767px)" />
<img src="/dist/images/access-highlight-desktop.jpg" />
</picture>
</div>
<div class="
header-highlight__tile
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-offset-4 col-sm-7 col-md-6 col-md-offset-5 col-lg-6 col">
<div class="tile-highlight">
<div class="tile-highlight__wrapper">
<div class="tile-highlight__content">
<div class="tile-highlight__label">
<div class="text-label-m text-label-m_color_light">Vive</div>
</div>
<div class="tile-highlight__title tile-highlight__title_header">
<h1 class="
title-xl title-xl_color_light
">Hipoteca compra de casa</h1>
</div>
<div class="tile-highlight__description">
<div id="" class="
bodycopy-l
bodycopy_color_light
">
<p>Combinalo con tu seguro</p>
</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>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="header-highlight">
<div class="wrap-img">
<picture>
<source srcset="{{ data-src-mobile }}" media="(max-width:767px)" />
<img src="{{ data-src }}" />
</picture>
</div>
<div class="
header-highlight__tile
{{#if isReversed}}
header-highlight__tile_reversed
{{/if}}
">
<div class="row">
{{#if isReversed}}
<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>
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-offset-4 col-sm-7 col-md-6 col-md-offset-5 col-lg-6 col">
{{> @tile-highlight tile-highlight }}
</div>
{{/if}}
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": false
},
"data-src": "/dist/images/access-highlight-desktop.jpg",
"data-src-mobile": "/dist/images/access-highlight-mobile.jpg",
"tile-highlight": {
"isHeader": true,
"title": {
"text": "Hipoteca compra de casa",
"colorLight": true
},
"description": {
"text": "<p>Combinalo con tu seguro</p>",
"colorLight": true
},
"bodycopy": false,
"btn": {
"href": "#",
"text": "Solicita tu hipoteca"
},
"text-label": {
"text": "Vive",
"colorLight": true
}
}
}
.header-highlight {position: relative;
margin-top: 100px;
margin-bottom:50px;
@media (--viewport-ms-max) {
margin-top:55px;
}
@media (--viewport-ms-max) {
display:flex;
flex-direction: column;
}
@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
}
.wrap-img{min-height:450px;position: relative;width: 100%;top:0;overflow: hidden;display: flex; align-items: flex-start;justify-content: center;
/*@media (--viewport-lg-min) {
height:625px;
}
@media (--viewport-md-max) {
height:550px;
}
@media (--viewport-sm-max) {
height:500px;
}*/
@media (--viewport-ms-max) {
min-height: auto;
align-items: flex-end;
}
@media (--viewport-xs-max) {
top:0;
}
img{width: 100%;margin-bottom: -8px;}
}
&__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;
}
/*&_reversed {
@media (--viewport-ms-only) {
padding-right: 0;
padding-left: 30px;
}
}*/
}
}
Variantes: Default, Hipotecas featured, Resersed, Without a button, Accent Dark Box, Small Padding Box, Home UCIPt Permite configurar src y alt de la imagen