<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="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-sm-10 col-md-10 col-lg-10 col col-sm-mr-ml">
<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 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-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": false,
"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"
}
},
"isFullWidth": true,
"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.