<div class="content-with-menu-tab vertical-alignment">
<div class="menu-tab__wrapper">
<div class="menu-tab" role="tablist">
<div class="menu-tab-scroller">
<div class="menu-tab-scroller__scroll menu-tab-scroller__scroll-- swiper-container">
<div class="menu-tab-scroller__scroll-content row swiper-wrapper">
<button class="menu-tab-button menu-tab-item active swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-1">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Taxa de juro</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-2">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Montante de empréstimo max length</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-3">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Prazo do empréstimo</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-4">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Juros do crédito habitação</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-5">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Montante de empréstimo</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-6">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Montante de empréstimo</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-7">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Prazo do empréstimo</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-8">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Juros do crédito habitação</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="menu-tab-button menu-tab-item swiper-slide " role="tab" aria-selected="true" tabindex="0" id="tab-9">
<span class="menu-tab__content">
<span class="menu-tab__text-label"> <span class="caption-call-to-action">Montante de empréstimo</span>
</span>
</span>
<span class="menu-tab-indicator menu-tab-indicator">
<span class="menu-tab-indicator__content menu-tab-indicator__content--underline"></span>
</span>
<span class="menu-tab__ripple mdc-ripple-upgraded"></span>
</button>
</div>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-prev">
<svg class="icon icon-16_arrow-left ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-left"></use>
</svg>
</div>
</div>
<div class="swiper-navigation">
<div class="swiper-button-next">
<svg class="icon icon-16_arrow-right ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_arrow-right"></use>
</svg>
</div>
</div>
</div>
<!--content menu-tab-->
</div>
<div class="content-with-menu-tab__content menu-tab-content " id="">
<div class="menu-tab-content__item active" role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as <a href='#'>suas condições </a> podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <b>três tipos principais </b>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
<div class="list">
<ul>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">A taxa de juro <b>variável </b>(taxa de juro revista periodicamente);</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
<li>
<svg class="icon icon-bullet-list ">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#bullet-list"></use>
</svg>
<span class="bodycopy-m">A taxa de juro <b>fixa </b>(taxa de juro fixa em que a prestação é sempre igual);</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</li>
</ul>
</div>
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /><br />O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro<br /><br />Não existe um número de simulações a realizar. Deve fazer as simulações de crédito que achar necessárias até se sentir completamente esclarecido e seguro da sua decisão. Só desta forma poderá comparar diferentes cenários de financiamento e saber quanto pagará por mês em cada uma das opções. O truque é fazer várias simulações, com diferentes montantes de empréstimo, diferentes prazos de financiamento e diferentes opções de taxa de juro. Ao comparar os resultados, poderá fazer os seus cálculos e perceber qual é a solução de crédito habitação que melhor se adapta às suas necessidades.</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
<div class="menu-tab-content__item " role="false">
<span class="bodycopy-m">É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br /> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro</span>
<!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) -->
</div>
</div>
</div>
<div class="content-with-menu-tab {{#if isVertical}}vertical-alignment{{/if}}">
{{> @menu-tab contentWithMenuTab}}
<div class="content-with-menu-tab__content menu-tab-content " id="">
{{#each menuTabContent}}
<div class="menu-tab-content__item {{state}}" role="{{content}}">
{{> @bodycopy bodycopyM}}
{{#if hasListBullets}}
{{> @list--bullets listBullets}}
{{/if}}
</div>
{{/each}}
</div>
</div>
{
"contentWithMenuTab": {
"isNoSplitter": true,
"hasMenuTabContent": false,
"type": "",
"isFixed": true,
"isSwiperVariant": true,
"menuTab": [
{
"idItem": "tab-1",
"isSwiper": true,
"hasIcon": false,
"state": "active",
"labelCta": {
"type": "-call-to-action",
"text": "Taxa de juro"
}
},
{
"idItem": "tab-2",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Montante de empréstimo max length"
}
},
{
"idItem": "tab-3",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Prazo do empréstimo"
}
},
{
"idItem": "tab-4",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Juros do crédito habitação"
}
},
{
"idItem": "tab-5",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Montante de empréstimo"
}
},
{
"idItem": "tab-6",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Montante de empréstimo"
}
},
{
"idItem": "tab-7",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Prazo do empréstimo"
}
},
{
"idItem": "tab-8",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Juros do crédito habitação"
}
},
{
"idItem": "tab-9",
"isSwiper": true,
"hasIcon": false,
"state": "",
"labelCta": {
"type": "-call-to-action",
"text": "Montante de empréstimo"
}
}
]
},
"menuTabContent": [
{
"hasListBullets": true,
"state": "active",
"content": "content1",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as <a href='#'>suas condições </a> podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <b>três tipos principais </b>com base na taxa de juro"
},
"listBullets": {
"listitem": [
{
"name": "bullet-list",
"text": "A taxa de juro <b>variável </b>(taxa de juro revista periodicamente);",
"type": "-m"
},
{
"name": "bullet-list",
"text": "A taxa de juro <b>fixa </b>(taxa de juro fixa em que a prestação é sempre igual);",
"type": "-m"
}
]
}
},
{
"hasListBullets": false,
"state": "",
"content": "content2",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/><br/>O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro<br/><br/>Não existe um número de simulações a realizar. Deve fazer as simulações de crédito que achar necessárias até se sentir completamente esclarecido e seguro da sua decisão. Só desta forma poderá comparar diferentes cenários de financiamento e saber quanto pagará por mês em cada uma das opções. O truque é fazer várias simulações, com diferentes montantes de empréstimo, diferentes prazos de financiamento e diferentes opções de taxa de juro. Ao comparar os resultados, poderá fazer os seus cálculos e perceber qual é a solução de crédito habitação que melhor se adapta às suas necessidades."
}
},
{
"hasListBullets": false,
"state": "",
"content": "content3",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content4",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content5",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content6",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content7",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content8",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
},
{
"hasListBullets": false,
"state": "",
"content": "content9",
"bodycopyM": {
"type": "-m",
"text": "É uma das componentes mais importantes do crédito habitação e do financiamento e as suas condições podem ser negociadas livremente com as instituições de crédito.<br/> O crédito habitação divide-se em <a href='#'>três tipos principais </a>com base na taxa de juro"
}
}
],
"isVertical": true
}
.content-with-menu-tab {
flex-flow: column;
display: flex;
.menu-tab {
gap: 0;
&-item, &-indicator {
border: 0 none;
&.active, &.active .menu-tab-indicator {
border-bottom: 1.5px solid var(--color-border-accent-bold);
.menu-tab__text-label .caption-call-to-action {
color: var(--color--text-cta-tertiary);
}
}
}
&__text-label .caption-call-to-action{
color:var(--color-text-subtle);
}
&-scroller__scroll--fixed .menu-tab-item {
flex: none;
}
/* Swiper Variation*/
.swiper {
&-pagination {
margin: 0 50px;
&-bullet {
width: 10px;
height: 10px;
margin-left: 5px;
margin-right: 5px;
}
&-bullet-active {
background: var(--color-accent);
}
}
&-pagination,
&-button-prev,
&-button-next {
position: relative;
&::after {
display: none;
}
.icon {
height: 20px;
width: 28px;
fill: var(--color-accent);
}
}
&-button-next,
&-button-prev {
top: 0;
width: 50px;
height: 50px;
margin-top: 0;
left: 0;
border-right: 1px solid var(--color-border);
border-left: 1px solid var(--color-border);
border-top: 1px solid var(--color-border);
&:hover {
border-color: var(--color-border-accent-bold);
}
.icon {
fill: var(--color-icon-accent-bold);
}
&.swiper-button-disabled,
&.swiper-button-disabled {
display:flex;
background: var(--color-background-disabled);
.icon {
fill: var(--color-icon-cta-primary-disabled)
}
}
}
}
}
&__content{
padding: 32px;
border-top: 1px solid var(--color-border);
background: var(--color-background-subtle);
width: 100%;
min-height: 160px;
@media (--viewport-xs-max) {
padding: 24px;
}
.bodycopy-m {
color: var(--color-text);
a {
color: var(--color-text-link-secondary);
text-decoration: underline;
}
}
.menu-tab {
&__controls {
}
&-content {
&__item {
gap:24px;
}
}
}
}
@media (--viewport-ms-min) {
&.vertical-alignment{
.menu-tab {
&__wrapper {
flex-basis: 33.33333333%;
max-width:219px;
}
}
}
}
@media (--viewport-sm-min) {
&.vertical-alignment{
.menu-tab {
&__wrapper {
flex-basis: 25%;
max-width:225px;
}
}
}
}
@media (--viewport-md-min) {
&.vertical-alignment{
.menu-tab {
&__wrapper {
flex-basis: 25%;
max-width:225px;
}
}
}
}
@media (--viewport-xs-max) {
.menu-tab {
&-scroller {
&__scroll-content {
flex-flow:nowrap;
}
}
}
}
@media (--viewport-ms-min) {
&__content {
min-height: 160px;
}
&.vertical-alignment{
flex-direction: row;
align-items: stretch;
.menu-tab {
height:auto;
&-item, &-indicator {
border: 0 none;
max-width:225px;
&.active, &.active .menu-tab-indicator {
border-bottom:0;
border-left:1.5px solid;
}
}
&-scroller {
overflow: visible;
&__scroll-content {
flex-flow:column;
height:auto;
flex: none;
align-items: flex-start;
align-items: flex-start;
justify-content: flex-start;
margin: 0;
border-left: 1px solid var(--color-border);
}
}
&__wrapper {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-self: flex-start;
}
&__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
white-space: nowrap;
align-self: center;
min-height: 248px;
border:0;
}
&-content {
flex: 1;
min-height: 248px;
border:0;
}
&__text-label {
width:100%;
.caption-call-to-action {
width: 100%;
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
/* Swiper Variation*/
.swiper {
&-navigation {
display:none;
}
}
}
}
}
No notes defined.