<section class="splitter splitter_bg-color_white ">
<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="sidebar-content-table">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4">
<div class="wrap-aggregator scroll collapsed">
<div class="tile-aggregator contentTable">
<div class="tile-aggregator__title">
<h3 class="
title-m
">Sobre UCI</h3>
<svg class="icon icon-icon-plus-circle ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#icon-plus-circle"></use>
</svg>
</div>
<div class="tile-aggregator__body">
<ul class="tile-aggregator__list">
<li class="tile-aggregator__item">
<div class="tile-aggregator__link active">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>¿Qué necesito para solicitar una hipoteca?</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
<ul class="tile-aggregator__list">
<li class="tile-aggregator__item">
<div class="tile-aggregator__link active">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
</ul>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>¿Tengo que tener dinero ahorrado?</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
<ul class="tile-aggregator__list">
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
</ul>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>¿Qué necesito para solicitar una hipoteca?</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
<ul class="tile-aggregator__list">
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
<li class="tile-aggregator__item">
<div class="tile-aggregator__link">
<a class="link
link_simple
link_has-icon link_has-icon_after
link_continue
" href="#">
<span>Soy un sub link</span>
<svg class="icon icon-chebron-left icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#chebron-left"></use>
</svg>
</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-8 col-lg-8">
<div class="wrap">
<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="faq">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-6 col-lg-6 col">
<div class="faq__content">
<div class="faq__icon">
</div>
<div class="faq__title">
<h2 class="
title-l
">
Palabras complicadas de explicación sencilla
</h2>
</div>
<div class="faq__accordion">
<div class="accordion ">
<ul class="accordion__list">
<li class="accordion__item">
<button class="
accordion__trigger
active
" type="button">
<span class="bodycopy-l">TIN</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <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>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>TIN significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">TAE</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <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>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>TAE significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">EURIBOR</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <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>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>EURIBOR significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="
accordion__trigger
" type="button">
<span class="bodycopy-l">Tasa de compensación</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --> <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>
</button>
<div class="accordion__item-content ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
<div class="accordion__item-content-wrapper">
<div class="accordion__item-description">
<div class="
bodycopy-m
">
<p>Tasa de compensación significa Tasa Anual Equivalente o Tasa Anual Efectiva y es un término financiero que se define como el tipo de interés que indica el coste o rendimiento efectivo de un producto financierodurante el plazo establecido para la operación.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
<div class="faq__box">
<div class="row">
<div class="col-xs-9 col-xs-mr-ml col-ms-9 col-sm-12 col-lg-12 col">
<div class="faq__box-wrapper">
<div class="faq__box-title">
<h2 class="
title-l
title-l_color_light
">
¿Te sigues quedando dudas?
</h2>
</div>
<div class="faq__box-bodycopy rich-text">
<div class="
bodycopy-m
bodycopy_color_light
">
<p>Agrupa todos los préstamos e hipotecas que tengas contraídos en un solo préstamo.</p>
</div>
</div>
<div class="faq__box-link">
<a class="link
link_color_light
" href="#">
<span>Iniciar simulador</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="line"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<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="product-swiper">
<div id="swiperID" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="product " id=product>
<div class="row bg-color_yellow">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
<div class="
number-xl
number-xl_color_light
"><span>5.000</span></div>
</div>
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
<div class="text-label-m text-label-m_color_light">personas han comprado casa con nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__icon">
<img class="product__img" src="/dist/images/compracasa.svg" alt="Product">
</div>
<div class="product__label">
<div class="text-label-m">VIVE / HIPOTECA COMPRA CASA</div>
</div>
<div class="product__title">
<h2 class="
title-l
">
1 - Tu quieres una casa y nosotros lo hacemos posible
</h2>
</div>
<div class="product__bodycopy">
<div class="
bodycopy-m
">
<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="product__btn">
<a class="btn
" href="#" id="">
Comprar casa
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product " id=product2>
<div class="row ">
<div class="col-xs-12 col-ms-6 col-sm-6 col-lg-6">
<div class="product__support lazyload">
<img src="/dist/images/product.jpg" />
<div class="row">
<div class="col-xs-10 col-ms-12 col-sm-10 col-md-8 col-lg-8">
<div class="product__support-wrapper">
<div class="product__support-text">
<div class="
number-xl
number-xl_color_light
"><span>5.000</span></div>
</div>
<div class="product__support-label-wrapper">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-md-10 col-lg-10">
<div class="product__support-label">
<div class="text-label-m text-label-m_color_light">personas han comprado casa con nosotros este año</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-6 col-sm-4 col-sm-mr-ml col-lg-4">
<div class="product__content">
<div class="product__icon">
<img class="product__img" src="/dist/images/compracasa.svg" alt="Product">
</div>
<div class="product__label">
<div class="text-label-m">VIVE / HIPOTECA COMPRA CASA</div>
</div>
<div class="product__title">
<h2 class="
title-l
">
2 - Tu quieres una casa y nosotros lo hacemos posible
</h2>
</div>
<div class="product__bodycopy">
<div class="
bodycopy-m
">
<p>Estás a punto de dar un gran paso en tu vida, y necesitas saber por dónde empezar.</p>
</div>
</div>
<div class="product__btn">
<a class="btn
" href="#" id="">
Comprar casa
</a>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="product__nav">
<div class="product__nav-back nav-back">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-left"></use>
</svg>
</div>
</div>
<div class="product__nav-forward nav-forward">
<div class="
nav-arrow
">
<svg class="icon icon-arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#arrow-right"></use>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div{{#if id}} id="{{id}}" {{/if}} class="sidebar-content-table{{#if forBlog}} forBlog{{/if}}{{#if forBlogScroll}} forBlogScroll{{/if}}">
<div class="row{{#if isReversed}} reversed{{/if}}">
<div class="col-xs-12 col-ms-12 col-sm-4 col-lg-4">
<div class="wrap-aggregator{{#if isScroll}} scroll{{/if}}{{#if isCollapsed}} collapsed{{/if}}">
{{> @tile-aggregator aggregator }}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-8 col-lg-8">
<div class="wrap">
{{ render "@faq" }}
{{ render "@product" }}
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true
},
"splitter-inside": {
"oneColumn": true,
"bgColorWhite": true
},
"aggregator": {
"isContentTable": true,
"title": {
"text": "Sobre UCI"
},
"title-icon": {
"name": "icon-plus-circle"
},
"link": [
{
"active": true,
"isSimple": true,
"isContinue": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"href": "#",
"text": "¿Qué necesito para solicitar una hipoteca?",
"sublink": [
{
"active": true,
"isSimple": true,
"isContinue": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
}
]
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "¿Tengo que tener dinero ahorrado?",
"sublink": [
{
"isSimple": true,
"isContinue": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
}
]
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "¿Qué necesito para solicitar una hipoteca?",
"sublink": [
{
"isSimple": true,
"isContinue": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
},
{
"isSimple": true,
"icon-after": {
"name": "chebron-left",
"isAfter": true
},
"isContinue": true,
"href": "#",
"text": "Soy un sub link"
}
]
}
]
},
"isScroll": true,
"isCollapsed": true
}
.sidebar-content-table {
position: relative;
@media (--viewport-sm-min) {
.row.reversed {
flex-direction: row-reverse;
}
}
.wrap-aggregator {
z-index: 12;
body.active & {
z-index: auto;
/* cuando el menu esta desplegado */
}
@media (--viewport-sm-min) {
position: sticky;
top: 0;
/*margin-right: 30px;*/
}
@media (--viewport-ms-max) {
margin-bottom: 40px;
}
.tile-aggregator {
.tile-aggregator__title .icon {
display: none;
}
.tile-aggregator__link {
.link_has-icon .icon {
display: none;
}
}
}
&.scroll {
@media (--viewport-ms-max) {
position: fixed;
bottom: 0;
width: 100%;
margin: 0 0 0 -30px;
.tile-aggregator {
padding: 30px 30px 40px 30px;
background-color: var(--color-background);
box-shadow: 0px -10px 5px 0px #0000000d;
&__title {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
&::after {
background-color: var(--color-border);
}
.icon {
width: 24px;
height: 24px;
display: block;
}
}
.tile-aggregator__link {
.link_has-icon .icon {
display: block;
fill: var(--color-icon-link-primary-disabled);
}
&.active {
.link_has-icon .icon {
fill: var(--color-icon-accent);
}
}
}
}
}
@media (--viewport-xs-max) {
margin: 0 0 0 -20px;
}
&.collapsed {
@media (--viewport-ms-max) {
.tile-aggregator {
padding: 30px;
&__title {
padding: 0;
margin: 0;
&::after {
height: 0;
}
}
&__body {
display: none;
}
}
}
}
}
}
.wrap {
.splitter {
.container {
margin: 0;
padding: 0;
.splitter__wrapper {
margin: 0;
padding: 0;
background: none;
}
}
}
}
&.forBlog {
.tile-aggregator.contentTable {
max-height: calc(100vh - 123px);
@media (--viewport-sm-max) {
max-height: calc(100vh - 115px);
}
@media (--viewport-ms-max) {
max-height: calc(100vh - 83px);
}
}
}
&.forBlogScroll {
.wrap-aggregator {
top: 118px;
@media (--viewport-md-max) {
top: 122px;
}
@media (--viewport-sm-max) {
top: 115px;
}
@media (--viewport-ms-max) {
top: unset;
}
}
}
}
No notes defined.