<section class="my-5 bg-gray-20">
    <div class="container">
        <div class="row justify-content-center mb-5">
            <div class="col-sm-12 col-md-10 col-lg-10 col-xl-8">
                <nav class="wow fadeInUp" id="myTab">
                    <div role="tablist">
                        <ul class="nav nav-fill nav-tabs">
                            <li class="nav-item">
                                <a id="accesssoftware-tab" href="#accesssoftware" rel="nofollow" title="Zugangssoftware" class="nav-link active" data-toggle="tab" aria-controls="accesssoftware" aria-selected="true" data-slideto=""><span class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4">
                                        <i class="icon icon-light-key icon-xl"></i>
                                    </span>
                                    <p class="mb-2">Zugangssoftware</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="technologies-tab" href="#technologies" rel="nofollow" title="Technologien" class="nav-link" data-toggle="tab" aria-controls="accesssoftware" aria-selected="true" data-slideto=""><span class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4">
                                        <i class="icon icon-light-server icon-xl"></i>
                                    </span>
                                    <p class="mb-2">Technologien</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="customerverification-tab" href="#customerverification" rel="nofollow" title="Neukundenprüfung" class="nav-link" data-toggle="tab" aria-controls="accesssoftware" aria-selected="true" data-slideto=""><span class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4">
                                        <i class="icon icon-light-clipboard-check icon-xl"></i>
                                    </span>
                                    <p class="mb-2">Neukundenprüfung</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="debtcollection-tab" href="#debtcollection" rel="nofollow" title="Inkasso International" class="nav-link" data-toggle="tab" aria-controls="accesssoftware" aria-selected="true" data-slideto=""><span class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4">
                                        <i class="icon icon-light-globe icon-xl"></i>
                                    </span>
                                    <p class="mb-2">Inkasso International</p>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a id="identityverification-tab" href="#identityverification" rel="nofollow" title="Identitätsprüfung" class="nav-link" data-toggle="tab" aria-controls="accesssoftware" aria-selected="true" data-slideto=""><span class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4">
                                        <i class="icon icon-light-check icon-xl"></i>
                                    </span>
                                    <p class="mb-2">Identitätsprüfung</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div id="myTabContent" class="tab-content mt-4">
                    <div id="accesssoftware" class="card tab-pane customized fade show active" role="tabpanel" aria-labelledby="accesssoftware-tab">
                        <div id="accesssoftware-tab" class="card-header customized">
                            <a href="#accesssoftware-collapse" class="text-decoration-none d-block" data-toggle="collapse" data-parent="#" aria-expanded="true" aria-controls="accesssoftware-tab">
                                <i class="icon icon-light-key icon-lg mr-2"></i>
                                <span>
                                    Zugangssoftware
                                </span>
                            </a>
                        </div>
                        <div id="accesssoftware-collapse" class="collapse customized" role="tabpanel" aria-labelledby="accesssoftware-collapse">
                            <div class="card-body">
                                Zugangssoftware
                            </div>
                        </div>
                    </div>
                    <div id="technologies" class="card tab-pane customized fade show" role="tabpanel" aria-labelledby="technologies-tab">
                        <div id="technologies-tab" class="card-header customized">
                            <a href="#technologies-collapse" class="text-decoration-none d-block" data-toggle="collapse" data-parent="#" aria-expanded="true" aria-controls="technologies-tab">
                                <i class="icon icon-light-key icon-lg mr-2"></i>
                                <span>
                                    Technologien
                                </span>
                            </a>
                        </div>
                        <div id="technologies-collapse" class="collapse customized" role="tabpanel" aria-labelledby="technologies-collapse">
                            <div class="card-body">
                                Technologien
                            </div>
                        </div>
                    </div>
                    <div id="customerverification" class="card tab-pane customized fade show" role="tabpanel" aria-labelledby="customerverification-tab">
                        <div id="customerverification-tab" class="card-header customized">
                            <a href="#customerverification-collapse" class="text-decoration-none d-block" data-toggle="collapse" data-parent="#" aria-expanded="true" aria-controls="customerverification-tab">
                                <i class="icon icon-light-key icon-lg mr-2"></i>
                                <span>
                                    Neukundenprüfung
                                </span>
                            </a>
                        </div>
                        <div id="customerverification-collapse" class="collapse customized" role="tabpanel" aria-labelledby="customerverification-collapse">
                            <div class="card-body">
                                Neukundenprüfung
                            </div>
                        </div>
                    </div>
                    <div id="debtcollection" class="card tab-pane customized fade show" role="tabpanel" aria-labelledby="debtcollection-tab">
                        <div id="debtcollection-tab" class="card-header customized">
                            <a href="#debtcollection-collapse" class="text-decoration-none d-block" data-toggle="collapse" data-parent="#" aria-expanded="true" aria-controls="debtcollection-tab">
                                <i class="icon icon-light-key icon-lg mr-2"></i>
                                <span>
                                    Inkasso International
                                </span>
                            </a>
                        </div>
                        <div id="debtcollection-collapse" class="collapse customized" role="tabpanel" aria-labelledby="debtcollection-collapse">
                            <div class="card-body">
                                Inkasso International
                            </div>
                        </div>
                    </div>
                    <div id="identityverification" class="card tab-pane customized fade show" role="tabpanel" aria-labelledby="identityverification-tab">
                        <div id="identityverification-tab" class="card-header customized">
                            <a href="#identityverification-collapse" class="text-decoration-none d-block" data-toggle="collapse" data-parent="#" aria-expanded="true" aria-controls="identityverification-tab">
                                <i class="icon icon-light-key icon-lg mr-2"></i>
                                <span>
                                    Identitätsprüfung
                                </span>
                            </a>
                        </div>
                        <div id="identityverification-collapse" class="collapse customized" role="tabpanel" aria-labelledby="identityverification-collapse">
                            <div class="card-body">
                                Identitätsprüfung
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="my-5 bg-gray-20">
  <div class="container">
    <div class="row justify-content-center mb-5">
      {{#with tab}}
      <div class="col-sm-12 col-md-10 col-lg-10 col-xl-8">
        <nav class="wow fadeInUp" id="{{navId}}">
          <div role="tablist">
            <ul class="nav nav-fill nav-tabs">
              {{#each item}}
              <li class="nav-item">
                {{#with link}}
                <a
                  id="{{id}}"
                  href="#{{href}}"
                  rel="nofollow"
                  title="{{title}}"
                  class="nav-link{{#if active}} active{{/if}}"
                  data-toggle="tab"
                  aria-controls="accesssoftware"
                  aria-selected="true"
                  data-slideto="{{../../../id}}"
                ><span
                    class="d-flex align-items-center justify-content-center nav-icon mx-auto rounded-circle mb-4"
                  >
                    {{render "@icon" icon}}
                  </span>
                  <p class="mb-2">{{{text}}}</p>
                </a>
                {{/with}}
              </li>
              {{/each}}
            </ul>
          </div>
        </nav>
        <div
          id="{{contentId}}"
          class="tab-content mt-4"
        >
          {{#each item}}
          <div
            id="{{link.href}}"
            class="card tab-pane customized fade show{{#if link.active}} active{{/if}}"
            role="tabpanel"
            aria-labelledby="{{link.id}}"
          >
            <div id="{{link.id}}" class="card-header customized">
              <a
                href="#{{link.href}}-collapse"
                class="text-decoration-none d-block"
                data-toggle="collapse"
                data-parent="#{{contentId}}"
                aria-expanded="true"
                aria-controls="{{link.id}}"
              >
                <i class="icon icon-light-key icon-lg mr-2"></i>
                <span>
                  {{link.text}}
                </span>
              </a>
            </div>
            <div
              id="{{link.href}}-collapse"
              class="collapse customized"
              role="tabpanel"
              aria-labelledby="{{link.href}}-collapse"
            >
              <div class="card-body">
                {{link.text}}
              </div>
            </div>
          </div>
          {{/each}}
        </div>
      </div>
      {{/with}}
    </div>
  </div>
</section>
{
  "tab": {
    "navId": "myTab",
    "contentId": "myTabContent",
    "item": [
      {
        "link": {
          "id": "accesssoftware-tab",
          "href": "accesssoftware",
          "title": "Zugangssoftware",
          "icon": {
            "class": "icon icon-light-key icon-xl"
          },
          "text": "Zugangssoftware",
          "active": true
        }
      },
      {
        "link": {
          "id": "technologies-tab",
          "href": "technologies",
          "title": "Technologien",
          "icon": {
            "class": "icon icon-light-server icon-xl"
          },
          "text": "Technologien"
        }
      },
      {
        "link": {
          "id": "customerverification-tab",
          "href": "customerverification",
          "title": "Neukundenprüfung",
          "icon": {
            "class": "icon icon-light-clipboard-check icon-xl"
          },
          "text": "Neukundenprüfung"
        }
      },
      {
        "link": {
          "id": "debtcollection-tab",
          "href": "debtcollection",
          "title": "Inkasso International",
          "icon": {
            "class": "icon icon-light-globe icon-xl"
          },
          "text": "Inkasso International"
        }
      },
      {
        "link": {
          "id": "identityverification-tab",
          "href": "identityverification",
          "title": "Identitätsprüfung",
          "icon": {
            "class": "icon icon-light-check icon-xl"
          },
          "text": "Identitätsprüfung"
        }
      }
    ]
  }
}

No notes defined.