<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="contact-highlight lazyload">
<div class="wrap-img visible-all-views"><img src="/dist/images/access-highlight-bg.jpg" /></div>
<div class="row content">
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-8 col-md-7 col-lg-7 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
<form>
<div class="contact-highlight__tile accent-dark">
<div class="contact-highlight__tile__header">
<div class="text-label-m">Lorem ipsum dolor sit amet est</div>
<h2 class="
title-l
title-l_color_dark
title-l_color_accent
">
Mauris viverra sem quis velit varius, vel bibendum velit fermentum
</h2>
<div class="
bodycopy-m
">
<p>Proin a ornare purus, sit amet molestie velit. In tempor varius faucibus. Morbi condimentum molestie sapien, sed sollicitudin mi. Phasellus dictum ornare lectus sit amet rhoncus. In tempor sapien neque, interdum convallis nisi sollicitudin ut. Sed orci nisi, tincidunt ac dapibus nec, consequat ut mi.</p>
</div>
</div>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">NOMBRE</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId21" type="text" name="" title="Name" autocomplete="" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="phoneNumber">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="phoneNumber" type="text" name="" title="Phone number" autocomplete="" minlength='11' />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="randomInputId16">MAIL DE CONTACTO</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_
" type="" name="" title="" autocomplete="" />
<div class="form-fieldset__valid-indicator">
<svg class="icon icon-icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-check"></use>
</svg>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12
">
<div class="form-list__field
required">
<div class="form-select " id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="provincia">¿Dónde compras?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="provincia">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="provincia">
<div class="access-select__option access-select__chosen-option">Elije provincia</div>
<div class="access-select__chosen-icon">
<svg class="icon icon-chebron-down ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-down"></use>
</svg>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId1" type="radio" title="Provincia 1" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId2" type="radio" title="Provincia 2" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randromApplicationProvinceId3" type="radio" title="Provincia 3" name="Province" value="">
<label class="access-select__option access-select__label" for="randromApplicationProvinceId3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="landing-price">¿POR CUÁNTO COMPRAS?</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="landing-price" value="100.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-6 col-lg-6
">
<div class="form-list__field
required">
<div class="form-input">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="landing-howmuch">¿CUÁNTO APORTAS??</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset ">
<input class="form-input__input " id="" type="text" name="" title="landing-howmuch" value="10.000">
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Debes rellenar el campo correctamente</span>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="contact-highlight__legal">
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href='#'>eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, link. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Quiero saber más
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="contact-highlight lazyload{{#if isOpening}} opening{{/if}}{{#if isUnderHeader}} under-header{{/if}}" {{#if hasID}}id="{{idComponent}}"{{/if}}>
<div class="wrap-img{{#if isVisibleAllViews}} visible-all-views{{/if}}"><img src="{{ this.data-bg }}" /></div>
<div class="row content">
{{#if isReversed}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-8 col-md-7 col-lg-7 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isReversedWide}}
<div class="col-xs-12 col-ms-12 col-ms-mr col-sm-9 col-md-8 col-lg-8 col start-lg start-md start-sm col-lg-offset-1 col-md-offset-1 col-sm-offset-1">
{{else if isWide}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-9 col-md-8 col-lg-8 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{else if isFullWidth}}
<div class="col-xs-12 col-ms-12 col-sm-10 col-md-10 col-lg-10 col col-sm-mr-ml">
{{else}}
<div class="col-xs-12 col-ms-12 col-ms-ml col-sm-8 col-md-7 col-lg-7 col end-lg end-md end-sm col-lg-offset-right-1 col-md-offset-right-1 col-sm-offset-right-1">
{{/if}}
<form>
<div class="contact-highlight__tile{{#if isAccentBG}} accent{{/if}}{{#if isAccentDarkBG}} accent-dark{{/if}}">
<div class="contact-highlight__tile__header">
{{#if antetitulo}}
{{> @text-label-m antetitulo }}
{{/if}}
{{#if isOpening}}
{{> @title-l title-opening }}
{{else}}
{{> @title-l title }}
{{/if}}
{{#if entradilla}}
{{> @bodycopy-m entradilla }}
{{/if}}
</div>
{{#if isSitecoreForms}}
{{ render '@columns-form--threecolumns-fullwidth' }}
{{else}}
{{> @form-list-different-columns form-list }}
{{#if isLegal}}
<div class="contact-highlight__legal">
{{> @legal legal }}
</div>
{{else if isLightboxLegal}}
<div class="contact-highlight__legal">
{{ render '@legal--lightboxlegal' }}
</div>
{{/if}}
{{> @form-btn submit-btn }}
{{/if}}
</div>
</form>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{{#if isLightboxLegal}}
{{ render '@lightbox-new' lightbox1 }}
{{/if}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"isLegal": true,
"data-bg": "/dist/images/access-highlight-bg.jpg",
"title": {
"text": "Mauris viverra sem quis velit varius, vel bibendum velit fermentum",
"colorDark": true,
"colorAccent": true
},
"legal": {
"isCheckbox": false,
"isLinkTooltip": false,
"isLink": false,
"bodycopy": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do <a href='#'>eiusmod</a> tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, link. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
},
"link": {
"href": "#",
"text": "A long line for a link"
},
"checkbox": {
"checkbox-group": {
"field-top": false,
"checkbox-group": [
{
"id": "checkbox",
"title": "Checkbox"
}
]
},
"error-message": {
"text": "Error"
}
},
"link-tooltip": {
"title": {
"text": "Título Tooltip",
"isP": true
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
}
},
"form-list": {
"form-list": [
{
"isRequired": true,
"onecolumn": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "NOMBRE"
}
},
"input": {
"distinguisher": "name",
"id": "randomInputId21",
"type": "text",
"title": "Name",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "Telefono",
"for": "phoneNumber"
}
},
"input": {
"distinguisher": "phone-number",
"id": "phoneNumber",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "randomInputId16",
"text": "MAIL DE CONTACTO"
}
},
"fieldset": {
"label": {
"text": "MAIL DE CONTACTO"
},
"input": {
"distinguisher": "email",
"id": "randomInputId16",
"type": "email",
"title": "E-mail"
}
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"onecolumn": true,
"form-select": {
"field-top": {
"label": {
"text": "¿Dónde compras?",
"for": "provincia"
}
},
"select": {
"id": "provincia",
"chosen-placeholder": "Elije provincia",
"option": [
{
"id": "randromApplicationProvinceId1",
"select-name": "Province",
"text": "Provincia 1"
},
{
"id": "randromApplicationProvinceId2",
"select-name": "Province",
"text": "Provincia 2"
},
{
"id": "randromApplicationProvinceId3",
"select-name": "Province",
"text": "Provincia 3"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-input": {
"field-top": {
"label": {
"text": "¿POR CUÁNTO COMPRAS?",
"for": "landing-price"
}
},
"inputTitle": "landing-price",
"id": "landing-price",
"inputValue": "100.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-input": {
"field-top": {
"label": {
"text": "¿CUÁNTO APORTAS??",
"for": "landing-howmuch"
}
},
"inputTitle": "landing-howmuch",
"id": "landing-howmuch",
"inputValue": "10.000",
"symbol": {
"text": "€"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Quiero saber más"
}
},
"success": {
"title": {
"text": "Información enviada"
},
"description": {
"text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam pulvinar eu ante et sodales. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut egestas ligula et finibus tempor. Sed quis sapien in purus ornare scelerisque a in neque. Mauris rutrum nunc ac felis porta, non ullamcorper velit lacinia. Integer gravida enim sit amet bibendum vehicula. Nullam consequat imperdiet nunc, vitae porttitor nisl viverra in.</p>"
}
},
"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"
}
},
"isVisibleAllViews": true,
"isAccentDarkBG": true,
"antetitulo": {
"text": "Lorem ipsum dolor sit amet est"
},
"entradilla": {
"text": "<p>Proin a ornare purus, sit amet molestie velit. In tempor varius faucibus. Morbi condimentum molestie sapien, sed sollicitudin mi. Phasellus dictum ornare lectus sit amet rhoncus. In tempor sapien neque, interdum convallis nisi sollicitudin ut. Sed orci nisi, tincidunt ac dapibus nec, consequat ut mi.</p>"
}
}
.contact-highlight {
position: relative;
margin-bottom: 50px;
@media (--viewport-ms-max) {
margin-right: 0;
}
@media (--viewport-xs-max) {
margin-left: -20px;
margin-right: -20px;
}
@media (--viewport-ms-min) {
margin-bottom: 50px;
}
@media (--viewport-sm-min) {
margin-bottom: 50px;
}
@media (--viewport-md-min) {
}
&__tile {
margin-bottom: -50px;background-color:var(--color-accent-light); padding: 70px;
@media (--viewport-ms-max) {
padding:40px;
}
@media (--viewport-xs-max) {
padding:40px 20px;
}
.form-list{
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
}
}
/*input, .access-select__option, .textarea-field, .form-input__fieldset, .checkbox-label:before{border-color: var(--color-accent-dark);} LO QUITAMOS POR PETICION DE DS (CA)*/
}
&.without-tooltip-label{
.form-list{margin-top: 26px;
.tooltip-label{
display: none;
}
.form-checkbox-group{ /* para forzar un enlace a los textos legales en PT */
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
&__valid-indicator{
top: 21px;
}
.form-radio-group { /* Para que en el caso de campo radio siempre se muestre (CA)*/
.tooltip-label{
justify-content: flex-start;
height: auto;
display:flex;
}
}
}
}
&__header{
margin-bottom: 20px;
.text-label-m{
margin-bottom: 20px;
}
/*.title-l{
}*/
.bodycopy-m{
margin-bottom: 10px; /*margin-top: -20px;*/
margin-top: 20px;
}
}
&.accent{
background-color:var(--color-accent);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent-dark);
}
}
}
}
&.accent-dark{
background-color:var(--color-accent-dark);
.contact-highlight__tile__header{
.text-label-m{
color: var(--color-text-light);
}
.bodycopy-m{
color: var(--color-text-light);
}
}
.form-list{
.text-label-m, .label-m{color: var(--color-text-light);}
}
.contact-form__legal{
a{
color: var(--color-text-light);
}
.link span:after{
background-color: var(--color-text-light);
}
.bodycopy-s{color: var(--color-text-light);
a{
color: var(--color-accent);
}
}
}
}
.legal__checkbox{
.checkbox-label{
background-color: var(--color-white);
margin-right: 10px;
margin-left: -12px;
width: 24px;
}
}
.recaptcha{
margin-top: 0;
align-items: flex-start;
@media only screen and (max-width: 320px) {
margin-left:-10px;
}
}
.legal{
margin-top: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.landing-legal-form{
margin-bottom: 20px;
a{color: var(--color-accent-dark); text-decoration:underline;}
}
.form-btn{
margin-top: 20px;
text-align: left;
}
}
.wrap-img{height:550px;margin-top:0;width: 100%;top:0;overflow: hidden;display: flex; align-items:flex-start;justify-content: center;
@media (--viewport-lg-min) {
height:510px;
margin-top:50px;
}
@media (--viewport-md-max) {
height:550px;
margin-top:50px;
}
@media (--viewport-sm-max) {
height:550px;
margin-top:0;
}
@media (--viewport-ms-max) {
display:none;
}
img{width: 100%;}
&.visible-all-views{
@media (--viewport-ms-max) {
display:block;
height:auto;
margin-bottom:-8px;
}
}
}
.content{
/*width: calc(100% + 30px); Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)*/
position: relative; margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
@media (--viewport-ms-max) {
margin-top:0;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}
/* Lo quito porque no entiendo que aporta y genera una diferencia en fullwidth que hace que no se centre bien (CA)
@media (--viewport-xs-max) {
width: calc(100% + 20px);
}
*/
}
&.opening {
.content{
/*margin-top: -450px;
@media (--viewport-lg-min) {
margin-top:-410px;
}
@media (--viewport-md-max) {
margin-top:-450px;
}
@media (--viewport-sm-max) {
margin-top:-450px;
}
&.visible-all-views{
@media (--viewport-ms-max) {
margin-top:0;
}
}*/
}
.wrap-img{
margin-top: 0;
}
}
&.under-header {
margin-top: 100px;
.content{
@media (--viewport-ms-max) {
margin-top:0;
}
}
}
.splitter{
.container{
margin: 0;
padding: 0;
.splitter__wrapper{
margin: 0;
padding: 0;
background: none;
}
}
}
}
Variantes: Default, Opening, Under Header, Image visible in all views, Accent BG, Accent Dark BG, Reversed, Without tooltip labels, Wide. Se puede configurar el src de la imagen.