<section class="splitter splitter_bg-color_white splitter_padding_top_small splitter_padding_bottom_small ">
<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="subsidy-detail">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
<span class="title-l
">
<h2>Título ayuda/subvención con nombre super raro y largo para rellenar espacio y mostrar que aquí no hay elipsis</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="functionality-bar withData">
<ul>
<li>
<div class="wrap"><svg class="icon icon-16_map-pin ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_map-pin"></use>
</svg>
<span class="caption-label">Província</span>
</div>
</li>
<li>
<div class="wrap"><svg class="icon icon-16_calendar ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_calendar"></use>
</svg>
<span class="caption-label">Abierta hasta agotar fondos</span>
</div>
</li>
</ul>
<ul>
<li>
<div class="wrap"><a href=""><span class="bodycopy-s">Compartir resultados</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --><svg class="icon icon-16_share ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_share"></use>
</svg>
</a></div>
</li>
<li>
<div class="wrap"><a href=""><span class="bodycopy-s">Descargar listado (.pdf)</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --><svg class="icon icon-16_download ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_download"></use>
</svg>
</a></div>
</li>
</ul>
</div>
<div class="block first">
<span class="title-m
">
<h2>Para qué es la ayuda</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Resumen de la ayuda con un límite de 200 caracteres lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Visitar página oficial</span>
<svg class="icon icon-16_external-link icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_external-link"></use>
</svg>
</a>
<ul class="data">
<li>
<span class="title-s
">
<h3>Plazo presentación</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Apertura el 01/07/2022 y cierre el 31/12/2030</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="title-s
">
<h3>Ámbito</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Estatal</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="title-s
">
<h3>Fondos</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>XXX.XXX.XXX €</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<span class="title-s
">
<h3>Ayuda máxima a recibir</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>XXX.XXX.XXX €</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="block">
<svg class="icon icon-complex_gente icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_gente"></use>
</svg>
<span class="title-m
">
<h2>Quién puede pedirla</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p>
<p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p>
<p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Ver más</span>
<svg class="icon icon-16_plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_plus"></use>
</svg>
</a>
</div>
<div class="block">
<svg class="icon icon-complex_buscar-casa icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_buscar-casa"></use>
</svg>
<span class="title-m
">
<h2>En qué consiste la ayuda</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p>
<p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p>
<p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Ver más</span>
<svg class="icon icon-16_plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_plus"></use>
</svg>
</a>
</div>
<div class="block">
<svg class="icon icon-complex_facil-entender icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_facil-entender"></use>
</svg>
<span class="title-m
">
<h2>Qué acciones cubre</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p>
<p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p>
<p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Ver más</span>
<svg class="icon icon-16_plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_plus"></use>
</svg>
</a>
</div>
<div class="block">
<svg class="icon icon-complex_informacion-link icon-40 ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#complex_informacion-link"></use>
</svg>
<span class="title-m
">
<h2>Límites o condiciones</h2>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p>
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p>
<p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p>
<p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <a class="link
link_simple
link_has-icon link_has-icon_after
" href="#">
<span>Ver más</span>
<svg class="icon icon-16_plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_plus"></use>
</svg>
</a>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="form-box">
<span class="title-m
">
<h3>Es el momento de recibir información</h3>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <span class="bodycopy-m">
<p>Todo lo que tenemos que contarte</p>
</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<form>
<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">Nombre</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_nombre
" id="nombre" type="" name="" title="nombre" 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">Introduce un nombre válido.</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="apellido1">Primer apellido</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_apellido1
" id="apellido1" type="" name="" title="apellido1" 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">Introduce un apellido válido.</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="apellido2">Segundo apellido</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_apellido2
" id="apellido2" type="" name="" title="apellido2" 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">Introduce un apellido válido.</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="row">
<div class="col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4">
<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">Elige</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-8 col-ms-8 col-sm-8 col-md-8 col-lg-8">
<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-fieldset" id="">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="email">Email</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_email
" id="email" type="" 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">Introduce un email válido.</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-select " id="where">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Provincia</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">Elige</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="where1" type="radio" title="Provincia 1" name="where" value="">
<label class="access-select__option access-select__label" for="where1">
Provincia 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where2" type="radio" title="Provincia 2" name="where" value="">
<label class="access-select__option access-select__label" for="where2">
Provincia 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="where3" type="radio" title="Provincia 3" name="where" value="">
<label class="access-select__option access-select__label" for="where3">
Provincia 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</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="direccion">Dirección</label>
<div class="field-top__wrap">
</div>
</div> <input class="input
input-distinguisher_direccion
" id="direccion" type="" name="" title="direccion" 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">Introduce una dirección válida.</span>
</div>
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-select " id="cuantas">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">¿Cuántas viviendas?</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">Elige</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="cuantas1" type="radio" title="Viviendas 1" name="cuantas" value="">
<label class="access-select__option access-select__label" for="cuantas1">
Viviendas 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuantas2" type="radio" title="Viviendas 2" name="cuantas" value="">
<label class="access-select__option access-select__label" for="cuantas2">
Viviendas 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="cuantas3" type="radio" title="Viviendas 3" name="cuantas" value="">
<label class="access-select__option access-select__label" for="cuantas3">
Viviendas 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
<li class="form-list__item ">
<div class="form-list__field required">
<div class="form-select " id="puesto">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for="">Puesto que ocupa</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">Elige</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="puesto1" type="radio" title="Puesto 1" name="puesto" value="">
<label class="access-select__option access-select__label" for="puesto1">
Puesto 1
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="puestos2" type="radio" title="Puesto 2" name="puesto" value="">
<label class="access-select__option access-select__label" for="puestos2">
Puesto 2
</label>
</li>
<li class="access-select__item">
<input class="access-select__option access-select__input" id="puesto3" type="radio" title="Puesto 3" name="puesto" value="">
<label class="access-select__option access-select__label" for="puesto3">
Puesto 3
</label>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
</li>
</ul>
<div class="form-btn">
<div class="form-btn__submit">
<button id="" class="btn
" type="submit">
Hablemos
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="subsidy-detail" {{#if id}} id="{{id}}" {{/if}}>
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-7 col-lg-7 col">
{{> @title title }}
{{> @functionality-bar functionality-bar }}
{{#each block}}
<div class="block{{#if first}} first{{/if}}">
{{#if icon}}{{> @icon icon}}{{/if}}
{{>@title title}}
{{>@bodycopy bodycopy}}
{{>@link link}}
{{#if data}}
<ul class="data">
{{#each data}}
<li>
{{> @title nom }}
{{> @bodycopy desc }}
</li>
{{/each}}
</ul>
{{/if}}
</div>
{{/each}}
</div>
<div class="col-xs-12 col-ms-12 col-sm-5 col-lg-5 col">
<div class="form-box">
{{> @title title-form }}
{{> @bodycopy bodycopy-form }}
<form>
{{> @form-list form-list }}
{{> @form-btn submit-btn }}
</form>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopSmall": true,
"paddingBottomSmall": true
},
"title": {
"text": "<h2>Título ayuda/subvención con nombre super raro y largo para rellenar espacio y mostrar que aquí no hay elipsis</h2>",
"type": "-l"
},
"functionality-bar": {
"item-data": [
{
"label": {
"text": "Província",
"type": "-label"
},
"icon": {
"name": "16_map-pin"
}
},
{
"label": {
"text": "Abierta hasta agotar fondos",
"type": "-label"
},
"icon": {
"name": "16_calendar"
}
}
],
"item": [
{
"bodycopy": {
"text": "Compartir resultados",
"type": "-s"
},
"icon": {
"name": "16_share"
}
},
{
"bodycopy": {
"text": "Descargar listado (.pdf)",
"type": "-s"
},
"icon": {
"name": "16_download"
}
}
]
},
"block": [
{
"first": true,
"title": {
"text": "<h2>Para qué es la ayuda</h2>",
"type": "-m"
},
"bodycopy": {
"text": "<p>Resumen de la ayuda con un límite de 200 caracteres lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>",
"type": "-m"
},
"link": {
"href": "#",
"text": "Visitar página oficial",
"icon-after": {
"name": "16_external-link",
"isAfter": true
}
},
"data": [
{
"nom": {
"text": "<h3>Plazo presentación</h3>",
"type": "-s"
},
"desc": {
"text": "<p>Apertura el 01/07/2022 y cierre el 31/12/2030</p>",
"type": "-m"
}
},
{
"nom": {
"text": "<h3>Ámbito</h3>",
"type": "-s"
},
"desc": {
"text": "<p>Estatal</p>",
"type": "-m"
}
},
{
"nom": {
"text": "<h3>Fondos</h3>",
"type": "-s"
},
"desc": {
"text": "<p>XXX.XXX.XXX €</p>",
"type": "-m"
}
},
{
"nom": {
"text": "<h3>Ayuda máxima a recibir</h3>",
"type": "-s"
},
"desc": {
"text": "<p>XXX.XXX.XXX €</p>",
"type": "-m"
}
}
]
},
{
"icon": {
"name": "complex_gente",
"size40": true
},
"title": {
"text": "<h2>Quién puede pedirla</h2>",
"type": "-m"
},
"bodycopy": {
"text": "<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p><p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p><p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>",
"type": "-m"
},
"link": {
"href": "#",
"text": "Ver más",
"isSimple": true,
"icon-after": {
"name": "16_plus",
"isAfter": true
}
}
},
{
"icon": {
"name": "complex_buscar-casa",
"size40": true
},
"title": {
"text": "<h2>En qué consiste la ayuda</h2>",
"type": "-m"
},
"bodycopy": {
"text": "<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p><p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p><p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>",
"type": "-m"
},
"link": {
"href": "#",
"text": "Ver más",
"isSimple": true,
"icon-after": {
"name": "16_plus",
"isAfter": true
}
}
},
{
"icon": {
"name": "complex_facil-entender",
"size40": true
},
"title": {
"text": "<h2>Qué acciones cubre</h2>",
"type": "-m"
},
"bodycopy": {
"text": "<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p><p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p><p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>",
"type": "-m"
},
"link": {
"href": "#",
"text": "Ver más",
"isSimple": true,
"icon-after": {
"name": "16_plus",
"isAfter": true
}
}
},
{
"icon": {
"name": "complex_informacion-link",
"size40": true
},
"title": {
"text": "<h2>Límites o condiciones</h2>",
"type": "-m"
},
"bodycopy": {
"text": "<p>Detalle de quién puede pedir la ayuda con un límite de 1000 caracteres mostrados en un módulo de texto que se amplia en 'ver más', que harí que se ampliase la info (en esta misma sección).</p><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Facilisi vel lacinia non netus senectus ac litora torquent. Semper pharetra primis litora egestas suspendisse vulputate at velit. Habitant pharetra fusce sed platea nec tortor aenean sed ultricies. Magnis quisque tellus proin aliquet consequat massa commodo. Eros curabitur accumsan convallis arcu placerat maecenas.</p><p>Semper libero mollis pulvinar nam felis. Leo vestibulum at turpis senectus magnis dapibus; etiam amet. Aliquet cras magnis cursus tempor, egestas lacus bibendum class tempus. Et orci vel finibus imperdiet dignissim sodales.</p><p>Nostra tempor neque purus litora, tristique nisl sagittis. Dictum pretium in netus cras mi blandit. Enim nisl lobortis nam platea dolor habitant sed dui porttitor, turpis senectus magnis dapibus; etiam. Nibh ex per suspendisse cubilia maecenas enim est....</p>",
"type": "-m"
},
"link": {
"href": "#",
"text": "Ver más",
"isSimple": true,
"icon-after": {
"name": "16_plus",
"isAfter": true
}
}
}
],
"title-form": {
"text": "<h3>Es el momento de recibir información</h3>",
"type": "-m"
},
"bodycopy-form": {
"text": "<p>Todo lo que tenemos que contarte</p>",
"type": "-m"
},
"form-list": {
"form-list": [
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "nombre",
"text": "Nombre"
}
},
"input": {
"distinguisher": "nombre",
"id": "nombre",
"title": "nombre",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Introduce un nombre válido."
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "apellido1",
"text": "Primer apellido"
}
},
"input": {
"distinguisher": "apellido1",
"id": "apellido1",
"title": "apellido1",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Introduce un apellido válido."
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "apellido2",
"text": "Segundo apellido"
}
},
"input": {
"distinguisher": "apellido2",
"id": "apellido2",
"title": "apellido2",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Introduce un apellido válido."
}
}
}
},
{
"isTwoColumn": true,
"col-1": "col-xs-4 col-ms-4 col-sm-4 col-md-4 col-lg-4",
"isRequired-1": true,
"form-select-1": {
"field-top": {
"label": {
"text": "Prefijo",
"for": "randomInputId3"
}
},
"select": {
"isOverflow": true,
"distinguisher": "prefix",
"id": "randomInputId3",
"chosen-placeholder": "Elige",
"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-8 col-ms-8 col-sm-8 col-md-8 col-lg-8",
"isRequired-2": true,
"form-fieldset-2": {
"field-top": {
"label": {
"text": "Telefono"
}
},
"input": {
"distinguisher": "phone-number",
"id": "randomInputId4",
"type": "text",
"title": "Phone number",
"validationAttributes": "minlength='11'"
},
"field-bottom": {
"error-message": {
"text": "Debes rellenar el campo correctamente"
}
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "email",
"text": "Email"
}
},
"input": {
"distinguisher": "email",
"id": "email",
"title": "email",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Introduce un email válido."
}
}
}
},
{
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "Provincia"
}
},
"id": "where",
"select": {
"chosen-placeholder": "Elige",
"option": [
{
"id": "where1",
"select-name": "where",
"text": "Provincia 1"
},
{
"id": "where2",
"select-name": "where",
"text": "Provincia 2"
},
{
"id": "where3",
"select-name": "where",
"text": "Provincia 3"
}
]
},
"error-message": {
"text": "Elige provincia, por favor*"
}
}
},
{
"isRequired": true,
"form-fieldset": {
"field-top": {
"label": {
"for": "direccion",
"text": "Dirección"
}
},
"input": {
"distinguisher": "direccion",
"id": "direccion",
"title": "direccion",
"placeholder": ""
},
"field-bottom": {
"error-message": {
"text": "Introduce una dirección válida."
}
}
}
},
{
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "¿Cuántas viviendas?"
}
},
"id": "cuantas",
"select": {
"chosen-placeholder": "Elige",
"option": [
{
"id": "cuantas1",
"select-name": "cuantas",
"text": "Viviendas 1"
},
{
"id": "cuantas2",
"select-name": "cuantas",
"text": "Viviendas 2"
},
{
"id": "cuantas3",
"select-name": "cuantas",
"text": "Viviendas 3"
}
]
},
"error-message": {
"text": "Elige una opción, por favor*"
}
}
},
{
"isRequired": true,
"form-select": {
"field-top": {
"label": {
"text": "Puesto que ocupa"
}
},
"id": "puesto",
"select": {
"chosen-placeholder": "Elige",
"option": [
{
"id": "puesto1",
"select-name": "puesto",
"text": "Puesto 1"
},
{
"id": "puestos2",
"select-name": "puesto",
"text": "Puesto 2"
},
{
"id": "puesto3",
"select-name": "puesto",
"text": "Puesto 3"
}
]
},
"error-message": {
"text": "Elige una opción, por favor*"
}
}
}
]
},
"submit-btn": {
"btn": {
"type": "submit",
"text": "Hablemos"
}
}
}
.subsidy-detail {
.functionality-bar {
padding: 0 0 24px;
margin: 64px 0 0;
}
.block {
display: flex;
flex-direction: column;
gap: 24px;
align-items: flex-start;
margin-top: 64px;
.icon {
fill: var(--color-icon);
}
&.first {
.icon {
fill: var(--color-icon-accent);
}
}
ul.data {
display: flex;
flex-wrap: wrap;
row-gap: 40px;
column-gap: 30px;
margin-top: 40px;
li {
display: flex;
flex-direction: column;
row-gap: 16px;
width: calc(50% - 15px);
@media (--viewport-sm-max) {
width: 100%;
}
.title-s {
color: var(--color-text-accent);
}
}
}
}
.form-box {
background-color: var(--color-background-accent);
padding: 40px;
.title-m {
display: block;
text-align: center;
margin-bottom: 24px;
}
.bodycopy-m {
display: block;
text-align: center;
margin-bottom: 32px;
}
}
}
No notes defined.