<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="access-highlight lazyload">
<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="row content">
<div class="
col-xs-9 col-xs-mr col-ms-6 col-ms-offset-1 col-sm-3 col-md-3 col-md-offset-right-2 col-lg-3 col
">
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="access-highlight__figure">
<div class="access-highlight__number">
<div class="
number-xl
number-xl_color_light
"><span>300</span></div>
</div>
<div class="access-highlight__label">
<div class="text-label-m text-label-m_color_light">personas extranjeras han confiado en nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-6 col-sm-mr col-md-5 col-lg-5 col">
<div class="access-highlight__tile">
<div class="tile-highlight accent-dark">
<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">
<h2 class="
title-l
title-l_color_light
">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h2>
</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 class="access-highlight lazyload" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="wrap-img">
<picture>
<source srcset="{{ data-src-mobile }}" media="(max-width:767px)" />
<img src="{{ data-src }}" />
</picture>
</div>
<div class="row content">
<div class="
{{#if isReversed}}
col-xs-9 col-xs-mr col-ms-6 col-ms-ml col-ms-offset-right-1 col-sm-3 last-sm col-md-3 col-md-offset-2 col-lg-3 col
{{else}}
col-xs-9 col-xs-mr col-ms-6 col-ms-offset-1 col-sm-3 col-md-3 col-md-offset-right-2 col-lg-3 col
{{/if}}"
>
<div class="row">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
{{#if number}}
<div class="access-highlight__figure">
<div class="access-highlight__number">
{{> @number-xl number }}
</div>
{{#if label}}
<div class="access-highlight__label">
{{> @text-label-m label }}
</div>
{{/if}}
</div>
{{/if}}
</div>
</div>
</div>
{{#if isReversed}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-6 col-sm-ml col-md-5 col-lg-5 col">
<div class="access-highlight__tile">
{{> @tile-highlight tile-highlight }}
</div>
</div>
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-6 col-sm-mr col-md-5 col-lg-5 col">
<div class="access-highlight__tile">
{{> @tile-highlight tile-highlight }}
</div>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"data-src": "/dist/images/access-highlight-desktop.jpg",
"data-src-mobile": "/dist/images/access-highlight-mobile.jpg",
"number": {
"number": "300",
"colorLight": true
},
"label": {
"text": "personas extranjeras han confiado en nosotros este año",
"colorLight": true
},
"tile-highlight": {
"isSticky": true,
"text-label": {
"text": "Vive",
"colorLight": true
},
"title": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"colorLight": true
},
"bodycopy": false,
"btn": {
"href": "#",
"type": "button",
"text": "Solicita tu hipoteca"
},
"isAccentDark": 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
}
}
}
.access-highlight {
position: relative;
margin-bottom: 50px;
position: relative;
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -19px;
}
@media (--viewport-ms-min) {
margin-bottom: 50px;
}
@media (--viewport-sm-min) {
margin-bottom: 50px;
}
@media (--viewport-md-min) {
}
&__figure {
margin-bottom: 40px;
@media (--viewport-ms-min) {
margin-bottom: 60px;
}
@media (--viewport-sm-min) {
margin-bottom: 0;
}
@media (--viewport-ms-max) {
position:absolute;
top:0;
left:0;
margin:30px;
}
}
&__number {
margin-bottom: 10px;
}
&__tile {
margin-bottom: -50px;
}
.wrap-img{height:550px;position: absolute;width: 100%;top:0;overflow: hidden;display: flex; align-items:flex-start;justify-content: center;
@media (--viewport-lg-min) {
height:510px;
}
@media (--viewport-md-max) {
height:550px;
}
@media (--viewport-sm-max) {
height:550px;
}
@media (--viewport-ms-max) {
position: relative;
height:auto;
}
@media (--viewport-xs-max) {
height:auto;
}
img{width: 100%; margin-bottom: -8px;}
}
.content{width: calc(100% + 30px);position: relative;top:0;
@media (--viewport-ms-min) {
margin-top:0;
}
@media (--viewport-sm-min) {
margin-top: 60px;
}
@media (--viewport-md-min) {
margin-top: 155px;
}
@media (--viewport-lg-min) {
margin-top: 112px;
}
@media (--viewport-xs-max) {
margin-right:0;
margin-left: -10px;
width: calc(100% + 20px);
div.line{padding:0; min-height:auto;
/* Suprimo este estilo porque está generando un problema en el módulo de las landing.
Si hay que volver a ponerlo se deben revisar*/
/*.access-highlight__tile{
.tile-highlight{
.tile-highlight__wrapper{padding:30px 20px;}
}
}*/
}
}
@media (--viewport-ms-max) {
position: initial;
}
}
.tile-highlight{
&__title {
margin-bottom: 10px;
@media (--viewport-ms-min) {
margin-bottom: 20px;
}
@media (--viewport-sm-min) {
margin-bottom: 10px;
}
}
}
}
Variantes: Default, No button, For FAQ details, Reversed Se puede configurar el data-bg. El number y label sobre la imagen son opcionales.