<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="faqs-component ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-10 col-lg-10 col wrapper">
<div class="faqs-component__stacker">
<div class="faqs-component__stacker-categoriesBox">
<div class="faqs-component__stacker-categoriesBox-categoriesList">
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion">
<li class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item">
<button class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__trigger active" type="button">
<h2 class="
title-m
">Gerais</h2>
</button>
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content">
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content-wrapper">
<ul class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList">
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#1">
<span>Sobre a UCI</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#2">
<span>Crédito Habitação</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#3">
<span>Empréstimo</span>
</a>
</ul>
</div>
</div>
</li>
<li class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item">
<button class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__trigger " type="button">
<h2 class="
title-m
">Simuladores</h2>
</button>
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content">
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content-wrapper">
<ul class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList">
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#5">
<span>Simule X</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#6">
<span>Simule Y</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#7">
<span>Simule Z</span>
</a>
</ul>
</div>
</div>
</li>
<li class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item">
<button class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__trigger " type="button">
<h2 class="
title-m
">Guias</h2>
</button>
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content">
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content-wrapper">
<ul class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList">
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#9">
<span>X</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#10">
<span>Y</span>
</a>
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger" href="#11">
<span>Z</span>
</a>
</ul>
</div>
</div>
</li>
</div>
</div>
</div>
<div class="faqs-component__stacker-ctaBox">
<div class="faqs-component__stacker-ctaBox-title">
<h1 class="
title-l
">
Simule connosco e fique a saber quanto pode pedir!
</h1>
</div>
<div class="faqs-component__stacker-ctaBox-btn">
<button id="#simulators" class="btn
" type="">
Simule com a UCI
</button>
</div>
</div>
<div class="faqs-component__stacker-dropdown">
<div class="access-select ">
<div class="access-select__chosen">
<input class="access-select__chosen-option_hidden" value="" type="hidden">
<div class="access-select__option access-select__chosen-option">EXPLORE AS CATEGORIAS</div>
<div class="access-select__chosen-icon">
<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>
</div>
</div>
<ul class="access-select__list">
<li class="access-select__item">
<a class="access-select__option" href="#1" id="option1">
1a Categoria</a>
</li>
<li class="access-select__item">
<a class="access-select__option" href="#5" id="option2">
2a Categoria</a>
</li>
<li class="access-select__item">
<a class="access-select__option" href="#9" id="option3">
3a Categoria</a>
</li>
</ul>
</div>
</div>
<!-- stacker div -->
</div>
<div class="faqs-component__display">
<div class="faqs-component__categoryDiv" id="#">
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="1">
<h2 class="
title-m
">Sobre a UCI</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Para que serve o Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Para que serve o Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Para que serve o Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Para que serve o Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim.
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="2">
<h2 class="
title-m
">Crédito Habitação</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="3">
<h2 class="
title-m
">Empréstimo</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
</ul>
</div>
</div>
<div class="faqs-component__categoryDiv" id="#">
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="5">
<h2 class="
title-m
">Simule X</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="6">
<h2 class="
title-m
">Simule Y</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="7">
<h2 class="
title-m
">Simule Z</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="faqs-component__categoryDiv" id="#">
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="9">
<h2 class="
title-m
">X</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="10">
<h2 class="
title-m
">Y</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="11">
<h2 class="
title-m
">Z</h2>
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
O que é o Crédito de Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Qual a diferença entre um Crédito e um Crédito Habitação?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
Quais as obrigações dos Clientes?
</div>
</button>
<!-- accordion content -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
CONTENT
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{{#extend '@splitter' splitter }}
{{#content 'content-first-column'}}
<div {{#if hasID}}id="{{idComponent}}" {{/if}} class="faqs-component ">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
<div class="col-xs-12 col-ms-11 col-ms-mr-ml col-sm-10 col-lg-10 col wrapper">
<div class="faqs-component__stacker">
<div class="faqs-component__stacker-categoriesBox">
<div class="faqs-component__stacker-categoriesBox-categoriesList">
<div class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion">
{{#each category}}
<li
class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item">
<button
class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__trigger {{#if isActive}}active{{/if}}"
type="button">
{{> @title-m this.trigger}}
</button>
<div
class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content">
<div
class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content-wrapper">
<ul
class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList">
{{#each sub-category}}
<a class="faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-subCategoryList__trigger"
href="#{{this.id}}">
<span>{{this.trigger.text}}</span>
</a>
{{/each}}
</ul>
</div>
</div>
</li>
{{/each}}
</div>
</div>
</div>
<div class="faqs-component__stacker-ctaBox">
<div class="faqs-component__stacker-ctaBox-title">
{{> @title-l title }}
</div>
<div class="faqs-component__stacker-ctaBox-btn">
{{> @btn btn }}
</div>
</div>
<div class="faqs-component__stacker-dropdown">
{{> @access-select dropdown }}
</div>
<!-- stacker div -->
</div>
<div class="faqs-component__display">
{{#each category}}
<div class="faqs-component__categoryDiv" id="#">
{{#each sub-category}}
<!-- subCategory Box -->
<div class="faqs-component__display-subCategoryBox" id="{{this.id}}">
{{> @title-m this.trigger}}
<div class="faqs-component__display-subCategoryBox-desc">
<div class="bodycopy-m">
Consulte aqui as perguntas mais frequentes dos nossos clientes.
</div>
</div>
<ul class="faqs-component__display-subCategoryBox-accordionList">
{{#each accordion-items}}
<li class="faqs-component__display-subCategoryBox-accordionList-singleAccordion">
<!-- accordion trigger -->
<button
class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-trigger">
<div class="bodycopy-l">
{{this.trigger.text}}
</div>
</button>
<!-- accordion content -->
<div
class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content">
<!-- <div class="row">
<div class="col-xs-10 col-ms-10 col-sm-12 col-lg-12 col"> -->
<div
class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-content-wrapper">
<div
class="faqs-component__display-subCategoryBox-accordionList-singleAccordion-item-description">
<div class="bodycopy-m">
{{this.description.text}}
</div>
</div>
</div>
</div>
</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
{{/content}}
{{/extend}}
{
"hasID": false,
"splitter": {
"oneColumn": true,
"bgColorWhite": true,
"paddingTopLarge": true,
"paddingBottomLarge": true
},
"title": {
"text": "Simule connosco e fique a saber quanto pode pedir!",
"isH1": true
},
"btn": {
"text": "Simule com a UCI",
"id": "#simulators"
},
"category": [
{
"isActive": true,
"isCategory": true,
"id": "0",
"trigger": {
"text": "Gerais",
"isH2": true
},
"sub-category": [
{
"isSubCategory": true,
"id": "1",
"trigger": {
"text": "Sobre a UCI",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
},
{
"trigger": {
"text": "Para que serve o Crédito Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
},
{
"trigger": {
"text": "Para que serve o Crédito Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
},
{
"trigger": {
"text": "Para que serve o Crédito Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
},
{
"trigger": {
"text": "Para que serve o Crédito Habitação?"
},
"description": {
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vehicula libero nec nisl tincidunt, a cursus tellus molestie. Sed diam felis, eleifend eget velit non, fermentum laoreet sem. Phasellus lobortis tincidunt erat. Donec ut facilisis urna. Nam sit amet enim tortor. Maecenas quis tristique arcu. Ut dictum, nisl vel suscipit blandit, odio eros tempor purus, a ultrices nisi mi sed magna. Curabitur lobortis urna velit, vitae accumsan sapien maximus sed. Donec risus nibh, suscipit porta arcu a, placerat semper libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sed tortor ac velit dapibus interdum eget convallis enim."
}
}
]
},
{
"isSubCategory": true,
"id": "2",
"trigger": {
"text": "Crédito Habitação",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
},
{
"isSubCategory": true,
"id": "3",
"trigger": {
"text": "Empréstimo",
"isH2": true
}
}
]
},
{
"isCategory": true,
"id": "4",
"trigger": {
"text": "Simuladores",
"isH2": true
},
"sub-category": [
{
"isSubCategory": true,
"id": "5",
"trigger": {
"text": "Simule X",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
},
{
"isSubCategory": true,
"id": "6",
"trigger": {
"text": "Simule Y",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
},
{
"isSubCategory": true,
"id": "7",
"trigger": {
"text": "Simule Z",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
}
]
},
{
"isCategory": true,
"id": "8",
"trigger": {
"text": "Guias",
"isH2": true
},
"sub-category": [
{
"isSubCategory": true,
"id": "9",
"trigger": {
"text": "X",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
},
{
"isSubCategory": true,
"id": "10",
"trigger": {
"text": "Y",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
},
{
"isSubCategory": true,
"id": "11",
"trigger": {
"text": "Z",
"isH2": true
},
"accordion-items": [
{
"trigger": {
"text": "O que é o Crédito de Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Qual a diferença entre um Crédito e um Crédito Habitação?"
},
"description": {
"text": "CONTENT"
}
},
{
"trigger": {
"text": "Quais as obrigações dos Clientes?"
},
"description": {
"text": "CONTENT"
}
}
]
}
]
}
],
"dropdown": {
"chosen-placeholder": "EXPLORE AS CATEGORIAS",
"isAnchorsVersions": true,
"option": [
{
"id": "option1",
"select-name": "Select group name",
"href": "#1",
"text": "1a Categoria",
"isSimple": true
},
{
"id": "option2",
"select-name": "Select group name",
"href": "#5",
"text": "2a Categoria",
"isSimple": true
},
{
"id": "option3",
"select-name": "Select group name",
"href": "#9",
"text": "3a Categoria",
"isSimple": true
}
]
}
}
.faqs-component {
float: left;
position: relative;
.wrapper{
position: relative;
align-items: flex-start;
display: flex;
flex-direction: row;
@media(--viewport-ms-max) {
flex-direction: column;
}
/*@media(--viewport-ms-only) {
margin:0;
}*/
}
&__stacker {
float: left;
top: 0;
position: sticky;
width: 30%;
padding-top: 0px;
padding-bottom: 0px;
/* mobile stylization */
@media(--viewport-ms-max) {
width: 100%;
position: relative;
}
&.sticky-clone {
box-shadow: none;
}
&-dropdown {
display: none;
&.sticky-clone {
.faqs-component {
&__stacker {
&-dropdown {
z-index: 12;
}
}
}
}
@media(--viewport-ms-max) {
display: block;
}
.icon {
display: block;
fill: var(--color-accent);
width: 16px;
height: 16px;
}
.access-select {
z-index: 0;
}
.access-select__list {
position: sticky;
text-align: left;
}
.access-select__chosen {
z-index: 2;
&-option {
/*border: 1px solid var(--color-text);*/
text-align: left;
}
&-icon {
transition: all 0.4s;
}
&-label {
text-align: left;
left: 15px;
}
}
.access-select__chosen.active .access-select__chosen-label {
color: var(--color-accent);
}
.access-select__input {
&:hover,
&:focus {
+.access-select__label {
text-decoration: none;
}
}
}
}
&-categoriesBox {
display: flex;
flex-flow: column;
height: fit-content;
width: 100%;
margin-bottom: 40px;
background-color: var(--color-accent-light);
/* mobile stylization */
@media(--viewport-ms-max) {
display: none;
}
&-categoriesList {
padding: 30px 32px;
&-categoryAccordion {
/*each trigger represents one Category*/
&__trigger {
position: relative;
width: 100%;
text-align: left;
/*font-family: "Jornada News Medium";
font-size: 26px;
line-height: 32px;
color: var(--color-text);*/
.title-m {
color: var(--color-text);
}
/*this leaves the Category with accent color when active, it also generates the right red border */
&.active {
border-right: 3px solid var(--color-primary-brand);
.title-m {
color: var(--color-accent);
}
}
}
&__item {
padding-bottom: 10px;
/* this makes the first subCategoryList visible */
&:first-child {
.faqs-component__stacker-categoriesBox-categoriesList-categoryAccordion__item-content {
display: block;
}
}
/* content contains subCategoryList */
&-content {
display: none;
&-wrapper {
padding-bottom: 10px;
}
}
&-subCategoryList {
display: flex;
flex-flow: column;
padding-left: 10px;
&__trigger {
position: relative;
width: 100%;
text-align: left;
font-family: "Jornada Sans Medium";
font-size: 13px;
line-height: 18px;
color: var(--color-text);
padding-top: 10px;
&:focus {
color: var(--color-accent);
}
&:hover {
color: var(--color-accent);
}
&:active {
color: var(--color-accent);
}
}
}
}
}
}
}
&-ctaBox {
display: flex;
flex-flow: column;
height: fit-content;
padding: 32px 32px;
background-color: var(--color-accent);
@media(--viewport-ms-max) {
display: none;
}
&-title {
/* font-family: 'Jornada News Book';
font-size: 32px;
line-height: 36px;
color: var(--color-primary);*/
.title-l {
color: var(--color-primary);
}
margin-bottom: 25px;
}
}
}
&__display {
float:left;
position: relative;
top:0;
padding-top: 20px;
padding-left: 50px;
padding-left: 50px;
width: 70%;
/* mobile stylization */
@media(--viewport-ms-max) {
width: 100%;
padding-left: 0px;
}
&-subCategoryBox {
display: flex;
flex-flow: column;
padding-top: 110px;
@media(--viewport-ms-max) {
padding-bottom: 0px;
/*padding-top: 80px; */
padding-top: 40px;
&:first-child {
padding-bottom: 0px;
/*padding-top: 80px;*/
padding-top: 40px;
}
}
.title-m {
color: var(--color-text);
}
/* &-title {
font-family: "Jornada News Book";
font-size: 35px;
line-height: 42px;
color: var(--color-text);
/* mobile stylization
@media(--viewport-ms-max) {
font-size: 26px;
line-height: 26px;
}
} */
&-desc {
/* font-family: "Jornada News";
font-size: 20px;
line-height: 28px;
color: var(--color-text);*/
.bodycopy-m {
color: var(--color-text);
}
/* mobile stylization */
@media(--viewport-ms-max) {
font-size: 16px;
line-height: 18px;
}
}
&-accordionList {
display: flex;
flex-flow: column;
padding-top: 30px;
&-singleAccordion {
display: block;
height: 100%;
border: 1px solid #E7E7E7;
margin-bottom: 20px;
padding: 0px 30px;
/* mobile stylization */
@media(--viewport-ms-max) {
padding: 0px 15px;
}
/* this limits number of single accordions to 3 */
&:nth-child(n+4) {}
&-trigger {
position: relative;
width: 100%;
padding: 15px 0;
text-align: left;
.bodycopy-l {
color: var(--color-text);
margin-right: 30px;
}
&-accTitle {
/*font-family: "Jornada Sans Book";
font-size: 20px;
line-height: 28px;*/
.bodycopy-l {
color: var(--color-text);
margin-right: 15px;
}
padding-right: 25px;
/* mobile stylization */
@media(--viewport-ms-max) {
font-size: 16px;
line-height: 18px;
}
}
&::after {
position: absolute;
top: 40%;
right: 0;
display: block;
width: 12px;
height: 12px;
background: url("/dist/images/red-arrow-down.svg") center / contain no-repeat;
content: '';
transition: all 0.4s;
}
&.active {
&::after {
transform: rotate(-180deg);
}
}
}
&-item {
&-content {
display: none;
&-wrapper {
padding-bottom: 20px;
}
}
&-description {
/* font-family: "Jornada Sans Book";
font-size: 18px;*/
.bodycopy-m {
color: #797979;
}
padding: 1rem 0rem;
}
}
}
}
}
}
&__categoryDiv{
display:block;
@media(--viewport-sm-min) {
&:first-child {
margin-top: -110px;
}
}
}
}
@media(--viewport-sm-min) {
.header-fixed ~ * .faqs-component__stacker {
top:100px;
}
}
No notes defined.