<section class="splitter splitter_bg-color_white 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="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 small-padding">
<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
">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
<div class="tile-highlight__description">
<div id="" class="
bodycopy-l
bodycopy_color_light
">
<p>Maecenas egestas ut nunc quis vulputate. Proin blandit risus vitae lacinia auctor. Donec eu risus vel odio auctor ultrices eu ut eros. Donec blandit, ex et accumsan aliquet, dui quam accumsan justo, in porttitor nibh dui vitae dolor.</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": true
},
"data-src": "/dist/images/access-highlight-desktop.jpg",
"data-src-mobile": "/dist/images/access-highlight-mobile.jpg",
"tile-highlight": {
"isHeader": true,
"title": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"colorLight": true
},
"description": {
"text": "<p>Maecenas egestas ut nunc quis vulputate. Proin blandit risus vitae lacinia auctor. Donec eu risus vel odio auctor ultrices eu ut eros. Donec blandit, ex et accumsan aliquet, dui quam accumsan justo, in porttitor nibh dui vitae dolor.</p>",
"colorLight": true
},
"bodycopy": false,
"btn": {
"href": "#",
"text": "Solicita tu hipoteca"
},
"small-padding": true,
"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