<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">
<div class="contact__head">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
<div class="contact__head-wrapper">
<div class="contact__title">
<h1 class="title-l
">Si te quedan dudas, aquí estamos para resolverlas</h1>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__subtitle">
<span class="bodycopy-m">Lorem ipsum dolor sit amet</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="contact__link">
<a class="link
" href="#">
<span>Link global optional</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="contact__body">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="contact__body-wrapper">
<div class="contact__list">
<ul class="row">
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/envelope.svg" alt="Envelope">
</div>
<div class="contact__item-title">
<h2 class="
title-l
">
¿Hablamos?
</h2>
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="tel:916193020">
<span>91 619 3020</span>
</a>
</div>
<div class="contact__item-desc">
<span class="bodycopy">
<p>De lunes a viernes: 09:30h - 18:30h</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/envelope.svg" alt="Envelope">
</div>
<div class="contact__item-title">
<h2 class="
title-l
">
Escríbenos
</h2>
</div>
<div class="contact__item-link">
<a class="link
link_simple
link_large
" href="mailto:atencionalcliente@uci.com">
<span>atencionalcliente@uci.com</span>
</a>
</div>
<div class="contact__item-lightbox">
<div class="lightbox " value="contactFormAndRTE">
<div class="lightbox__trigger">
<button class="link
link_simple
link_has-icon link_has-icon_after
" type="button">
<span>Formulario de contacto</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</button>
</div>
<div class="lightbox__overlay" id="">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__title">
<h2 class="
title-l
">
Trabajemos juntos
</h2>
</div>
<div class="lightbox__description">
<div class="
bodycopy-m
">
<p>Déjanos tus datos de contacto y nos pondremos en contacto contigo lo antes posible</p>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__content-main contactFormAndRTE">
<div class="contact-form">
<form id="randomFormId1" class="contact-form__form form-distinguisher_contact-form" action="#" method="post" novalidate>
<div class="contact-form__content">
<ul class="form-list">
<li class="form-list__item ">
<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">
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltipCuantoNecesitas" class="tooltip flex">
<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ítulilllo</p>
<div class="
bodycopy-s
">
Este es el texto.
</div> <a class="link
" href="#">
<span>Enlacillo</span>
</a>
</div>
</div>
</div>
</div>
</div> <input class="input
input-distinguisher_name
" id="randomInputId211" type="text" name="" title="Name" autocomplete="" placeholder="¿Cómo te llamas?" />
<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="form-list__item ">
<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="randomInputId212" type="text" name="" title="Surname" autocomplete="" placeholder="¿Cómo te apellidas?" />
<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="form-list__item ">
<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="">Mail de contacto</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="randomInputId211" type="text" name="" title="Email" autocomplete="" placeholder="¿Cual es tu e-mail?" />
<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="form-list__item ">
<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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefix</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" value="+34" minlength='3' />
<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 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="">Telefono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_phone-number
" id="randomInputId4" 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="form-list__item ">
<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="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="textarea">
<textarea class="textarea-field
input-distinguisher_Mensaje
" id="randomInputId211" name="Mensaje" title="Mensaje" placeholder="Placeholder"></textarea>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-radio-group form-radio-group-distinguisher_contact-type " id="contactMethod">
<div class="field-top fieldset form-list__tooltip-label_default">
<!-- para los radio y checkbox group -->
<fieldset class="label-m " for="">Field Text</fieldset>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-email " id="randomRadioId1" type="radio" title="E-mail" name="Contact method" value="POR EMAIL" checked>
<label class="radio-label " for="randomRadioId1" id="" value="">
<span class="caption-placeholder-m">POR EMAIL</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-phone " id="randomRadioId2" type="radio" title="Phone" name="Contact method" value="POR TELÉFONO">
<label class="radio-label " for="randomRadioId2" id="" value="">
<span class="caption-placeholder-m">POR TELÉFONO</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input radio-distinguisher_contact-through-callme " id="randomRadioId3" type="radio" title="Call me" name="Contact method" value="LLAMADME YA">
<label class="radio-label " for="randomRadioId3" id="" value="">
<span class="caption-placeholder-m">LLAMADME YA</span>
</label>
</div>
</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 class="form-list__field form-list__field_call-time hidden required">
<div class="form-select form-select-distinguisher_call-time" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Field Text</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">HORARIO PREFERENTE DE CONTACTO</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="randomSelectId1" type="radio" title="De 9:00 a 14:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId1">
De 9:00 a 14:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId2" type="radio" title="De 14:00 a 18:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId2">
De 14:00 a 18:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId3" type="radio" title="De 18:00 a 20:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId3">
De 18:00 a 20:00 h
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="randomSelectId4" type="radio" title="De 20:00 a 24:00 h" name="Preferred contact time" value="">
<label class="access-select__option access-select__label" for="randomSelectId4">
De 20:00 a 24:00 h
</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>
</ul>
<div class="contact-form__legal">
<div class="legal">
<div class="legal__bodycopy">
<div class="
bodycopy-s
">
<p>UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») tratará los datos personales facilitados a través del presente formulario con la finalidad de gestionar tu solicitud de contacto, facilitarte información sobre nuestros productos y servicios, y conocer tu valoración sobre los mismos, legitimado en el consentimiento otorgado mediante la remisión del mismo. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Puedes obtener más información sobre el tratamiento de tus datos personales, y cómo ejercitar tus derechos, consultando <a href='XXXenlaceXXX' target='_blank'>nuestra Política de Protección de Datos</a>. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto la información sobre Protección de Datos.</p>
</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 class="contact-form__success hidden">
<div class="success">
<div class="success__icon">
<svg class="icon icon-complex_enviar icon-56 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_enviar"></use>
</svg>
</div>
<div class="success__title">
<h2 class="
title-l
">
Información enviada
</h2>
</div>
<div class="success__description">
<div class="
bodycopy-m
">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-4_5 col-sm-ml col-lg-4_5">
<div class="lightbox__content-additional lightbox__content-additional_col_2">
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="col-xs-12 col-ms-12 col-sm-4 col-lg-4 col">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="/dist/images/envelope.svg" alt="Envelope">
</div>
<div class="contact__item-title">
<h2 class="
title-l
">
Nuestras agencias
</h2>
</div>
<div class="contact__item-link">
<a class="link
" href="#">
<span>Dónde estamos</span>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="button"> <a class="btn
" href="#" id="">
Si lo prefieres, te llamamos
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="contact" {{#if hasID}}id="{{idComponent}}" {{/if}}>
{{#if title}}
<div class="contact__head">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-8 col-lg-8 col">
<div class="contact__head-wrapper">
<div class="contact__title">
{{> @title title }}
</div>
{{#if subtitle}}
<div class="contact__subtitle">
{{> @bodycopy subtitle }}
</div>
{{/if}}
{{#if title-link}}
<div class="contact__link">
{{> @link title-link }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/if}}
<div class="contact__body{{#if noTopBorder}} no-top-border{{/if}}">
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="contact__body-wrapper">
<div class="contact__list">
<ul class="row">
{{#each contact}}
<li
class="{{#if isTwoCols}}col-xs-12 col-ms-12 col-sm-6 col-lg-6 col{{else if isFourCols}}col-xs-12 col-ms-12 col-sm-3 col-lg-3 col{{else}}col-xs-12 col-ms-12 col-sm-4 col-lg-4 col{{/if}}">
<div class="contact__item">
<div class="contact__pic">
<img class="contact__img" src="{{ this.src }}" alt="{{ this.alt }}">
</div>
<div class="contact__item-title">
{{> @title-l this.title }}
</div>
{{#each numberWithDescription}}
{{#if this.contact}}
<div class="contact__item-link">
{{> @link this.contact }}
</div>
{{else if this.contact-text}}
<div class="contact__item-link">
{{> @bodycopy this.contact-text }}
</div>
{{/if}}
{{#if this.lightbox}}
<div class="contact__item-lightbox">
{{> @lightbox this.lightbox }}
</div>
{{/if}}
{{#if this.desc}}
<div class="contact__item-desc">
{{> @bodycopy this.desc }}
</div>
{{/if}}
{{/each}}
{{#if link}}
<div class="contact__item-link">
{{> @link this.link }}
</div>
{{/if}}
</div>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</div>
</div>
{{#if button}}
<div class="row">
<div class="col-xs-12 col-ms-9 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="button">{{> @btn button }}</div>
</div>
</div>
{{/if}}
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Si te quedan dudas, aquí estamos para resolverlas",
"type": "-l",
"isH1": true
},
"subtitle": {
"text": "Lorem ipsum dolor sit amet",
"type": "-m"
},
"title-link": {
"text": "Link global optional",
"href": "#"
},
"contact": [
{
"src": "/dist/images/envelope.svg",
"alt": "Envelope",
"title": {
"text": "¿Hablamos?",
"isH2": true
},
"numberWithDescription": [
{
"contact": {
"href": "tel:916193020",
"isLarge": true,
"isSimple": true,
"text": "91 619 3020"
},
"desc": {
"text": "<p>De lunes a viernes: 09:30h - 18:30h</p>"
}
}
]
},
{
"src": "/dist/images/envelope.svg",
"alt": "Envelope",
"title": {
"text": "Escríbenos",
"isH2": true
},
"numberWithDescription": [
{
"contact": {
"href": "mailto:atencionalcliente@uci.com",
"isLarge": true,
"isSimple": true,
"text": "atencionalcliente@uci.com"
},
"lightbox": {
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Formulario de contacto"
},
"title": {
"text": "Trabajemos juntos"
},
"description": {
"text": "<p>Déjanos tus datos de contacto y nos pondremos en contacto contigo lo antes posible</p>"
},
"contactFormAndRTE": true
}
}
]
},
{
"src": "/dist/images/envelope.svg",
"alt": "Envelope",
"title": {
"text": "Nuestras agencias",
"isH2": true
},
"numberWithDescription": [
{
"contact": {
"href": "#",
"text": "Dónde estamos"
}
}
]
}
],
"button": {
"href": "#",
"text": "Si lo prefieres, te llamamos"
}
}
.contact {
&__title {
text-align: center;
}
&__subtitle {
text-align: center;margin-top: 24px;
}
&__link {
text-align: center;margin-top: 24px;
}
&__head {
margin-bottom: 60px;
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
}
&__body {
position: relative;
/*@media (--viewport-xs-max) {
margin-right: -19px;
margin-left: -20px;
} Lo quito porque provoca un bug en mobile en la modal */
&::before,
&::after {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: var(--color-secondary-light);
content: '';
}
&.no-top-border {
&::before {
height: 0;
}
}
&::before {
top: 0;
}
&::after {
bottom: 0;
}
}
&__list {
padding: 40px 0;
@media (--viewport-ms-min) {
padding: 60px 80px;
}
@media (--viewport-sm-min) {
padding: 60px 0;
}
&>.row {
justify-content: center;
}
}
&__item {
padding: 20px 0;
text-align: center;
&-link {
margin-top: 20px;
}
&-desc {
margin-top: 5px;
@media (--viewport-sm-min) {
margin-top: 5px;
}
&:last-of-type {
margin-top: 20px;
@media (--viewport-sm-min) {
margin-top: 20px;
}
}
}
&-lightbox {
display: flex;
justify-content: center;
margin-top: 20px;
}
}
&__pic {
max-width: 54px;
margin: 0 auto 10px;
@media (--viewport-ms-min) {
margin-bottom: 20px;
}
}
&__img {
display: block;
max-width: 100%;
height: auto;
}
.button{
display: flex;
justify-content: center;
margin-top: 60px;
@media (--viewport-xs-min) {
margin-top: 40px;
}
}
}
Permite configurar el src de la imagen. Lightbox y Descripción opcionales