<div class="tile-simple-interest-rate">
<div class="tile-simple-interest-rate__head">
<div class="tile-simple-interest-rate__pic">
<img class="tile-simple-interest-rate__img" src="/dist/images/variable.svg" alt="[object Object]">
</div>
<div class="tile-simple-interest-rate__title">
<h1 class="
title-xl
">Taxa Variável</h1>
</div>
</div>
<ul class="tile-simple-interest-rate__main">
<li class="tile-simple-interest-rate__item">
<div class="tile-simple-interest-rate__item-title">
<span>
<svg class="icon icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check">
</use>
</svg>
</span>
<span>
<div class="
bodycopy-m
">
Indexada à Euribor a 6 meses.
</div>
</span>
</div>
</li>
<li class="tile-simple-interest-rate__item">
<div class="tile-simple-interest-rate__item-title">
<span>
<svg class="icon icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check">
</use>
</svg>
</span>
<span>
<div class="
bodycopy-m
">
A Taxa Variável é uma solução mais tradicional de Crédito Habitação, com prestação e com taxa de juro variável e indexada à Euribor a 6 meses.
</div>
</span>
</div>
</li>
<li class="tile-simple-interest-rate__item">
<div class="tile-simple-interest-rate__item-title">
<span>
<svg class="icon icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check">
</use>
</svg>
</span>
<span>
<div class="
bodycopy-m
">
Prazo mínimo de empréstimo de 7 anos e máximo de 35 anos.
</div>
</span>
</div>
</li>
</ul>
<div class="tile-simple-interest-rate__footer">
<a class="link
" href="#">
<span>Ver mais</span>
</a>
</div>
</div>
<div class="tile-simple-interest-rate">
<div class="tile-simple-interest-rate__head">
<div class="tile-simple-interest-rate__pic">
<img class="tile-simple-interest-rate__img" src="{{ imageUrl }}" alt="{{ title }}">
</div>
<div class="tile-simple-interest-rate__title">
{{> @title-xl this.title}}
</div>
</div>
<ul class="tile-simple-interest-rate__main">
{{#each interest-rate}}
<li class="tile-simple-interest-rate__item">
<div class="tile-simple-interest-rate__item-title">
<span>
<svg class="icon icon-check ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#check">
</use>
</svg>
</span>
<span>
{{> @bodycopy-m this.interest-rate-title}}
</span>
</div>
</li>
{{/each}}
</ul>
<div class="tile-simple-interest-rate__footer">
{{#if link}}
{{> @link link }}
{{/if}}
</div>
</div>
{
"imageUrl": "/dist/images/variable.svg",
"title": {
"text": "Taxa Variável"
},
"interest-rate": [
{
"interest-rate-title": {
"text": "Indexada à Euribor a 6 meses."
}
},
{
"interest-rate-title": {
"text": "A Taxa Variável é uma solução mais tradicional de Crédito Habitação, com prestação e com taxa de juro variável e indexada à Euribor a 6 meses."
}
},
{
"interest-rate-title": {
"text": "Prazo mínimo de empréstimo de 7 anos e máximo de 35 anos."
}
}
],
"link": {
"href": "#",
"text": "Ver mais"
}
}
.tile-simple-interest-rate {
display:flex;
flex-flow:column;
justify-content:space-between;
flex-grow: 1;
height: 100%;
padding: 40px 20px 20px;
background-color: var(--color-accent-light);
border-top: 4px solid var(--color-accent);
opacity: 1;
&__head {
display: flex;
flex-direction: column;
margin-bottom: 25px;
text-align: center;
.title-xl {
color: #191919;
}
}
&__img {
display: block;
width: 150px;
height: auto;
}
&__pic {
display: flex;
justify-content: center;
width: 150px;
margin: 0 auto 35px;
}
&__main {
display: flex;
flex-flow: column;
margin-bottom: 20px;
}
&__item {
padding-bottom:15px;
&:last-child {
border: none;
}
&-title {
display: flex;
opacity: 0.9;
.bodycopy-m {
line-height: 20px;
}
.icon {
fill: rgb(0, 99, 91);
width: 20px;
height: 20px;
margin-right: 10px;
opacity: 1;
font-weight: 800;
}
}
}
&__footer {
text-align: center;
}
}
No notes defined.