<div class="legal withCheck">
<div class="legal__checkbox">
<div class="form-checkbox-group" id="aceptarLegal">
<div class="field-top fieldset form-list__tooltip-label_default">
<label class="label-m" for="">label</label>
<div class="field-top__wrap">
</div>
</div>
<div class="checkbox-group" id="">
<ul class="column">
<li class="checkbox-group__item">
<div class="checkbox">
<input class="checkbox-input" id="acepto" type="checkbox" name="acepto" title="acepto">
<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="acepto">
<span class="caption"></span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
<div class="field-bottom__error-message">
<span class="error-message">Es obligatorio aceptar los términos legales.</span>
</div>
<div class="field-bottom__helper-text">
<div class="bodycopy-xs
">
Helper text opcional
</div>
</div>
</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, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») para gestionar tu solicitud, para facilitarte información sobre nuestros productos y servicios, y para conocer tu valoración sobre los mismos. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Si quieres saber más sobre cómo protegemos tu privacidad, pincha aquí. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto.</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">
<h4 class="
title-s
"></h4>
<div class="
bodycopy-s
">
</div> <span class="link link_not-a-link
">
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="legal{{#if isCheckbox}} withCheck{{/if}}{{#if showLabel}} showLabel{{/if}}">
{{#if isCheckbox}}
<div class="legal__checkbox">
{{> @form-checkbox-group checkbox }}
</div>
{{/if}}
<div class="legal__bodycopy">
{{> @bodycopy-s bodycopy }}
{{#if isLink}}
<div class="legal__link">
{{#if isLightboxLegal}}
{{ render '@link' modalTrigger1 }}
{{else}}
{{> @link link }}
{{/if}}
{{#if isLinkTooltip}}
{{> @tooltip link-tooltip }}
{{/if}}
</div>
{{/if}}
</div>
{{#if isTooltip}}
<div class="legal__tooltip">
{{> @tooltip tooltip }}
</div>
{{/if}}
</div>
{
"modalTrigger1": {
"href": "#",
"text": "Lightbox New 'modalOne'",
"isModal": true,
"data-modal": "modalOne"
},
"bodycopy": {
"text": "<p>Para poder atenderte, contactaremos contigo en el teléfono y correo electrónico, y con el nombre, que nos facilites. Estos datos los utilizaremos en UCI («Unión de Créditos Inmobiliarios S.A. E.F.C.») para gestionar tu solicitud, para facilitarte información sobre nuestros productos y servicios, y para conocer tu valoración sobre los mismos. No los conservaremos ni utilizaremos para ninguna otra finalidad, y (salvo que estemos legalmente obligados) no se los facilitaremos a nadie más. Si quieres saber más sobre cómo protegemos tu privacidad, pincha aquí. Al pulsar en el siguiente botón de envío, declaro haber leído y acepto.</p>"
},
"link": {
"href": "#",
"text": "A long line for a link"
},
"checkbox": {
"field-top": {
"fieldset": true,
"label": {
"text": "label"
}
},
"id": "aceptarLegal",
"checkbox-group": {
"isColumn": true,
"checkbox-group": [
{
"id": "acepto",
"title": "acepto",
"name": "acepto",
"label": false
}
]
},
"field-bottom": {
"error-message": {
"text": "Es obligatorio aceptar los términos legales."
},
"helper-text": {
"text": "Helper text opcional"
}
}
},
"isCheckbox": true,
"isLink": true,
"isLinkTooltip": true
}
.legal {
position: relative;
display: flex;
justify-items: flex-start;
align-items: flex-start;
margin-bottom: 50px;
&__checkbox {
max-width: 35px;
.field-top {
display: none;
}
.form-checkbox-group {
position: unset;
.field-bottom {
position: absolute;
width: 100%;
bottom: -35px;
left: 0;
.field-bottom__helper-text {
.bodycopy-xs {
margin-bottom: 2px;
}
}
}
}
}
&.showLabel {
padding-top: 50px;
.field-top {
display: flex;
margin-top: -50px;
}
}
&__bodycopy {
a {
color: var(--color-accent-dark);
text-decoration: underline;
}
}
&__link {
.tooltip {
position: relative;
top: auto;
bottom: auto;
right: auto;
margin-top: 0;
margin-left: 10px;
display: inline;
&.flex {
position: absolute;
top: -11px;
left: -25px;
display: inline-flex;
}
}
}
&__tooltip {
.tooltip {
position: relative;
top: 0;
bottom: 0;
margin-top: 0;
margin-right: 10px;
}
}
}
No notes defined.