{# Settings #}
{% set root = "../../../" %}
{% set sidebarNavActive_1 = "shortcode-base-tabs" %}
{% set title = "Tabs v5-2" %}

{% include "html/assets/include/nunjucks/partials/head.njk" %}
{% include "html/assets/include/nunjucks/partials/core-fonts.njk" %}
{% include "html/assets/include/nunjucks/partials/core-css.njk" %}
{% include "html/assets/include/nunjucks/partials/core-icons.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %}
<link rel="stylesheet" href="{{ root }}assets/vendor/animate.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/jquery-ui/themes/base/jquery-ui.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/wait-animate.min.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.css">
<link rel="stylesheet" href="{{ root }}assets/vendor/hamburgers/hamburgers.min.css">

{% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %}

{% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %}
{% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
</head>

<body class="u-body--header-side-push-left u-body--header-side-opened u-has-sidebar-navigation g-overflow-x-hidden">
  <main>
    {% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

    <section class="g-py-100">
      <div class="container">
        <!-- Tab v5-2 (slide-up-down) -->
        <section>
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Tab v5-2</h2>
            </div>

            <div class="g-pl-90">
              <p>slide-up-down</p>
            </div>
          </header>

          <!-- Default color, horizontal, align-left, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-default-hor-left-border-bottom"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left-border-bottom" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode1" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-default-hor-left"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode2" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, none side padding -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom, none side padding</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-default-hor-border-bottom-left-padding-0"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md active" data-toggle="tab" href="#nav-5-2-default-hor-border-bottom-left-padding-0--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-default-hor-border-bottom-left-padding-0--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-default-hor-border-bottom-left-padding-0--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-default-hor-border-bottom-left-padding-0--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-border-bottom-left-padding-0" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-border-bottom-left-padding-0--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-border-bottom-left-padding-0--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-border-bottom-left-padding-0--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-border-bottom-left-padding-0--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode3" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, none side padding -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, align-center, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-center u-nav-v5-2 u-nav-primary g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-primary-hor-center-border-bottom"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-center-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-primary-hor-center-border-bottom" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-primary-hor-center-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode4" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, align-center, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, align-center -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-center u-nav-v5-2 u-nav-primary" role="tablist"
                      data-target="nav-5-2-primary-hor-center"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-center--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-center--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-primary-hor-center" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-primary-hor-center--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-center--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode5" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, align-center -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Dark color, horizontal, align-right, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-end u-nav-v5-2 u-nav-dark g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-dark-hor-right-border-bottom"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-dark-hor-right-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-dark-hor-right-border-bottom" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-dark-hor-right-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode6" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Dark color, horizontal, align-right, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Dark color, horizontal, align-right -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-end u-nav-v5-2 u-nav-dark" role="tablist"
                      data-target="nav-5-2-dark-hor-right"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-dark-hor-right--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-dark-hor-right--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-dark-hor-right" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-dark-hor-right--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-dark-hor-right--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode7" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Dark color, horizontal, align-right -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Light color, horizontal, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-30">
                    <!-- Nav tabs -->
                    <ul class="nav nav-fill u-nav-v5-2 u-nav-light g-brd-bottom--md g-brd-gray-dark-v4" role="tablist"
                        data-target="nav-5-2-primary-hor-fill-border-bottom"
                        data-tabs-mobile-type="slide-up-down"
                        data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white">
                      <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-fill-border-bottom--1" role="tab">Detracto</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill-border-bottom--2" role="tab">Sea et</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill-border-bottom--3" role="tab">Omittantur</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill-border-bottom--4" role="tab">Accommodare</a>
                      </li>
                    </ul>
                    <!-- End Nav tabs -->

                    <!-- Tab panes -->
                    <div id="nav-5-2-primary-hor-fill-border-bottom" class="tab-content g-pt-20">
                      <div class="tab-pane fade show active" id="nav-5-2-primary-hor-fill-border-bottom--1" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill-border-bottom--2" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill-border-bottom--3" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill-border-bottom--4" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                    </div>
                    <!-- End Tab panes -->
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode8" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Light color, horizontal, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Light color, horizontal -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-30">
                    <!-- Nav tabs -->
                    <ul class="nav nav-fill u-nav-v5-2 u-nav-light" role="tablist"
                        data-target="nav-5-2-primary-hor-fill"
                        data-tabs-mobile-type="slide-up-down"
                        data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white">
                      <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-fill--1" role="tab">Detracto</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill--2" role="tab">Sea et</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill--3" role="tab">Omittantur</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-fill--4" role="tab">Accommodare</a>
                      </li>
                    </ul>
                    <!-- End Nav tabs -->

                    <!-- Tab panes -->
                    <div id="nav-5-2-primary-hor-fill" class="tab-content g-pt-20">
                      <div class="tab-pane fade show active" id="nav-5-2-primary-hor-fill--1" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill--2" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill--3" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-primary-hor-fill--4" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                    </div>
                    <!-- End Tab panes -->
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode9" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Light color, horizontal -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, navigation justified, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, navigation justified, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav nav-justified u-nav-v5-2 u-nav-primary g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-primary-hor-justified-border-bottom"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-justified-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-primary-hor-justified-border-bottom" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-primary-hor-justified-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode10" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, navigation justified, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, navigation justified -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, navigation justified</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav nav-justified u-nav-v5-2 u-nav-primary" role="tablist"
                      data-target="nav-5-2-primary-hor-justified"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-hor-justified--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-hor-justified--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-primary-hor-justified" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-primary-hor-justified--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-primary-hor-justified--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode11" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, navigation justified -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, vertical, border-right -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical, border-right</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-4">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 u-nav-primary g-height-100x--md g-brd-right--md g-brd-primary" role="tablist"
                          data-target="nav-5-2-primary-ver-border-right"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-ver-border-right--1" role="tab">Detracto</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver-border-right--2" role="tab">Sea et</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver-border-right--3" role="tab">Omittantur</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver-border-right--4" role="tab">Accommodare</a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-8">
                      <!-- Tab panes -->
                      <div id="nav-5-2-primary-ver-border-right" class="tab-content g-pt-20">
                        <div class="tab-pane fade show active" id="nav-5-2-primary-ver-border-right--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver-border-right--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver-border-right--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver-border-right--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode12" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, vertical, border-right -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, vertical -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode13">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-4">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 u-nav-primary" role="tablist"
                          data-target="nav-5-2-primary-ver"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-primary-ver--1" role="tab">Detracto</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver--2" role="tab">Sea et</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver--3" role="tab">Omittantur</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-primary-ver--4" role="tab">Accommodare</a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-8">
                      <!-- Tab panes -->
                      <div id="nav-5-2-primary-ver" class="tab-content g-pt-20">
                        <div class="tab-pane fade show active" id="nav-5-2-primary-ver--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-primary-ver--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode13" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, vertical -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, with icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom, with icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode14">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-default-hor-left-border-bottom-icons"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-icons--1" role="tab">
                        <i class="icon-christmas-037 u-tab-line-icon-pro g-mr-3"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-icons--2" role="tab">
                        <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-icons--3" role="tab">
                        <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-icons--4" role="tab">
                        <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left-border-bottom-icons" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left-border-bottom-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode14" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, with icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, with icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, with icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode15">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-default-hor-left-icons"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left-icons--1" role="tab">
                        <i class="icon-christmas-037 u-tab-line-icon-pro g-mr-3"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-icons--2" role="tab">
                        <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-icons--3" role="tab">
                        <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-icons--4" role="tab">
                        <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left-icons" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode15" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, with icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with default icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with default icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode16">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-default-ver-border-right-default-icons"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-border-right-default-icons--1" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-default-icons--2" role="tab">
                            <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-default-icons--3" role="tab">
                            <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-default-icons--4" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-border-right-default-icons" class="tab-content g-pt-20">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-border-right-default-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-default-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-default-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-default-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode16" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with default icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with default icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with default icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode17">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-default-ver-default-icons"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-default-icons--1" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-default-icons--2" role="tab">
                            <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-default-icons--3" role="tab">
                            <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-default-icons--4" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-default-icons" class="tab-content g-pt-20 g-pt-0--md">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-default-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-default-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-default-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-default-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode17" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with default icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, border-bottom, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode18">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-default-hor-left-border-bottom-big-icons"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-big-icons--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-big-icons--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-big-icons--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-border-bottom-big-icons--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left-border-bottom-big-icons" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left-border-bottom-big-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-big-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-big-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-border-bottom-big-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode18" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode19">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-default-hor-left-big-icons"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-left-big-icons--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-big-icons--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-big-icons--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-left-big-icons--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-left-big-icons" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-left-big-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-big-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-big-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-left-big-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode19" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, navigation justified, border-bottom, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, border-bottom, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode20">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-border-bottom-big-icons-notext--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode20" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, navigation justified, border-bottom, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, navigation justified, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode21">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-default-hor-nav-justified-big-icons-notext"
                      data-tabs-mobile-type="slide-up-down"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-big-icons-notext--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-big-icons-notext--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-big-icons-notext--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-hor-nav-justified-big-icons-notext--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-default-hor-nav-justified-big-icons-notext" class="tab-content g-pt-20">
                    <div class="tab-pane fade show active" id="nav-5-2-default-hor-nav-justified-big-icons-notext--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-big-icons-notext--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-big-icons-notext--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-default-hor-nav-justified-big-icons-notext--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode21" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, navigation justified, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode22">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-default-ver-border-right-big-icons"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-border-right-big-icons" class="tab-content g-pt-20 g-pt-0--md">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-border-right-big-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode22" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode23">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-default-ver-big-icons"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-big-icons--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-big-icons" class="tab-content g-pt-20 g-pt-0--md">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-big-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode23" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode24">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-default-ver-border-right-big-icons-notext"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons-notext--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons-notext--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons-notext--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-border-right-big-icons-notext--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-border-right-big-icons-notext" class="tab-content g-pt-20 g-pt-0--md">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-border-right-big-icons-notext--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons-notext--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons-notext--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-border-right-big-icons-notext--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode24" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode25">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-default-ver-big-icons-notext"
                          data-tabs-mobile-type="slide-up-down"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-default-ver-big-icons-notext--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons-notext--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons-notext--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-default-ver-big-icons-notext--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-default-ver-big-icons-notext" class="tab-content g-pt-20 g-pt-0--md">
                        <div class="tab-pane fade show active" id="nav-5-2-default-ver-big-icons-notext--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons-notext--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons-notext--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-default-ver-big-icons-notext--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode25" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with big icons, without text -->
        </section>
        <!-- End Tab v5-2 (slide-up-down) -->

        <hr class="g-brd-gray-light-v4 g-my-60">

        <!-- Tab v5-2 (accordion) -->
        <section>
          <header class="g-mb-60">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Tab v5-2</h2>
            </div>

            <div class="g-pl-90">
              <p>accordion</p>
            </div>
          </header>

          <!-- Default color, horizontal, align-left, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode26">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-hor-left-border-bottom"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left-border-bottom" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode26" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode27">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-accordion-hor-left"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode27" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, none side padding -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom, none side padding</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode28">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-hor-border-bottom-left-padding-0"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md active" data-toggle="tab" href="#nav-5-2-accordion-hor-border-bottom-left-padding-0--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-accordion-hor-border-bottom-left-padding-0--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-accordion-hor-border-bottom-left-padding-0--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link g-px-0--md g-mr-30--md" data-toggle="tab" href="#nav-5-2-accordion-hor-border-bottom-left-padding-0--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-border-bottom-left-padding-0" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-border-bottom-left-padding-0--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-border-bottom-left-padding-0--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-border-bottom-left-padding-0--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-border-bottom-left-padding-0--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode28" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, none side padding -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, align-center, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode29">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-center u-nav-v5-2 u-nav-primary g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-primary-hor-center-border-bottom"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-primary-hor-center-border-bottom" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-center-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode29" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, align-center, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, align-center -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, align-center</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode30">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-center u-nav-v5-2 u-nav-primary" role="tablist"
                      data-target="nav-5-2-accordion-primary-hor-center"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-center--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-primary-hor-center" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-center--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-center--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode30" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, align-center -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Dark color, horizontal, align-right, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode31">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-end u-nav-v5-2 u-nav-dark g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-dark-hor-right-border-bottom"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-dark-hor-right-border-bottom" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-dark-hor-right-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode31" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Dark color, horizontal, align-right, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Dark color, horizontal, align-right -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Dark color, horizontal, align-right</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode32">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav justify-content-end u-nav-v5-2 u-nav-dark" role="tablist"
                      data-target="nav-5-2-accordion-dark-hor-right"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-darkgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-dark-hor-right--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-dark-hor-right" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-dark-hor-right--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-dark-hor-right--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode32" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Dark color, horizontal, align-right -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Light color, horizontal, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode33">
                <div class="shortcode-html">
                  <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-30">
                    <!-- Nav tabs -->
                    <ul class="nav nav-fill u-nav-v5-2 u-nav-light g-brd-bottom--md g-brd-gray-dark-v4" role="tablist"
                        data-target="nav-5-2-accordion-primary-hor-fill-border-bottom"
                        data-tabs-mobile-type="accordion"
                        data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white g-mb-20">
                      <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill-border-bottom--1" role="tab">Detracto</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill-border-bottom--2" role="tab">Sea et</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill-border-bottom--3" role="tab">Omittantur</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill-border-bottom--4" role="tab">Accommodare</a>
                      </li>
                    </ul>
                    <!-- End Nav tabs -->

                    <!-- Tab panes -->
                    <div id="nav-5-2-accordion-primary-hor-fill-border-bottom" class="tab-content g-pt-20--md">
                      <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-fill-border-bottom--1" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill-border-bottom--2" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill-border-bottom--3" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill-border-bottom--4" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                    </div>
                    <!-- End Tab panes -->
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode33" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Light color, horizontal, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Light color, horizontal -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Light color, horizontal, navigation fill</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode34">
                <div class="shortcode-html">
                  <div class="g-bg-gray-dark-v2 g-color-white g-px-15 g-py-30">
                    <!-- Nav tabs -->
                    <ul class="nav nav-fill u-nav-v5-2 u-nav-light" role="tablist"
                        data-target="nav-5-2-accordion-primary-hor-fill"
                        data-tabs-mobile-type="accordion"
                        data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-white g-mb-20">
                      <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill--1" role="tab">Detracto</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill--2" role="tab">Sea et</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill--3" role="tab">Omittantur</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-fill--4" role="tab">Accommodare</a>
                      </li>
                    </ul>
                    <!-- End Nav tabs -->

                    <!-- Tab panes -->
                    <div id="nav-5-2-accordion-primary-hor-fill" class="tab-content g-pt-20--md">
                      <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-fill--1" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill--2" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill--3" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                      <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-fill--4" role="tabpanel">
                        <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                        <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                      </div>
                    </div>
                    <!-- End Tab panes -->
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode34" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Light color, horizontal -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, navigation justified, border-bottom -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, navigation justified, border-bottom</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode35">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav nav-justified u-nav-v5-2 u-nav-primary g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-primary-hor-justified-border-bottom"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified-border-bottom--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified-border-bottom--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified-border-bottom--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified-border-bottom--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-primary-hor-justified-border-bottom" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-justified-border-bottom--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified-border-bottom--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified-border-bottom--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified-border-bottom--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode35" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, navigation justified, border-bottom -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, horizontal, navigation justified -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, horizontal, navigation justified</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode36">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav nav-justified u-nav-v5-2 u-nav-primary" role="tablist"
                      data-target="nav-5-2-accordion-primary-hor-justified"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block u-btn-outline-primary g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified--1" role="tab">Detracto</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified--2" role="tab">Sea et</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified--3" role="tab">Omittantur</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-hor-justified--4" role="tab">Accommodare</a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-primary-hor-justified" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-hor-justified--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-primary-hor-justified--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode36" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, horizontal, navigation justified -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, vertical, border-right -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical, border-right</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode37">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-4">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 u-nav-primary g-height-100x--md g-brd-right--md g-brd-primary" role="tablist"
                          data-target="nav-5-2-accordion-primary-ver-border-right"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-ver-border-right--1" role="tab">Detracto</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver-border-right--2" role="tab">Sea et</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver-border-right--3" role="tab">Omittantur</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver-border-right--4" role="tab">Accommodare</a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-8">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-primary-ver-border-right" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-ver-border-right--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver-border-right--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver-border-right--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver-border-right--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode37" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, vertical, border-right -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Primary color, vertical -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Primary color, vertical</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode38">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-4">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 u-nav-primary" role="tablist"
                          data-target="nav-5-2-accordion-primary-ver"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-primary g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-primary-ver--1" role="tab">Detracto</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver--2" role="tab">Sea et</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver--3" role="tab">Omittantur</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-primary-ver--4" role="tab">Accommodare</a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-8">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-primary-ver" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-primary-ver--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-primary-ver--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode38" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Primary color, vertical -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, with icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, border-bottom, with icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode39">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-hor-left-border-bottom-icons"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-icons--1" role="tab">
                        <i class="icon-christmas-037 u-tab-line-icon-pro g-mr-3"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-icons--2" role="tab">
                        <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-icons--3" role="tab">
                        <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-icons--4" role="tab">
                        <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left-border-bottom-icons" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left-border-bottom-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode39" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, with icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, with icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, align-left, with icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode40">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-accordion-hor-left-icons"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left-icons--1" role="tab">
                        <i class="icon-christmas-037 u-tab-line-icon-pro g-mr-3"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-icons--2" role="tab">
                        <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-icons--3" role="tab">
                        <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-icons--4" role="tab">
                        <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left-icons" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode40" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, with icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with default icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with default icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode41">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-accordion-ver-border-right-default-icons"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-default-icons--1" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-default-icons--2" role="tab">
                            <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-default-icons--3" role="tab">
                            <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-default-icons--4" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-border-right-default-icons" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-border-right-default-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-default-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-default-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-default-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode41" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with default icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with default icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with default icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode42">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-accordion-ver-default-icons"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-default-icons--1" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-default-icons--2" role="tab">
                            <i class="icon-communication-025 u-tab-line-icon-pro g-mr-3"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-default-icons--3" role="tab">
                            <i class="icon-communication-017 u-tab-line-icon-pro g-mr-3"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-default-icons--4" role="tab">
                            <i class="icon-communication-010 u-tab-line-icon-pro g-mr-3"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-default-icons" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-default-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-default-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-default-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-default-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode42" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with default icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, border-bottom, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, border-bottom, with big icons</h3>
            </div>

            <div class="col-md-9">
              <div id="shortcode43">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-hor-left-border-bottom-big-icons"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-big-icons--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-big-icons--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-big-icons--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-border-bottom-big-icons--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left-border-bottom-big-icons" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left-border-bottom-big-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-big-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-big-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-border-bottom-big-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode43" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, border-bottom, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, align-left, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode44">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-accordion-hor-left-big-icons"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-left-big-icons--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Detracto
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-big-icons--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Sea et
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-big-icons--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Omittantur
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-left-big-icons--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                        Accommodare
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-left-big-icons" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-left-big-icons--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-big-icons--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-big-icons--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-left-big-icons--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode44" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, align-left, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, navigation justified, border-bottom, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, border-bottom, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode45">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2 g-brd-bottom--md g-brd-gray-light-v4" role="tablist"
                      data-target="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-border-bottom-big-icons-notext--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode45" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, navigation justified, border-bottom, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, horizontal, navigation justified, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, horizontal, navigation justified, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode46">
                <div class="shortcode-html">
                  <!-- Nav tabs -->
                  <ul class="nav text-center nav-justified u-nav-v5-2" role="tablist"
                      data-target="nav-5-2-accordion-hor-nav-justified-big-icons-notext"
                      data-tabs-mobile-type="accordion"
                      data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                    <li class="nav-item">
                      <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-big-icons-notext--1" role="tab">
                        <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-big-icons-notext--2" role="tab">
                        <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-big-icons-notext--3" role="tab">
                        <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-hor-nav-justified-big-icons-notext--4" role="tab">
                        <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                      </a>
                    </li>
                  </ul>
                  <!-- End Nav tabs -->

                  <!-- Tab panes -->
                  <div id="nav-5-2-accordion-hor-nav-justified-big-icons-notext" class="tab-content g-pt-20--md">
                    <div class="tab-pane fade show active" id="nav-5-2-accordion-hor-nav-justified-big-icons-notext--1" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-big-icons-notext--2" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-big-icons-notext--3" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                    <div class="tab-pane fade" id="nav-5-2-accordion-hor-nav-justified-big-icons-notext--4" role="tabpanel">
                      <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                      <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                    </div>
                  </div>
                  <!-- End Tab panes -->
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode46" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, horizontal, navigation justified, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode47">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-accordion-ver-border-right-big-icons"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-border-right-big-icons" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-border-right-big-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode47" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with big icons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode48">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-accordion-ver-big-icons"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Detracto
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Sea et
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Omittantur
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                            Accommodare
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-big-icons" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-big-icons--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode48" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with big icons -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, border-right, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, border-right, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode49">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2 g-height-100x--md g-brd-right--md g-brd-gray-light-v2" role="tablist"
                          data-target="nav-5-2-accordion-ver-border-right-big-icons-notext"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons-notext--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons-notext--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons-notext--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-border-right-big-icons-notext--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-border-right-big-icons-notext" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-border-right-big-icons-notext--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons-notext--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons-notext--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-border-right-big-icons-notext--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode49" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, border-right, with big icons, without text -->

          <hr class="g-brd-gray-light-v4 g-my-60">

          <!-- Default color, vertical, with big icons, without text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300 g-mb-20">Default color, vertical, with big icons, without text</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode50">
                <div class="shortcode-html">
                  <div class="row">
                    <div class="col-md-3">
                      <!-- Nav tabs -->
                      <ul class="nav text-center flex-column u-nav-v5-2" role="tablist"
                          data-target="nav-5-2-accordion-ver-big-icons-notext"
                          data-tabs-mobile-type="accordion"
                          data-btn-classes="btn btn-md btn-block rounded-0 u-btn-outline-lightgray g-mb-20">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons-notext--1" role="tab">
                            <i class="icon-christmas-037 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons-notext--2" role="tab">
                            <i class="icon-communication-025 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons-notext--3" role="tab">
                            <i class="icon-communication-017 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#nav-5-2-accordion-ver-big-icons-notext--4" role="tab">
                            <i class="icon-communication-010 d-block g-font-size-25 u-tab-line-icon-pro"></i>
                          </a>
                        </li>
                      </ul>
                      <!-- End Nav tabs -->
                    </div>

                    <div class="col-md-9">
                      <!-- Tab panes -->
                      <div id="nav-5-2-accordion-ver-big-icons-notext" class="tab-content">
                        <div class="tab-pane fade show active" id="nav-5-2-accordion-ver-big-icons-notext--1" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons-notext--2" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons-notext--3" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                        <div class="tab-pane fade" id="nav-5-2-accordion-ver-big-icons-notext--4" role="tabpanel">
                          <p>Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo cu primis delenit.</p>

                          <p>Nam ut viris disputando dissentiunt, sumo vocent ad mea. Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius voluptatum pro te, saepe laoreet in est.</p>
                        </div>
                      </div>
                      <!-- End Tab panes -->
                    </div>
                  </div>
                </div>

                <div class="shortcode-scripts">
                  <!-- JS Unify -->
                  <script type="text/plain" src="{{ root }}assets/js/components/hs.tabs.js"></script>

                  <!-- JS Plugins Init. -->
                  <script type="text/plain">
                    $(document).on('ready', function () {
                      // initialization of tabs
                      $.HSCore.components.HSTabs.init('[role="tablist"]');
                    });

                    $(window).on('resize', function () {
                      setTimeout(function () {
                        $.HSCore.components.HSTabs.init('[role="tablist"]');
                      }, 200);
                    });
                  </script>
                </div>
              </div>

              {% set contentTarget = "#shortcode50" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Default color, vertical, with big icons, without text -->
        </section>
        <!-- End Tab v5-2 (accordion) -->
      </div>
    </section>

    {% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %}

    {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %}
    {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
  </main>

  {% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %}

  {% include "html/assets/include/nunjucks/partials/core-js.njk" %}

  <!-- JS Implementing Plugins -->
  <script src="{{ root }}assets/vendor/hs-megamenu/src/hs.megamenu.js"></script>
  {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %}

  {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %}

  <!-- jQuery UI Helpers -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/menu.js"></script>
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/mouse.js"></script>

  <!-- jQuery UI Widgets -->
  <script src="{{ root }}assets/vendor/jquery-ui/ui/widgets/autocomplete.js"></script>

  <!-- JS Unify -->
  <script src="{{ root }}assets/js/hs.core.js"></script>
  <script src="{{ root }}assets/js/components/hs.header.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hamburgers.js"></script>
  <script src="{{ root }}assets/js/components/hs.header-side.js"></script>
  <script src="{{ root }}assets/js/components/hs.tabs.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.hover-blocks.js"></script>
  <script src="{{ root }}assets/js/components/hs.autocomplete-local-search.js"></script>
  <script src="{{ root }}assets/style-switcher/vendor/cookiejs/jquery.cookie.js"></script>
  <script src="{{ root }}assets/js/helpers/hs.shortcode-filter.js"></script>
  <script src="{{ root }}assets/js/components/hs.go-to.js"></script>

  {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}

  <!-- JS Custom -->
  <script src="{{ root }}assets/js/custom.js"></script>

  <!-- JS Plugins Init. -->
  <script>
    $(document).on('ready', function () {
      // initialization of tabs
      $.HSCore.components.HSTabs.init('[role="tablist"]');

      // initialization of go to
      $.HSCore.components.HSGoTo.init('.js-go-to');
    });

    $(window).on('load', function () {
      // initialization of header
      $.HSCore.components.HSHeader.init($('#js-header'));
      $.HSCore.helpers.HSHamburgers.init('.hamburger');
      $.HSCore.components.HSHeaderSide.init($('#sideNav'));

      // initialization of autocomplet
      $.HSCore.components.HSLocalSearchAutocomplete.init('#u-sidebar-navigation__search-autocomplete');

      // initialization of HSMegaMenu component
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });

    $(window).on('resize', function () {
      setTimeout(function () {
        $.HSCore.components.HSTabs.init('[role="tablist"]');
      }, 200);
    });
  </script>
</body>
</html>
