<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="rates-comparison">
<ul class="rates-comparison__list">
<li class="rates-comparison__item">
<div class="card-result-payment-single comparison">
<div class="card-result-payment-single__inner">
<!---->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
<span class="wrap-img"><img src="/dist/images/tipomixto.svg" alt=""></span>
<span class="title-l
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment-single__form-radio-group">
<span class="bodycopy-m">A tipo de interés fijo... Los restantes a tipo variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="form-radio-group " id="anhos">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos5" type="radio" title="anhos5" name="anhos" value="5 años">
<label class="radio-label " for="anhos5" id="" value="">
<span class="caption-placeholder-m">5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos10" type="radio" title="anhos10" name="anhos" value="10 años" checked>
<label class="radio-label " for="anhos10" id="" value="">
<span class="caption-placeholder-m">10 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos15" type="radio" title="anhos15" name="anhos" value="15 años">
<label class="radio-label " for="anhos15" id="" value="">
<span class="caption-placeholder-m">15 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="item">
<div class="pretitle-payment"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment-single__item-number">
<li><span class="title-l
title_color_dark
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li><span class="bodycopy-l">€/mês</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
<ul class="breakdown">
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAN primer período
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAEG
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Empréstito
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Prazo
</div>
</div>
<span class="title-m
title_color_dark
">XX anos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Pedir empréstimo
</a>
<a class="btn
btn_secondary
" href="#" id="">
Ver simulaçao completa e FINE
</a>
</div>
<div class="wrap-fine">
<ul class="card-result-payment-single__additional">
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">Euribor 6 meses</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Valor do Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Spread</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro vida mensal</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-m">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro imóvel semestral</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Comissoes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Despesas e Impostos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrap-dedicated-link">
<div class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>FINE Simulaçao</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
<div class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Resumo FINE Simulaçao</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="rates-comparison__item">
<div class="card-result-payment-single comparison">
<div class="card-result-payment-single__inner">
<!---->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
<span class="wrap-img"><img src="/dist/images/tipomixto.svg" alt=""></span>
<span class="title-l
">Hipoteca Mixta</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment-single__form-radio-group">
<span class="bodycopy-m">A tipo de interés fijo... Los restantes a tipo variable</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="form-radio-group " id="anhos">
<div class="field-top form-list__tooltip-label_default">
<label class="label-m" for=""></label>
<div class="field-top__wrap">
</div>
</div>
<div class="radio-group" id="">
<ul>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos5" type="radio" title="anhos5" name="anhos" value="5 años">
<label class="radio-label " for="anhos5" id="" value="">
<span class="caption-placeholder-m">5 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos10" type="radio" title="anhos10" name="anhos" value="10 años" checked>
<label class="radio-label " for="anhos10" id="" value="">
<span class="caption-placeholder-m">10 años</span>
</label>
</div>
</li>
<li class="radio-group__item">
<div class="radio">
<input class="radio-input" id="anhos15" type="radio" title="anhos15" name="anhos" value="15 años">
<label class="radio-label " for="anhos15" id="" value="">
<span class="caption-placeholder-m">15 años</span>
</label>
</div>
</li>
</ul>
</div>
<div class="field-bottom">
</div>
</div>
</div>
<div class="item">
<div class="pretitle-payment"><span class="bodycopy-m">Los 10 primeros años</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<ul class="card-result-payment-single__item-number">
<li><span class="title-l
title_color_dark
">734,35</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
<li><span class="bodycopy-l">€/mês</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
<ul class="breakdown">
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAN primer período
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
TAEG
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div id="tooltip-tin" class="tooltip flex">
<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
">Título Tooltip</h4>
<div class="
bodycopy-s
">
Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip.
</div> <a class="link
" href="#">
<span>Enlace</span>
</a>
</div>
</div>
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Empréstito
</div>
</div>
<span class="title-m
title_color_dark
">X,XXX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<div class="breakdown-text">
<div class="
bodycopy-m
">
Prazo
</div>
</div>
<span class="title-m
title_color_dark
">XX anos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
<div class="wrap-btn">
<a class="btn
" href="#" id="">
Pedir empréstimo
</a>
<a class="btn
btn_secondary
" href="#" id="">
Ver simulaçao completa e FINE
</a>
</div>
<div class="wrap-fine">
<ul class="card-result-payment-single__additional">
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">Euribor 6 meses</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Valor do Indexante</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Spread</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">X,XXX %</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro vida mensal</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Seguro imóvel semestral</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Comissoes</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-m">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
<li>
<ul>
<li>
<div class="card-result-payment-single__additional-item"><span class="bodycopy-s">Despesas e Impostos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></div>
</li>
<li><span class="bodycopy-s">XXX,XX €</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="wrap-dedicated-link">
<div class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>FINE Simulaçao</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
<div class="dedicated-link">
<a class="link
link_has-icon link_has-icon_after
" href="#">
<span>Resumo FINE Simulaçao</span>
<svg class="icon icon-download icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#download"></use>
</svg>
</a>
</div>
</div>
</div>
</li>
<li class="rates-comparison__item">
<div class="card-result-payment-single comparison product-unavailable">
<div class="card-result-payment-single__inner">
<!---->
<div class="card-result-payment-single__head">
<div class="card-result-payment-single__title">
<span class="wrap-img"><img src="/dist/images/tipomixto.svg" alt=""></span>
<span class="title-l
">Tipo mixto</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
<div class="card-result-payment-single__error-comparison">
<svg class="icon icon-56_alert ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#56_alert"></use>
</svg>
<span class="bodycopy-m">O nosso simulador não faz os cálculos</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div class="rates-comparison">
<ul class="rates-comparison__list">
{{#each rates}}
<li class="rates-comparison__item">
{{> @card-result-payment-single this.rate }}
</li>
{{/each}}
</ul>
</div>
{{/content}}
{{/extend}}
{
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": false,
"paddingBottomLarge": false
},
"rates": [
{
"rate": {
"isComparison": true,
"img-title": "/dist/images/tipomixto.svg",
"form-radio-group": {
"field-top": false,
"id": "anhos",
"radio-group": {
"radio-group": [
{
"id": "anhos5",
"title": "anhos5",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "5 años"
}
},
{
"id": "anhos10",
"title": "anhos10",
"name": "anhos",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-m",
"text": "10 años"
}
},
{
"id": "anhos15",
"title": "anhos15",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "15 años"
}
}
]
},
"field-bottom": false
},
"download-comparison": {
"link": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
},
"download-comparison2": {
"link": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
},
"title-radio-group": {
"text": "A tipo de interés fijo... Los restantes a tipo variable",
"type": "-m"
},
"title": {
"text": "Hipoteca Mixta",
"type": "-l"
},
"subtitle": null,
"title-item": {
"id": "resultado-cuota-title",
"type": "-m",
"text": "Los 10 primeros años"
},
"number-item": {
"id": "resultado-cuota-cifra",
"isP": true,
"text": "734,35",
"type": "-l",
"colorDark": true
},
"number-item-symbol": {
"id": "resultado-cuota-symbol",
"text": "€/mês",
"type": "-l"
},
"breakdown": [
{
"breakdown-text": {
"text": "TAN primer período"
},
"breakdown-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "TAEG"
},
"breakdown-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Empréstito"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX €",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Prazo"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "XX anos",
"type": "-m",
"colorDark": true
}
}
],
"additional-item": [
{
"additional-item-text": {
"text": "Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "indexante",
"type": "-s",
"text": "Euribor 6 meses"
}
},
{
"additional-item-text": {
"text": "Valor do Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "valor-indexante",
"type": "-s",
"text": "X,XXX %"
}
},
{
"additional-item-text": {
"text": "Spread",
"type": "-s"
},
"additional-item-number": {
"id": "spread",
"type": "-s",
"text": "X,XXX %"
}
},
{
"additional-item-text": {
"text": "Seguro vida mensal",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-vida-mensal",
"type": "-m",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Seguro imóvel semestral",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-imovel-semestral",
"type": "-s",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Comissoes",
"type": "-s"
},
"additional-item-number": {
"id": "comissoes",
"type": "-s",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Despesas e Impostos",
"type": "-s"
},
"additional-item-number": {
"id": "despesas-impostos",
"type": "-s",
"text": "XXX,XX €"
}
}
],
"btn": {
"text": "Pedir empréstimo",
"href": "#"
},
"btn-secondary": {
"text": "Ver simulaçao completa e FINE",
"href": "#",
"isSecondary": true
},
"download": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"download2": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"alert": false,
"alert2": false,
"alert3": false,
"link-comparison": false,
"legal-text": false
}
},
{
"rate": {
"isComparison": true,
"img-title": "/dist/images/tipomixto.svg",
"form-radio-group": {
"field-top": false,
"id": "anhos",
"radio-group": {
"radio-group": [
{
"id": "anhos5",
"title": "anhos5",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "5 años"
}
},
{
"id": "anhos10",
"title": "anhos10",
"name": "anhos",
"additionalAttributes": "checked",
"label": {
"type": "-placeholder-m",
"text": "10 años"
}
},
{
"id": "anhos15",
"title": "anhos15",
"name": "anhos",
"label": {
"type": "-placeholder-m",
"text": "15 años"
}
}
]
},
"field-bottom": false
},
"download-comparison": {
"link": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
},
"download-comparison2": {
"link": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
}
},
"title-radio-group": {
"text": "A tipo de interés fijo... Los restantes a tipo variable",
"type": "-m"
},
"title": {
"text": "Hipoteca Mixta",
"type": "-l"
},
"subtitle": null,
"title-item": {
"id": "resultado-cuota-title",
"type": "-m",
"text": "Los 10 primeros años"
},
"number-item": {
"id": "resultado-cuota-cifra",
"isP": true,
"text": "734,35",
"type": "-l",
"colorDark": true
},
"number-item-symbol": {
"id": "resultado-cuota-symbol",
"text": "€/mês",
"type": "-l"
},
"breakdown": [
{
"breakdown-text": {
"text": "TAN primer período"
},
"breakdown-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "TAEG"
},
"breakdown-tooltip": {
"id": "tooltip-tin",
"isFlex": true,
"title": {
"text": "Título Tooltip"
},
"bodycopy": {
"text": "Este es el texto que muestra el tooltip. Este es el texto que muestra el tooltip."
},
"link": {
"href": "#",
"text": "Enlace"
}
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX %",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Empréstito"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "X,XXX €",
"type": "-m",
"colorDark": true
}
},
{
"breakdown-text": {
"text": "Prazo"
},
"breakdown-number": {
"id": "tin-cifra",
"text": "XX anos",
"type": "-m",
"colorDark": true
}
}
],
"additional-item": [
{
"additional-item-text": {
"text": "Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "indexante",
"type": "-s",
"text": "Euribor 6 meses"
}
},
{
"additional-item-text": {
"text": "Valor do Indexante",
"type": "-s"
},
"additional-item-number": {
"id": "valor-indexante",
"type": "-s",
"text": "X,XXX %"
}
},
{
"additional-item-text": {
"text": "Spread",
"type": "-s"
},
"additional-item-number": {
"id": "spread",
"type": "-s",
"text": "X,XXX %"
}
},
{
"additional-item-text": {
"text": "Seguro vida mensal",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-vida-mensal",
"type": "-s",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Seguro imóvel semestral",
"type": "-s"
},
"additional-item-number": {
"id": "seguro-imovel-semestral",
"type": "-s",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Comissoes",
"type": "-s"
},
"additional-item-number": {
"id": "comissoes",
"type": "-m",
"text": "XXX,XX €"
}
},
{
"additional-item-text": {
"text": "Despesas e Impostos",
"type": "-s"
},
"additional-item-number": {
"id": "despesas-impostos",
"type": "-s",
"text": "XXX,XX €"
}
}
],
"btn": {
"text": "Pedir empréstimo",
"href": "#"
},
"btn-secondary": {
"text": "Ver simulaçao completa e FINE",
"href": "#",
"isSecondary": true
},
"download": {
"text": "FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"download2": {
"text": "Resumo FINE Simulaçao",
"href": "#",
"icon-after": {
"name": "download",
"isAfter": true
}
},
"alert": false,
"alert2": false,
"alert3": false,
"link-comparison": false,
"legal-text": false
}
},
{
"rate": {
"unavailable": true,
"isErrorComparison": true,
"isComparison": true,
"img-title": "/dist/images/tipomixto.svg",
"title": {
"text": "Tipo mixto",
"type": "-l"
},
"subtitle": {
"text": "O nosso simulador não faz os cálculos",
"type": "-m"
},
"alert": false,
"alert2": false,
"alert3": false,
"legal-text": false,
"link-comparison": false
}
}
]
}
.rates-comparison {
&__list {
display: flex;
gap: 32px;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
&__item {
width: calc(33.3% - 21.33px);
@media (--viewport-ms-max) {
width: 100%;
}
}
/* Para ajustar alturas de línea de la card dentro del componente */
.card-result-payment-single {
.item {
.card-result-payment-single__item-number li .bodycopy-l{
top: -4px;
@media (--viewport-sm-max) {
top: -3px;
}
@media (--viewport-xs-max) {
top: -2px;
}
}
ul.breakdown {
li {
.breakdown-text {
.bodycopy-m {
margin-top: 5px;
text-align: left;
}
.tooltip{
top:11px;
}
@media (--viewport-sm-max) {
.bodycopy-m {
margin-top: 3px;
}
.tooltip{
top:9px;
}
}
@media (--viewport-xs-max) {
.bodycopy-m {
margin-top: 0;
}
.tooltip{
top:6px;
}
}
}
.title-m{
white-space: nowrap;
}
}
}
}
}
/* FIN Para ajustar alturas de línea de la card dentro del componente */
}
No notes defined.