<section class="org-faqs-block">
<div class="vebego-container">
<div class="mol-title title-underline">
<span class="atm-heading h-subtitle">FAQs</span>
<span class="atm-heading h1">Veelgestelde vragen</span>
</div>
<div class="mol-faqs">
<div class="faq-nav">
<div class="faq-nav-mobile">
<div class="mol-submenu">
<h1 class="atm-heading ">The quick brown fox jumps over the lazy dog</h1>
<div class="submenu-wrapper">
<div class="submenu-viewport">
<ul class="submenu-list">
<li class="">
<a class="atm-nav-link " href="#faq-panel-0" title="[object Object]" aria-label="" target="">Onderwerp 1</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="active">
<a class="atm-nav-link " href="#faq-panel-1" title="[object Object]" aria-label="" target="">Onderwerp 2</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-2" title="[object Object]" aria-label="" target="">Onderwerp 3</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-3" title="[object Object]" aria-label="" target="">Onderwerp 4</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
<li class="">
<a class="atm-nav-link " href="#faq-panel-4" title="[object Object]" aria-label="" target="">Onderwerp 5</a>
<span class="atm-slash " style="width: 1px; height: 30px;"></span>
</li>
</ul>
</div>
<a class="inactive submenu-prev"><span class="atm-icon text-blue far fa-chevron-left "></span></a>
<a class="inactive submenu-next"><span class="atm-icon text-blue far fa-chevron-right "></span></a>
</div>
</div>
</div>
<ul class="faq-nav-desktop">
<li class="">
<a href="#faq-panel-0">
<span class="atm-icon fas fa-chevron-right fa-xs "></span>Onderwerp 1
</a>
</li>
<li class="active">
<a href="#faq-panel-1">
<span class="atm-icon fas fa-chevron-right fa-xs "></span>Onderwerp 2
</a>
</li>
<li class="">
<a href="#faq-panel-2">
<span class="atm-icon fas fa-chevron-right fa-xs "></span>Onderwerp 3
</a>
</li>
<li class="">
<a href="#faq-panel-3">
<span class="atm-icon fas fa-chevron-right fa-xs "></span>Onderwerp 4
</a>
</li>
<li class="">
<a href="#faq-panel-4">
<span class="atm-icon fas fa-chevron-right fa-xs "></span>Onderwerp 5
</a>
</li>
</ul>
</div>
<div class="faq-panel faq-panel-0 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 1</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 2</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 3</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-1 ">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 4</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 5</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 6</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-2 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 7</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 8</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 9</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-3 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 10</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 11</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 12</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
<div class="faq-panel faq-panel-4 hidden">
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 13</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 15</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
<details>
<summary>
<div class="atm-heading h6">Dit is vraag 15</div>
<span class="atm-icon icon-open fal fa-chevron-down fa-md "></span><span class="atm-icon icon-close fal fa-chevron-up fa-md "></span>
</summary>
<div class="card-body">
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
<a class="atm-button atm-button-primary button-md ">
<span class="button-content">
<span>Lees de klantcase</span>
</span>
<span class="button-triangle"></span>
</a>
</div>
</details>
</div>
</div>
</div>
</section>
<section class="org-faqs-block">
<div class="vebego-container">
{{render "@title" title merge=true}}
{{render "@faqs"}}
</div>
</section>
{
"title": {
"heading": {
"text": "Veelgestelde vragen"
},
"subtitle": {
"text": "FAQs"
}
}
}
.org-faqs-block {
.mol-title {
@apply mb-8;
}
.mol-submenu {
.atm-heading {
@apply hidden;
}
}
.mol-submenu .submenu-list li.active .atm-nav-link {
@apply text-primary-700;
}
}
No notes defined.