<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>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}"{{/if}} class="faq{{#if boxes-version}} boxes-version{{/if}}{{#if accent-version}} accent-version{{/if}}{{#if accent-light-bg}} accent-light-bg{{/if}}">
<div class="row">
{{#if box-title}}
<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">
{{#if faq-icon}}
{{render '@icon' icon}}
{{/if}}
</div>
<div class="faq__title">
{{> @title-l title }}
</div>
<div class="faq__accordion">
{{> @accordion accordion }}
</div>
{{#if link}}
<div class="faq__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{#if box-media}}
<div class="faq__box faq__box__media lazyloaded">
<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">
<img src="https://hipotecas.com/-/media/Images/Hipotecascom/Seguros/Seguros_ProteccionPagos.jpg" alt="banner agapimu" class="">
<div class="faq__box__media--content">
<div class="faq__box-title">
{{> @title-l box-title }}
</div>
{{#if box-bodycopy}}
<div class="faq__box-bodycopy rich-text">
{{> @bodycopy-m box-bodycopy }}
</div>
{{/if}}
{{#if box-link}}
<div class="faq__box-link">
{{> @link box-link }}
</div>
{{/if}}
{{#if btn}}
<div class="faq__box-btn">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
</div>
{{else}}
<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">
{{> @title-l box-title }}
</div>
{{#if box-bodycopy}}
<div class="faq__box-bodycopy rich-text">
{{> @bodycopy-m box-bodycopy }}
</div>
{{/if}}
{{#if box-link}}
<div class="faq__box-link">
{{> @link box-link }}
</div>
{{/if}}
{{#if btn}}
<div class="faq__box-btn">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
</div>
</div>
{{/if}}
{{#unless btn}}
{{ render '@line' }}
{{/unless}}
</div>
{{else}}
<div class="col-xs-12 col-ms-10 col-ms-offset-1 col-ms-offset-right-1 col-sm-10 col-lg-10 col">
<div class="faq__content">
<div class="faq__title">
<div class="row">
{{#if title-fullwidth}}
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12 col">
{{else}}
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6 col">
{{/if}}
{{> @title-l title }}
</div>
</div>
</div>
<div class="faq__accordion">
{{> @accordion accordion }}
</div>
{{#if link}}
<div class="faq__link">
{{> @link link }}
</div>
{{/if}}
</div>
</div>
{{/if}}
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Palabras complicadas de explicación sencilla"
},
"accordion": {
"item": [
{
"isActive": true,
"trigger": {
"text": "TIN",
"type": "-l"
},
"description": {
"text": "<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>"
}
},
{
"trigger": {
"text": "TAE",
"type": "-l"
},
"description": {
"text": "<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>"
}
},
{
"trigger": {
"text": "EURIBOR",
"type": "-l"
},
"description": {
"text": "<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>"
}
},
{
"trigger": {
"text": "Tasa de compensación",
"type": "-l"
},
"description": {
"text": "<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>"
}
}
]
},
"box-title": {
"text": "¿Te sigues quedando dudas?",
"colorLight": true
},
"box-bodycopy": {
"text": "<p>Agrupa todos los préstamos e hipotecas que tengas contraídos en un solo préstamo.</p>",
"colorLight": true
},
"box-link": {
"href": "#",
"text": "Iniciar simulador",
"isLight": true
}
}
.faq {
&__content {
margin-bottom: 60px;
}
&__icon .icon {
width: 40px;
height: 40px;
margin-bottom: calc(var(--gutter-vertical)*4);
}
&__title {
margin-bottom: 30px;
}
&__link {
margin-top: 30px;
}
&__box {
display: flex;
align-items: center;
min-height: 300px;
padding: 60px 0;
text-align: center;
background-color: var(--color-accent);
@media (--viewport-ms-min) {
min-height: 293px;
}
@media (--viewport-sm-min) {
min-height: 537px;
padding: 60px;
}
&-bodycopy {
margin-top: 20px;
}
&-link,
&-btn {
margin-top: 30px;
}
.row {
flex-grow: 1;
}
&__media {
position: relative;
overflow: hidden;
img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.faq__box-wrapper {
height: 100%;
width: 100%;
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: 2;
content: "";
opacity: .2;
background: #000;
}
}
&--content {
display: flex;
max-width: 100%;
width: 100%;
height: 100%;
justify-content: center;
align-content: center;
flex-flow: column;
z-index: 2;
position: relative;
.faq__box-bodycopy {
margin-top: 20px;
}
.faq__box-link,
.faq__box-btn {
margin-top: 30px;
}
}
}
}
&.accent-version {
.faq__title {
text-align: center;
.title-l {
color: var(--color-secondary);
}
}
.accordion__item {
border-bottom-color: var(--color-accent-dark);
.bodycopy-l {
font-weight: bold;
}
.accordion__trigger .icon {
width: 19px;
height: 19px;
}
}
.faq__link {
text-align: center;
margin-top: 40px;
}
}
&.boxes-version {
.faq__title {
text-align: center;
.title-l {
color: var(--color-secondary);
}
}
.accordion__item {
border: solid 1px var(--color-accent-dark);
padding: 0 30px;
margin-bottom: 20px;
.accordion__trigger .icon{
width: 19px;
height: 19px;
}
.bodycopy-l {
font-weight: bold;
}
}
.faq__link {
text-align: center;
margin-top: 40px;
}
}
&.accent-light-bg {
background-color: var(--color-accent-light);
@media (--viewport-xs-max) {
margin: 0 -20px;
padding: 0 20px;
}
.faq__title {
margin-top: 50px;
}
&.boxes-version {
.accordion__item {
border: solid 1px var(--color-accent-dark);
}
}
}
}
Variantes: Default, Fullwidth, With a link, With a button, With an icon, With a image, Accent version, Boxes version