<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="row data-query-form">
<form id="dataQueryForm">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
<h2 class="
title-l
">
Datos personales
</h2>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ocultar</span>
<svg class="icon icon-16_chevron-up icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-up"></use>
</svg>
</a>
</div>
</div>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-4 col-sm-4 col-md-4 col-md-offset-1
">
<div class="form-list__field
">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="name">Nombre</label>
<div class="field-top__wrap">
</div>
</div> <input class="input disabled
input-distinguisher_name
" id="name" type="text" name="" title="Name" autocomplete="" placeholder="Nombre" disabled />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-5 col-sm-5 col-md-4
">
<div class="form-list__field
">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="apellidos">Apellidos</label>
<div class="field-top__wrap">
</div>
</div> <input class="input disabled
input-distinguisher_apellidos
" id="apellidos" type="text" name="" title="Apellidos" autocomplete="" placeholder="Apellidos" disabled />
<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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-3 col-sm-3 col-md-2
">
<div class="form-list__field
">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="edad">Edad</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="" type="text" name="" title="Edad" value="30" disabled>
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
AÑOS
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-6 col-ms-4 col-sm-3 col-md-2 col-md-offset-1
">
<div class="form-list__field
">
<div class="form-radio-group " id="residente-espana">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="residente-espana">Residente en España</label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio disabled">
<input class="radio-input" id="residente-espana-si" type="radio" title="residente-espana-si" name="residente-espana" value="Sí" disabled checked>
<label class="radio-label " for="residente-espana-si" id="" value="">
<span class="caption">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio disabled">
<input class="radio-input" id="residente-espana-no" type="radio" title="residente-espana-no" name="residente-espana" value="No" disabled>
<label class="radio-label " for="residente-espana-no" id="" value="">
<span class="caption">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-6 col-ms-4 col-sm-3 col-md-2
">
<div class="form-list__field
">
<div class="form-radio-group " id="personas-a-cargo">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="personas-a-cargo">Personas a tu cargo</label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio disabled">
<input class="radio-input" id="personas-a-cargo-si" type="radio" title="personas-a-cargo-si" name="personas-a-cargo" value="Sí" disabled checked>
<label class="radio-label " for="personas-a-cargo-si" id="" value="">
<span class="caption">Sí</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio disabled">
<input class="radio-input" id="personas-a-cargo-no" type="radio" title="personas-a-cargo-no" name="personas-a-cargo" value="No" disabled>
<label class="radio-label " for="personas-a-cargo-no" id="" value="">
<span class="caption">No</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-4 col-sm-6 col-md-6
">
<div class="form-list__field
">
<div class="form-switch">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="cuantas-personas">Cuántas personas</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-switch-group" id="">
<ul class="switch-group">
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
checked
disabled
" id="switch1" type="radio" title="Switch 1" name="Switch group" value="1" disabled>
<label class="switch-label" for="switch1">
<div class="text-label-m">1</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
disabled
" id="switch2" type="radio" title="Switch 2" name="Switch group" value="2" disabled>
<label class="switch-label" for="switch2">
<div class="text-label-m">2</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
disabled
" id="switch3" type="radio" title="Switch 3" name="Switch group" value="3" disabled>
<label class="switch-label" for="switch3">
<div class="text-label-m">3</div>
</label>
</div>
</li>
<li class="switch-group__item">
<div class="switch-wrapper">
<input class="switch
disabled
" id="switch4" type="radio" title="Switch 4" name="Switch group" value="+3" disabled>
<label class="switch-label" for="switch4">
<div class="text-label-m">+3</div>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
<h2 class="
title-l
">
Datos económicos
</h2>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ocultar</span>
<svg class="icon icon-16_chevron-up icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-up"></use>
</svg>
</a>
</div>
</div>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-12 col-ms-4 col-sm-5 col-md-3 col-md-offset-1
">
<div class="form-list__field
">
<div class="form-select " id="situacion-laboral">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Situación laboral</label>
<div class="field-top__wrap">
</div>
</div>
<div class="access-select disabled ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">Chosen placeholder</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="situacion-laboral1" type="radio" title="situacion-laboral 1" name="situacion-laboral" value="">
<label class="access-select__option access-select__label" for="situacion-laboral1">
situacion-laboral 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacion-laboral2" type="radio" title="situacion-laboral 2" name="situacion-laboral" value="">
<label class="access-select__option access-select__label" for="situacion-laboral2">
situacion-laboral 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="situacion-laboral3" type="radio" title="situacion-laboral 3" name="situacion-laboral" value="">
<label class="access-select__option access-select__label" for="situacion-laboral3">
situacion-laboral 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-4 col-sm-4 col-md-4
">
<div class="form-list__field
">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="ingresos-netos-mensuales">Ingresos netos mensuales</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="" type="text" name="" title="Ingresos netos mensuales" value="1200" disabled>
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
€
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-4 col-sm-3 col-md-3
">
<div class="form-list__field
">
<div class="form-input disabled">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="numero-pagas">Número de pagas</label>
<div class="field-top__wrap">
</div>
</div>
<div class="form-input__fieldset disabled">
<input class="form-input__input " id="" type="text" name="" title="Numero de pagas" value="14" disabled>
<div class="form-input__symbol" for="">
<div class="bodycopy-xs
">
PAGAS
</div>
</div>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
<h2 class="
title-l
">
Datos de contacto
</h2>
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Ocultar</span>
<svg class="icon icon-16_chevron-up icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_chevron-up"></use>
</svg>
</a>
</div>
</div>
<ul class="form-list form-list-different-columns row">
<li class="col
form-list__item
col-xs-3 col-ms-2 col-sm-2 col-md-1 col-md-offset-1
">
<div class="form-list__field
">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Prefijo</label>
<div class="field-top__wrap">
</div>
</div> <input class="input disabled
input-distinguisher_prefix
" id="randomInputId3" type="text" name="" title="Phone prefix" autocomplete="" disabled 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-9 col-ms-4 col-sm-4 col-md-4
">
<div class="form-list__field
">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Teléfono</label>
<div class="field-top__wrap">
</div>
</div> <input class="input disabled
input-distinguisher_phone-number
" id="randomInputId4" type="text" name="" title="Phone number" autocomplete="" disabled 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>
</div>
</div>
</li>
<li class="col
form-list__item
col-xs-12 col-ms-6 col-sm-6 col-md-5
">
<div class="form-list__field
">
<div class="form-fieldset disabled" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="name">Email</label>
<div class="field-top__wrap">
</div>
</div> <input class="input disabled
input-distinguisher_name
" id="name" type="text" name="" title="Name" autocomplete="" placeholder="carlos.lopez@gmail.com" disabled />
<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>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
<div class="alert inline">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="alert__wrap not-informative">
<div class="alert__icon">
<svg class="icon icon-alert-info icon-big">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#alert-info"></use>
</svg>
</div>
<div class="alert__content">
<div class="
bodycopy-s
">
<p>Lo sentimos, los datos aquí mostrados no pueden ser editados aún. Si quieres modificar algo contacta con tu consultor financiero.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="row data-query-form"{{#if hasID}} id="{{idComponent}}"{{/if}}>
<form id="{{id}}">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
{{> @title-l subtitulo1 }}
{{> @link ocultar }}
</div>
</div>
{{> @form-list-different-columns form-list1 }}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
{{> @title-l subtitulo2 }}
{{> @link ocultar }}
</div>
</div>
{{> @form-list-different-columns form-list2 }}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-lg-12 col">
<div class="wrap-bloque">
<div class="row tit-bloque">
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
{{> @title-l subtitulo3 }}
{{> @link ocultar }}
</div>
</div>
{{> @form-list-different-columns form-list3 }}
</div>
</div>
{{#if notification}}
<div class="col-xs-12 col-ms-12 col-ms-mr-ml col-sm-12 col-md-10 col col-md-offset-1">
{{> @alert notification }}
</div>
{{/if}}
</form>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"id": "dataQueryForm",
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingBottomLarge": true
},
"subtitulo1": {
"text": "Datos personales"
},
"subtitulo2": {
"text": "Datos económicos"
},
"subtitulo3": {
"text": "Datos de contacto"
},
"ocultar": {
"href": "#",
"text": "Ocultar",
"icon-after": {
"name": "16_chevron-up",
"isAfter": true
}
},
"notification": {
"isInformative": true,
"isInline": true,
"text": {
"text": "<p>Lo sentimos, los datos aquí mostrados no pueden ser editados aún. Si quieres modificar algo contacta con tu consultor financiero.</p>"
}
},
"form-list1": {
"form-list": [
{
"anotherGrid": "col-xs-12 col-ms-4 col-sm-4 col-md-4 col-md-offset-1",
"form-fieldset": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Nombre",
"for": "name"
}
},
"input": {
"distinguisher": "name",
"id": "name",
"type": "text",
"title": "Name",
"placeholder": "Nombre",
"disabled": true
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-5 col-sm-5 col-md-4",
"form-fieldset": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Apellidos",
"for": "apellidos"
}
},
"input": {
"distinguisher": "apellidos",
"id": "apellidos",
"type": "text",
"title": "Apellidos",
"placeholder": "Apellidos",
"disabled": true
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-3 col-sm-3 col-md-2",
"form-input": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Edad",
"for": "edad"
}
},
"hasID": false,
"inputTitle": "Edad",
"idComponent": "edad",
"inputValue": "30",
"symbol": {
"text": "AÑOS"
},
"disabled": true
}
},
{
"anotherGrid": "col-xs-6 col-ms-4 col-sm-3 col-md-2 col-md-offset-1",
"form-radio-group": {
"field-top": {
"label": {
"text": "Residente en España",
"for": "residente-espana"
}
},
"id": "residente-espana",
"radio-group": {
"radio-group": [
{
"id": "residente-espana-si",
"title": "residente-espana-si",
"name": "residente-espana",
"additionalAttributes": "checked",
"label": {
"text": "Sí"
},
"disabled": true
},
{
"id": "residente-espana-no",
"title": "residente-espana-no",
"name": "residente-espana",
"label": {
"text": "No"
},
"disabled": true
}
]
}
}
},
{
"anotherGrid": "col-xs-6 col-ms-4 col-sm-3 col-md-2",
"form-radio-group": {
"field-top": {
"label": {
"text": "Personas a tu cargo",
"for": "personas-a-cargo"
}
},
"id": "personas-a-cargo",
"radio-group": {
"radio-group": [
{
"id": "personas-a-cargo-si",
"title": "personas-a-cargo-si",
"name": "personas-a-cargo",
"additionalAttributes": "checked",
"label": {
"text": "Sí"
},
"disabled": true
},
{
"id": "personas-a-cargo-no",
"title": "personas-a-cargo-no",
"name": "personas-a-cargo",
"label": {
"text": "No"
},
"disabled": true
}
]
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-4 col-sm-6 col-md-6",
"form-switch": {
"field-top": {
"label": {
"text": "Cuántas personas",
"for": "cuantas-personas"
}
},
"switch-group": {
"switch-group": [
{
"id": "switch1",
"title": "Switch 1",
"name": "Switch group",
"disabled": true,
"checked": true,
"label": {
"text": "1"
}
},
{
"id": "switch2",
"title": "Switch 2",
"name": "Switch group",
"disabled": true,
"label": {
"text": "2"
}
},
{
"id": "switch3",
"title": "Switch 3",
"disabled": true,
"name": "Switch group",
"label": {
"text": "3"
}
},
{
"id": "switch4",
"title": "Switch 4",
"disabled": true,
"name": "Switch group",
"label": {
"text": "+3"
}
}
]
}
}
}
]
},
"form-list2": {
"form-list": [
{
"anotherGrid": "col-xs-12 col-ms-4 col-sm-5 col-md-3 col-md-offset-1",
"form-select": {
"disabled": true,
"field-top": {
"label": {
"text": "Situación laboral"
}
},
"id": "situacion-laboral",
"select": {
"disabled": true,
"chosen-placeholder": "Chosen placeholder",
"option": [
{
"id": "situacion-laboral1",
"select-name": "situacion-laboral",
"text": "situacion-laboral 1"
},
{
"id": "situacion-laboral2",
"select-name": "situacion-laboral",
"text": "situacion-laboral 2"
},
{
"id": "situacion-laboral3",
"select-name": "situacion-laboral",
"text": "situacion-laboral 3"
}
]
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-4 col-sm-4 col-md-4",
"form-input": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Ingresos netos mensuales",
"for": "ingresos-netos-mensuales"
}
},
"hasID": false,
"inputTitle": "Ingresos netos mensuales",
"idComponent": "ingresos-netos-mensuales",
"inputValue": "1200",
"symbol": {
"text": "€"
},
"disabled": true
}
},
{
"anotherGrid": "col-xs-12 col-ms-4 col-sm-3 col-md-3",
"form-input": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Número de pagas",
"for": "numero-pagas"
}
},
"hasID": false,
"inputTitle": "Numero de pagas",
"idComponent": "numero-pagas",
"inputValue": "14",
"symbol": {
"text": "PAGAS"
},
"disabled": true
}
}
]
},
"form-list3": {
"form-list": [
{
"anotherGrid": "col-xs-3 col-ms-2 col-sm-2 col-md-1 col-md-offset-1",
"form-fieldset": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Prefijo"
}
},
"input": {
"distinguisher": "prefix",
"id": "randomInputId3",
"type": "text",
"title": "Phone prefix",
"value": "+34",
"validationAttributes": "minlength='3'",
"disabled": true
}
}
},
{
"anotherGrid": "col-xs-9 col-ms-4 col-sm-4 col-md-4",
"form-fieldset": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Teléfono"
}
},
"input": {
"distinguisher": "phone-number",
"id": "randomInputId4",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'",
"disabled": true
}
}
},
{
"anotherGrid": "col-xs-12 col-ms-6 col-sm-6 col-md-5",
"form-fieldset": {
"isDisabled": true,
"field-top": {
"label": {
"text": "Email",
"for": "name"
}
},
"input": {
"distinguisher": "name",
"id": "name",
"type": "text",
"title": "Name",
"placeholder": "carlos.lopez@gmail.com",
"disabled": true
}
}
}
]
}
}
.data-query-form {
form{width: 100%;}
.wrap-bloque {
margin-bottom: 48px;
@media (--viewport-xs-max) {
margin-bottom: 20px;
}
.tit-bloque {
margin-bottom: 16px;
.col {
flex-direction: row;
justify-content: space-between;
}
.link_has-icon .icon{fill:var(--color-secondary);top:auto;margin-left:5px; margin-top: 2px;}
}
}
.alert{margin-top: 12px;
@media (--viewport-xs-max) {
margin-top:0;
}
}
}
No notes defined.