<div class="tile-interest-rate">
<div class="tile-interest-rate__head">
<div class="tile-interest-rate__pic">
<img class="tile-interest-rate__img" src="/dist/images/tipofijo.svg" alt="[object Object]">
</div>
<div class="tile-interest-rate__pretitle">
<div class="
text-label-s
"><span>Antetítulo opcional</span></div>
</div>
<div class="tile-interest-rate__title">
<h2 class="
title-l
">
Tipo Fijo
</h2>
</div>
<div class="tile-interest-rate__quote">
<div class="
bodycopy-m
">
“Siempre tranquilo”
</div>
</div>
<div class="tile-interest-rate__description">
<div class="
bodycopy-m
">
Tu hipoteca desde 10 a 30 años a tipo de interés fijo
</div>
</div>
</div>
<div class="tile-interest-rate__main">
<ul class="tile-interest-rate__items">
<li class="tile-interest-rate__item">
<div class="tile-interest-rate__item-title">
<h2 class="
title-l
">
Mixto 10
<span class="title-l__extented">T1</span>
</h2>
</div>
<ul class="tile-interest-rate__numbers
">
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
Plazo
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">30 años</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
TIN
</div>
<div class="
bodycopy-s
bodycopy--color-dark
">
*
</div>
<div class="
bodycopy-s
">
+
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">1,23%</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
bodycopy--color-dark
bodycopy--strong
">
TAE
</div>
<div class="tile-interest-rate__number-var">
<div class="
bodycopy-s
">
variable
</div>
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
bodycopy--strong
">1,99%</div>
</div>
</div>
</li>
</ul>
</li>
<li class="tile-interest-rate__item">
<div class="tile-interest-rate__item-title">
<h2 class="
title-l
">
Mixto 15
<span class="title-l__extented">T2</span>
</h2>
</div>
<ul class="tile-interest-rate__numbers
">
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
Plazo
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">30 años</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
TIN
</div>
<div class="
bodycopy-s
bodycopy--color-dark
">
*
</div>
<div class="
bodycopy-s
">
+
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">1,23%</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
bodycopy--color-dark
bodycopy--strong
">
TAE
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
bodycopy--strong
">1,92%</div>
</div>
</div>
</li>
</ul>
</li>
<li class="tile-interest-rate__item">
<div class="tile-interest-rate__item-title">
<h2 class="
title-l
">
Mixto 30
<span class="title-l__extented">T3</span>
</h2>
</div>
<ul class="tile-interest-rate__numbers
">
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
Plazo
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">30 años</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
">
TIN
</div>
<div class="
bodycopy-s
bodycopy--color-dark
">
*
</div>
<div class="
bodycopy-s
">
+
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
">1,23%</div>
</div>
</div>
</li>
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
<div class="
bodycopy-s
bodycopy--color-dark
bodycopy--strong
">
TAE
</div>
<!-- Se añade la variante fractal para la visualización en Fractal. NO INTEGRAR -->
<div class="tooltip ">
<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">
<p class="
title-s
">Título Tooltip</p>
<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>
<div class="tile-interest-rate__number-value">
<div id="" class="
bodycopy-l
bodycopy--strong
">1,92%</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="tile-interest-rate__footer">
<div class="tile-interest-rate__lightbox">
<div class="lightbox " value="isDefault">
<div class="lightbox__trigger">
<button class="link
link_simple
link_has-icon link_has-icon_after
" type="button">
<span>Ver más condiciones</span>
<svg class="icon icon-plus icon-after">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#plus"></use>
</svg>
</button>
</div>
<div class="lightbox__overlay" id="">
<div class="lightbox__wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-10">
<div class="lightbox__close-container">
<button class="lightbox__close" type="button" title="Close">
<svg class="icon icon-close ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#close"></use>
</svg>
</button>
</div>
<div class="lightbox__window">
<div class="row">
<div class="col-xs-12 col-ms-10 col-ms-mr-ml col-sm-10 col-lg-9_5">
<div class="lightbox__head">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-6 col-lg-6">
<div class="lightbox__title">
<h2 class="
title-l
">
Ver más condiciones
</h2>
</div>
</div>
</div>
</div>
<div class="lightbox__content">
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
RTE placeholder RTE placeholder RTE placeholder<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tile-interest-rate__btn">
<a class="btn
" href="#" id="">
Simula tu hipoteca tipo fijo
</a>
</div>
</div>
</div>
<div class="tile-interest-rate{{#if without-bg}} without-bg{{/if}}">
<div class="tile-interest-rate__head">
<div class="tile-interest-rate__pic">
<img class="tile-interest-rate__img" src="{{ imageUrl }}" alt="{{ title }}">
</div>
<div class="tile-interest-rate__pretitle">
{{> @text-label-s pretitle }}
</div>
<div class="tile-interest-rate__title">
{{> @title-l title }}
</div>
<div class="tile-interest-rate__quote">
{{> @bodycopy-m quote }}
</div>
<div class="tile-interest-rate__description{{#if with-items}} with-items{{/if}}">
{{> @bodycopy-m description }}
</div>
</div>
<div class="tile-interest-rate__main{{#if with-items}} with-items{{/if}}">
<ul class="tile-interest-rate__items">
{{#each interest-rate}}
<li class="tile-interest-rate__item">
<div class="tile-interest-rate__item-title">
{{#extend '@title-l' this.interest-rate-title }}
{{#content 'title-extend'}}
<span class="tile-interest-rate__item-title-subindex">{{ this.interest-rate-subindex.text }}</span>
{{/content}}
{{/extend}}
{{#if this.interest-rate-subindex}}
{{/if}}
{{#if this.hasTooltip}}
<button class="tile-interest-rate__tooltip-trigger" type="button">
{{#if isHipotecas}}
{{ render '@icon--info-hipotecas' }}
{{else}}
{{ render '@icon--info-purple' }}
{{/if}}
</button>
{{/if}}
</div>
<ul class="tile-interest-rate__numbers
{{#if this.threeItems}}
tile-interest-rate__numbers_three-items
{{/if}}"
>
{{#each number}}
<li class="tile-interest-rate__numbers-item">
<div class="tile-interest-rate__number">
<div class="tile-interest-rate__number-title">
{{> @bodycopy-s this.number-title }}
{{#if number-ref}}
{{> @bodycopy-s this.number-ref }}
{{/if}}
{{#if number-var}}
<div class="tile-interest-rate__number-var">
{{> @bodycopy-s this.number-var }}
</div>
{{/if}}
{{#if number-plus}}
{{> @bodycopy-s this.number-plus }}
{{/if}}
{{#if this.hasTooltip}}
<button class="tile-interest-rate__tooltip-trigger" type="button">
{{#if isHipotecas}}
{{ render '@icon--info-hipotecas' }}
{{else}}
{{ render '@icon--info-purple' }}
{{/if}}
</button>
{{/if}}
{{#if isHipotecas}}
{{ render '@tooltip--hipotecas' }}
{{else}}
{{ render '@tooltip' }}
{{/if}}
</div>
<div class="tile-interest-rate__number-value">
{{> @bodycopy-l this.number-value }}
</div>
</div>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</div>
<div class="tile-interest-rate__footer">
{{#if lightbox}}
<div class="tile-interest-rate__lightbox">
{{> @lightbox lightbox }}
</div>
{{/if}}
{{#if btn}}
<div class="tile-interest-rate__btn">
{{> @btn btn }}
</div>
{{/if}}
</div>
</div>
{
"imageUrl": "/dist/images/tipofijo.svg",
"pretitle": {
"text": "Antetítulo opcional"
},
"title": {
"text": "Tipo Fijo"
},
"quote": {
"text": "“Siempre tranquilo”"
},
"description": {
"text": "Tu hipoteca desde 10 a 30 años a tipo de interés fijo"
},
"interest-rate": [
{
"interest-rate-title": {
"text": "Mixto 10",
"extented": "T1"
},
"hasTooltip": false,
"number": [
{
"number-title": {
"colorDark": false,
"text": "Plazo"
},
"number-value": {
"text": "30 años"
}
},
{
"number-title": {
"colorDark": false,
"text": "TIN"
},
"number-ref": {
"colorDark": true,
"text": "*"
},
"number-plus": {
"text": "+"
},
"number-value": {
"text": "1,23%"
}
},
{
"number-var": {
"colorDark": false,
"text": "variable"
},
"number-title": {
"colorDark": true,
"strong": true,
"text": "TAE"
},
"number-value": {
"strong": true,
"text": "1,99%"
}
}
]
},
{
"interest-rate-title": {
"text": "Mixto 15",
"extented": "T2"
},
"interest-rate-subindex": {
"text": "T2"
},
"number": [
{
"number-title": {
"text": "Plazo"
},
"number-value": {
"text": "30 años"
}
},
{
"number-title": {
"colorDark": false,
"text": "TIN"
},
"number-ref": {
"colorDark": true,
"text": "*"
},
"number-plus": {
"text": "+"
},
"number-value": {
"text": "1,23%"
}
},
{
"number-title": {
"colorDark": true,
"strong": true,
"text": "TAE"
},
"number-value": {
"strong": true,
"text": "1,92%"
}
}
]
},
{
"interest-rate-title": {
"text": "Mixto 30",
"extented": "T3"
},
"interest-rate-subindex": {
"text": "T3"
},
"number": [
{
"number-title": {
"text": "Plazo"
},
"number-value": {
"text": "30 años"
}
},
{
"hasTooltip": false,
"number-title": {
"colorDark": false,
"text": "TIN"
},
"number-ref": {
"colorDark": true,
"text": "*"
},
"number-plus": {
"text": "+"
},
"number-value": {
"text": "1,23%"
}
},
{
"hasTooltip": false,
"number-title": {
"colorDark": true,
"strong": true,
"text": "TAE"
},
"number-value": {
"strong": true,
"text": "1,92%"
}
}
]
}
],
"lightbox": {
"trigger": {
"icon-after": {
"name": "plus",
"isAfter": true
},
"btnType": "button",
"text": "Ver más condiciones"
},
"title": {
"text": "Ver más condiciones"
},
"rte": true
},
"btn": {
"href": "#",
"text": "Simula tu hipoteca tipo fijo"
}
}
.tile-interest-rate {
flex-grow: 1;
height: 100%;
padding: 40px 20px;
background-color: var(--color-accent-light);
&.without-bg{
background-color: transparent;
}
@media (--viewport-ms-min) {
padding: 40px 60px;
}
@media (--viewport-sm-min) {
padding: 40px;
}
&__head {
margin-bottom: 10px;
text-align: center;
}
&__pretitle{
margin-top: 20px;
margin-bottom: 10px;
}
&__pic {
display: flex;
align-items: center;
max-width: 150px;
min-height: 40px;
margin: 0 auto 10px;
}
&__img {
display: block;
max-width: 100%;
height: auto;
}
&__quote {
margin-top: 10px;
}
&__description {
margin-top: 10px;
margin-bottom: 30px; /*provisional hasta que se vuelvan a incluir las tarifas*/
&.with-items{
margin-bottom: 0;
}
}
&__item {
display: none; /*provisional hasta que se vuelvan a incluir las tarifas*/
padding: 20px 0;
border-bottom: 1px solid var(--color-accent-dark);
&:last-child {
border: none;
}
&-title {
display: flex;
margin-bottom: 10px;
&-subindex {
margin-left: 5px;
margin-top: -5px;
font-size: 14px;
position: absolute;
}
}
}
&__main.with-items{
ul.tile-interest-rate__items{
li.tile-interest-rate__item{display:block;}
}
}
&__numbers {
display: flex;
margin-bottom: 20px;
&_three-items {
.tile-interest-rate {
&__numbers {
&-item {
@media (--viewport-sm-min) {
margin-right: 40px;
}
}
}
&__number {
&_plus {
.tile-interest-rate {
&__number {
&-value {
&::before {
@media (--viewport-sm-min) {
left: -10px;
}
}
}
}
}
}
}
}
}
&-item {
margin-right: 40px;
@media (--viewport-sm-only) {
margin-right: 18px;
}
@media (--viewport-lg-min) {
margin-right: 60px;
}
&:last-child {
margin-right: 0;
}
}
}
&__lightbox{
&-button {
color: var(--color-accent);
}
}
&__summary {
color: var(--color-accent);
}
&__number {
&_plus {
.tile-interest-rate {
&__number {
&-value {
position: relative;
&::before {
position: absolute;
top: 0;
left: -10px;
content: '+';
}
}
}
}
}
&-title {
display: flex;
margin-bottom: 2px;
position: relative;
&-tae {
color: var(--color-accent-dark);
}
.tooltip{position:relative;top: 0;left: 5px;}
}
&-var {
margin-left: 5px;
}
}
&__tooltip-trigger {
margin-left: 8px;
}
&__footer {
margin-top: 10px;
}
&__btn {
margin-top: 0px;
text-align: center;
}
}
No notes defined.