<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">
<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">¿No Vives en Espana y quieres comprar aquí?</div>
</div>
<div class="tile-highlight__title">
<h2 class="
title-l
title-l_color_light
">
Tu quieres una casa y nosotros lo hacemos posible
</h2>
</div>
<div class="tile-highlight__bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>
</div>
</div>
<div class="tile-highlight__btn">
<a class="btn
" href="#" id="">
Comprar casa para no residentes
</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": "¿No Vives en Espana y quieres comprar aquí?",
"colorLight": true
},
"title": {
"text": "Tu quieres una casa y nosotros lo hacemos posible",
"colorLight": true
},
"bodycopy": {
"text": "<p>Visita la casa personalmente antes de pagar, Conocer a quien pertenece la casa en el Registro de la Propiedad y una vez adquirida, registrar la vivienda en el Registro de la Propiedad, son pasos básicos para comprar en España.</p>",
"colorLight": true
},
"btn": {
"href": "#",
"type": "button",
"text": "Comprar casa para no residentes"
}
}
}
.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.