<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"><img src="/dist/images/access-highlight-bg.jpg" /></div>
<div class="row content">
<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">
<form>
<div class="contact-highlight__tile">
<div class="contact-highlight__tile__header">
<h2 class="
title-l
title-l_color_dark
">
Lorem ipsum dolor sit amet
</h2>
</div>
<ul class="form-list form-list-different-columns row">
<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="">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="">Apellidos</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_surname
" id="randomInputId22" type="text" name="" title="Surname" 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="">EMAIL</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" 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="row">
<div class="col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6">
<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="randomInputId3">Prefijo</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select " id="randomInputId3">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden" id="randomInputId3">
<div class="access-select__option access-select__chosen-option">Selecciona</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 overflow">
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId1" type="radio" title="+34 Spain" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId1">
+34 Spain
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId2" type="radio" title="+44 United Kingdom" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId2">
+44 United Kingdom
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId3" type="radio" title="+239 Sao Tome And Principe" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId3">
+239 Sao Tome And Principe
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="prefixSelectId4" type="radio" title="+1-268 Antigua and Barbuda" name="Prefix" value="">
<label class="access-select__option access-select__label" for="prefixSelectId4">
+1-268 Antigua and Barbuda
</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>
</div>
<div class="col-xs-7 col-ms-7 col-sm-7 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>
</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-textarea" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">AYÚDANOS A ENTENDER QUÉ NECESITAS</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId2111" name="Mensaje" title="Mensaje" minlength='10' maxlength='1000'></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<div class="contact-highlight__legal">
<div class="legal withCheck">
<div class="legal__checkbox">
<div class="form-checkbox-group" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="checkbox-group" id="">
<ul>
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="checkbox" type="checkbox" name="Checkbox" title="Checkbox">
<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>
<label class="checkbox-label" for="checkbox">
<span class="caption"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</p>
</div>
<div class="legal__link">
<a class="link
" href="#">
<span>A long line for a link</span>
</a>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<svg class="icon icon-16_tooltip ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_tooltip"></use>
</svg>
<div class="msg-tooltip">
<span class="arrow"></span>
<div class="wrap">
<p class="
title-s
">Título Tooltip</p>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Solicitar información
</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": "Lorem ipsum dolor sit amet",
"colorDark": true
},
"legal": {
"isCheckbox": true,
"isLinkTooltip": true,
"isLink": true,
"bodycopy": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico.</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,
"twocolumns": 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": "Apellidos"
}
},
"input": {
"distinguisher": "surname",
"id": "randomInputId22",
"type": "text",
"title": "Surname",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"twocolumns": true,
"form-fieldset": {
"field-top": {
"label": {
"text": "EMAIL"
}
},
"input": {
"placeholder": "",
"distinguisher": "email",
"id": "randomInputId211",
"type": "text",
"title": "Email"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"twocolumns": true,
"isTwoColumn": true,
"col-1": "col-xs-5 col-ms-5 col-sm-5 col-md-6 col-lg-6",
"isRequired-1": true,
"form-select-1": {
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Selecciona",
"validationAttributes": "minlength='3'",
"option": [
{
"id": "prefixSelectId1",
"select-name": "Prefix",
"text": "+34 Spain"
},
{
"id": "prefixSelectId2",
"select-name": "Prefix",
"text": "+44 United Kingdom"
},
{
"id": "prefixSelectId3",
"select-name": "Prefix",
"text": "+239 Sao Tome And Principe"
},
{
"id": "prefixSelectId4",
"select-name": "Prefix",
"text": "+1-268 Antigua and Barbuda"
}
]
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
},
"col-2": "col-xs-7 col-ms-7 col-sm-7 col-md-6 col-lg-6",
"isRequired-2": true,
"form-fieldset-2": {
"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"
}
}
}
},
{
"onecolumn": true,
"isRequired": true,
"form-textarea": {
"field-top": {
"label": {
"text": "AYÚDANOS A ENTENDER QUÉ NECESITAS"
}
},
"textarea": {
"distinguisher": "Mensaje",
"id": "randomInputId2111",
"type": "text",
"title": "Mensaje",
"placeholder": "",
"validationAttributes": "minlength='10' maxlength='1000'"
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Solicitar información"
}
},
"success": {
"title": {
"text": "Información enviada"
},
"description": {
"text": "<p>Si tienes una cuenta con nosotros te enviaremos un mail temporal de recuperación de contraseña. Por favor comprueba tu bandeja de entrada</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"
}
},
"isReversedWide": true
}
.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.