{# Settings #}
{% set root = "../../" %}
{% set mainNavActive_1 = "shortcodes" %}
{% set sidebarNavActive_1 = "shortcode-base-headings" %}
{% set title = "Headings" %}

{% 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/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>
      <!-- Headings -->
      <section class="g-py-70">
        <!-- Heading #01 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#01</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-01"
                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="#heading-01-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-01-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-01-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-01" class="tab-content">
              <div id="heading-01-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode1-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-1 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode1-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-01-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode1-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-1 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode1-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-01-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode1-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-1 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode1-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #01 -->

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

        <!-- Heading #02 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#02</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-02"
                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="#heading-02-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-02-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-02-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-02" class="tab-content">
              <div id="heading-02-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode2-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-2 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode2-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-02-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode2-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-2 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode2-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-02-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode2-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-2 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode2-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #02 -->

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

        <!-- Heading #03 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#03</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-03"
                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="#heading-03-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-03-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-03-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-03" class="tab-content">
              <div id="heading-03-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode3-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-3 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode3-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-03-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode3-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-3 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode3-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-03-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode3-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-3 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode3-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #03 -->

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

        <!-- Heading #04 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#04</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-04"
                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="#heading-04-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-04-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-04-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-04" class="tab-content">
              <div id="heading-04-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode4-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-4 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode4-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-04-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode4-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-4 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode4-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-04-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode4-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-4 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode4-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #04 -->

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

        <!-- Heading #05 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#05</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-05"
                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="#heading-05-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-05-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-05-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-05" class="tab-content">
              <div id="heading-05-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode5-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-5 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode5-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-05-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode5-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-5 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode5-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-05-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode5-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-5 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode5-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #05 -->

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

        <!-- Heading #06 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#06</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-06"
                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="#heading-06-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-06-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-06-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-06" class="tab-content">
              <div id="heading-06-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode6-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-6 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode6-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-06-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode6-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-6 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode6-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-06-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode6-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-6 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode6-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #06 -->

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

        <!-- Heading #07 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#07</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-07"
                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="#heading-07-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-07-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-07-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-07-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-07-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-07-6" role="tab">Example 6</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-07" class="tab-content">
              <div id="heading-07-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode7-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--bottom g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-07-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode7-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--bottom g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-07-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode7-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--bottom g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-07-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode7-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--top g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-07-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode7-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--top g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-07-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode7-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-1--top g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode7-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #07 -->

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

        <!-- Heading #08 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#08</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-08"
                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="#heading-08-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-6" role="tab">Example 6</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-7" role="tab">Custom 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-08-8" role="tab">Custom 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-08" class="tab-content">
              <div id="heading-08-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode8-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--bottom g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode8-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--bottom g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode8-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--bottom g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode8-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--top g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode8-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--top g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode8-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--top g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-7" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode8-7">
                  <div class="shortcode-html">
                    <div class="text-center mx-auto u-heading-v2-2--bottom g-brd-primary g-width-80x--md g-mb-30">
                      <h2 class="h3 text-uppercase g-font-weight-700 g-mb-15">Kolorem ipsum quia dolor sit amet</h2>
                      <p class="mb-0">Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-08-8" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode8-8">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-2--bottom g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-font-weight-700 mb-0">Lawyer u-heading Style</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode8-8" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #08 -->

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

        <!-- Heading #09 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#09</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-09"
                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="#heading-09-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-6" role="tab">Example 6</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-09-7" role="tab">Custom 1</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-09" class="tab-content">
              <div id="heading-09-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode9-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--bottom g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode9-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--bottom g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode9-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--bottom g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode9-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--top g-mb-30">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode9-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--top g-brd-primary g-mb-30">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode9-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-3--top g-brd-gray-light-v2 g-mb-30">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-09-7" class="tab-pane fade text-center mx-auto g-width-80x--sm" role="tabpanel">
                <div id="shortcode9-7">
                  <div class="shortcode-html">
                    <div class="text-uppercase u-heading-v2-3--bottom g-brd-primary g-mb-20">
                      <h2 class="u-heading-v2__title g-font-weight-200 mb-0">Dolor sit ametdolorem</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode9-7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #09 -->

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

        <!-- Heading #10 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#10</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-10"
                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="#heading-10-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-6" role="tab">Example 6</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-7" role="tab">Custom 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-10-8" role="tab">Custom 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-10" class="tab-content">
              <div id="heading-10-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode10-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--bottom g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode10-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--bottom g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode10-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--bottom g-brd-gray-light-v2 g-mb-40">
                      <h4 class="text-uppercase g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode10-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--top g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode10-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--top g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode10-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-4--top g-brd-gray-light-v2 g-mb-40">
                      <h4 class="text-uppercase g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-7" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode10-7">
                  <div class="shortcode-html">
                    <div class="text-center g-bg-deeporange g-color-white-opacity-0_7 g-pa-40">
                      <div class="u-heading-v2-4--bottom text-uppercase g-brd-white g-mb-40">
                        <h4 class="h6 g-font-weight-700 g-mb-15">Majority suffer</h4>
                        <h2 class="u-heading-v2__title g-font-weight-700 g-color-white mb-0">Internet tend to repeat predefined</h2>
                      </div>

                      <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-10-8" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode10-8">
                  <div class="shortcode-html">
                    <div class="text-uppercase u-heading-v2-4--bottom g-brd-primary g-mb-30">
                      <h4 class="h6 g-font-weight-200 g-letter-spacing-1 g-color-primary g-mb-15">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title g-font-600">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode10-8" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #10 -->

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

        <!-- Heading #11 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#11</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-11"
                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="#heading-11-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-11-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-11-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-11-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-11-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-11-6" role="tab">Example 6</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-11" class="tab-content">
              <div id="heading-11-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode11-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--bottom g-mb-40">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-11-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode11-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--bottom g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-11-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode11-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--bottom g-brd-gray-light-v2 g-mb-40">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-11-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode11-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--top g-mb-40">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-11-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode11-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--top g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-11-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode11-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-5--top g-brd-gray-light-v2 g-mb-40">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode11-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #11 -->

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

        <!-- Heading #12 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#12</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-12"
                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="#heading-12-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-12-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-12-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-12-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-12-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-12-6" role="tab">Example 6</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-12" class="tab-content">
              <div id="heading-12-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode12-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--bottom g-mb-40">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-12-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode12-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--bottom g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-12-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode12-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--bottom g-brd-gray-light-v2 g-mb-40">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-12-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode12-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--top g-mb-40">
                      <h2 class="u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-12-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode12-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--top g-brd-primary g-mb-40">
                      <h2 class="text-uppercase u-heading-v2__title g-mb-10">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h4 class="g-font-weight-200">Neque porro quisquam</h4>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-12-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode12-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v2-6--top g-brd-gray-light-v2 g-mb-40">
                      <h4 class="g-font-weight-200 g-mb-10">Neque porro quisquam</h4>
                      <h2 class="u-heading-v2__title">Est qui dolorem ipsum quia dolor sit amet</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode12-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #12 -->

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

        <!-- Heading #13 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#13</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-13"
                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="#heading-13-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-13-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-13-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-13" class="tab-content">
              <div id="heading-13-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode13-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v3-1 g-mb-40">
                      <h2 class="h3 u-heading-v3__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode13-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-13-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode13-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v3-1 g-mb-40">
                      <h2 class="text-uppercase h3 u-heading-v3__title g-brd-primary">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode13-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-13-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode13-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v3-1 g-mb-40">
                      <h2 class="h3 u-heading-v3__title g-brd-gray-light-v2">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode13-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #13 -->

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

        <!-- Heading #14 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#14</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-14"
                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="#heading-14-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-14-2" role="tab">Example 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-14" class="tab-content">
              <div id="heading-14-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode14-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v4-1 g-mb-30">
                      <h2 class="h3 u-heading-v4__title g-mb-10">Dolorem ipsum quia dolor</h2>
                      <p class="g-mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus</p>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode14-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-14-2" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode14-2">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v4-1 g-brd-primary g-mb-30">
                      <h2 class="h3 u-heading-v4__title g-mb-10">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                      <p class="g-mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus</p>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode14-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #14 -->

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

        <!-- Heading #15 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#15</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-15"
                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="#heading-15-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-15-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-15-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-15" class="tab-content">
              <div id="heading-15-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode15-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v5-1 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode15-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-15-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode15-2">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v5-1 u-heading-v5-color-primary u-heading-v5-rounded-50x g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode15-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-15-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode15-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v5-1 u-heading-v5-color-gray-light-v2 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode15-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #15 -->

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

        <!-- Heading #16 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#16</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-16"
                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="#heading-16-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-16-2" role="tab">Example 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-16" class="tab-content">
              <div id="heading-16-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode16-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v5-2 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode16-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-16-2" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode16-2">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v5-2 u-heading-v5-color-gray-light-v2 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode16-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #16 -->

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

        <!-- Heading #17 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#17</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-17"
                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="#heading-17-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-17-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-17-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-17-4" role="tab">Custom 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-17-5" role="tab">Custom 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-17" class="tab-content">
              <div id="heading-17-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode17-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v5-3 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-17-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode17-2">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v5-3 u-heading-v5-color-primary u-heading-v5-rounded-50x g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-17-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode17-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v5-3 u-heading-v5-color-gray-light-v2 g-mb-20">
                      <h2 class="text-uppercase h3 u-heading-v5__title">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-17-4" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode17-4">
                  <div class="shortcode-html">
                    <div class="text-center g-bg-pink g-color-white-opacity-0_7 g-pa-40">
                      <div class="text-center text-uppercase u-heading-v5-3 u-heading-v5-color-white g-color-white u-heading-v5-rounded-50x g-mb-30">
                        <h4 class="h5 g-font-weight-700 g-color-white-opacity-0_7 g-mb-15">Maecenas tempus eget condimentum</h4>
                        <h2 class="u-heading-v5__title g-font-weight-700 g-pb-40 mb-0">Tellus eget condimentum rhoncus</h2>
                      </div>

                      <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-17-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode17-5">
                  <div class="shortcode-html">
                    <div class="text-center text-uppercase u-heading-v5-3 g-color-primary u-heading-v5-rounded-50x g-mb-30">
                      <h4 class="h6 g-font-weight-700 g-mb-15">Condimentum tempus eget</h4>
                      <h2 class="h1 u-heading-v5__title g-color-black g-font-weight-700 g-pb-40 mb-0">Rhoncus tellus eget condimentum</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode17-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #17 -->

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

        <!-- Heading #18 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#18</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-18"
                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="#heading-18-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-18-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-18-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-18" class="tab-content">
              <div id="heading-18-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode18-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v6-1 g-mb-20">
                      <h2 class="h3 u-heading-v6__title g-brd-primary">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode18-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-18-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode18-2">
                  <div class="shortcode-html">
                    <div class="text-center text-uppercase u-heading-v6-1 g-mb-20">
                      <h2 class="h3 u-heading-v6__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode18-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-18-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode18-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v6-1 g-mb-20">
                      <h2 class="h3 u-heading-v6__title g-brd-primary">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode18-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #18 -->

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

        <!-- Heading #19 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#19</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-19"
                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="#heading-19-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-19-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-19-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-19-4" role="tab">Custom 1</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-19" class="tab-content">
              <div id="heading-19-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode19-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v6-2 g-mb-20">
                      <h2 class="h3 u-heading-v6__title g-brd-primary">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode19-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-19-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode19-2">
                  <div class="shortcode-html">
                    <div class="text-center text-uppercase u-heading-v6-2 g-mb-20">
                      <h2 class="h3 u-heading-v6__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode19-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-19-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode19-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v6-2 g-mb-20">
                      <h2 class="h3 u-heading-v6__title g-brd-primary">Dolorem
                        <span class="g-color-primary">ipsum quia</span>
                        dolor
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode19-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-19-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode19-4">
                  <div class="shortcode-html">
                    <div class="text-uppercase u-heading-v6-2 g-pb-30">
                      <h4 class="h7 u-heading-v6__subtitle g-font-weight-700 g-ml-2 g-mb-10">Maecenas tempus</h4>
                      <h2 class="u-heading-v6__title g-font-weight-700 g-brd-primary">Sem quam semper libero</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode19-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #19 -->

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

        <!-- Heading #20 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#20</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-20"
                data-scroll
                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="#heading-20-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-5" role="tab">Example 5</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-6" role="tab">Example 6</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-7" role="tab">Example 7</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-8" role="tab">Example 8</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-9" role="tab">Example 9</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-10" role="tab">Example 10</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-11" role="tab">Example 11</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-20-12" role="tab">Example 12</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-20" class="tab-content">
              <div id="heading-20-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode20-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-height-25">
                        <i class="fa fa-circle u-heading-v7-divider__icon"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode20-2">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                      <div class="u-heading-v7-divider g-brd-primary g-height-25">
                        <i class="fa fa-circle u-heading-v7-divider__icon g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode20-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-gray-light-v2 g-height-25">
                        <i class="fa fa-circle u-heading-v7-divider__icon g-color-gray-light-v2"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode20-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-height-25 g-mb-5">
                        <i class="fa fa-circle u-heading-v7-divider__icon"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode20-5">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-25">
                        <i class="fa fa-circle u-heading-v7-divider__icon g-color-primary"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode20-6">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-gray-light-v2 g-height-25">
                        <i class="fa fa-circle u-heading-v7-divider__icon g-color-gray-light-v2"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-7" class="tab-pane fade" role="tabpanel">
                <div id="shortcode20-7">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-height-25">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-7" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-8" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode20-8">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-primary g-height-25">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-8" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-9" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode20-9">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v7-1 g-mb-30">
                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-gray-light-v2 g-height-25">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon g-color-gray-light-v2"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-9" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-10" class="tab-pane fade" role="tabpanel">
                <div id="shortcode20-10">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-height-25 g-mb-5">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-10" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-11" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode20-11">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-25">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon g-color-primary"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-11" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-20-12" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode20-12">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v7-1 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-gray-light-v2 g-height-25">
                        <i class="fa fa-circle-thin u-heading-v7-divider__icon g-color-gray-light-v2"></i>
                      </div>

                      <h2 class="h3 h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode20-12" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #20 -->

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

        <!-- Heading #21 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#21</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-21"
                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="#heading-21-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-21-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-21-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-21-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-21-5" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-21-6" role="tab">Example 6</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-21" class="tab-content">
              <div id="heading-21-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode21-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-height-20">
                        <i class="fa fa-comment-o u-heading-v7-divider__icon"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-21-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode21-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-primary g-height-20">
                        <i class="fa fa-heart u-heading-v7-divider__icon g-color-primary g-font-size-70x"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-70x g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-21-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode21-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-primary g-height-20">
                        <i class="fa fa-comment u-heading-v7-divider__icon g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-21-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode21-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <div class="u-heading-v7-divider g-height-20 g-mb-5">
                        <i class="fa fa-comment-o u-heading-v7-divider__icon"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-21-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode21-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-20 g-mb-5">
                        <i class="fa fa-heart u-heading-v7-divider__icon g-color-primary g-font-size-70x"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-heart u-heading-v7-divider__icon g-font-size-70x g-color-primary"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-21-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode21-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-2 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-20 g-mb-5">
                        <i class="fa fa-comment u-heading-v7-divider__icon g-color-primary"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode21-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #21 -->

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

        <!-- Heading #22 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#22</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-22"
                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="#heading-22-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-22-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-22-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-22-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-22-5" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-22-6" role="tab">Example 6</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-22" class="tab-content">
              <div id="heading-22-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode22-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-height-20">
                        <i class="fa fa-star-o u-heading-v7-divider__icon"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-22-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode22-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-primary g-height-20">
                        <i class="fa fa-star u-heading-v7-divider__icon g-color-primary g-font-size-70x"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-70x g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-22-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode22-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>

                      <div class="u-heading-v7-divider g-brd-primary g-height-20">
                        <i class="fa fa-star-o u-heading-v7-divider__icon g-color-primary"></i>
                      </div>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-22-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode22-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <div class="u-heading-v7-divider g-height-20 g-mb-5">
                        <i class="fa fa-star-o u-heading-v7-divider__icon"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-22-5" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode22-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-20 g-mb-5">
                        <i class="fa fa-star u-heading-v7-divider__icon g-color-primary g-font-size-70x"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-95x g-color-primary"></i>
                        <i class="fa fa-star u-heading-v7-divider__icon g-font-size-70x g-color-primary"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-22-6" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode22-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v7-3 g-mb-30">
                      <div class="u-heading-v7-divider g-brd-primary g-height-20 g-mb-5">
                        <i class="fa fa-star-o u-heading-v7-divider__icon g-color-primary"></i>
                      </div>

                      <h2 class="h3 u-heading-v7__title">Dolorem ipsum quia dolor</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode22-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #22 -->

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

        <!-- Heading #23 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#23</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-23"
                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="#heading-23-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-23-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-23-3" role="tab">Example 3</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-23-4" role="tab">Example 4</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-23-5" role="tab">Custom 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-23-6" role="tab">Custom 2</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-23" class="tab-content">
              <div id="heading-23-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode23-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v8-1 g-mb-20">
                      <h2 class="h3 text-uppercase u-heading-v8__title g-font-weight-700 mb-0">Dolorem ipsum quia
                        <strong class="g-bg-gray-dark-v2 g-color-yellow">dolor</strong></h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-23-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode23-2">
                  <div class="shortcode-html">
                    <div class="text-center u-heading-v8-1 g-mb-20">
                      <h2 class="h3 text-uppercase u-heading-v8__title g-font-weight-700 mb-0">Dolorem ipsum quia
                        <strong class="g-bg-gray-dark-v2 g-color-yellow">dolor</strong></h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-23-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode23-3">
                  <div class="shortcode-html">
                    <div class="text-right u-heading-v8-1 g-mb-20">
                      <h2 class="h3 text-uppercase u-heading-v8__title g-font-weight-700 mb-0">Dolorem ipsum quia
                        <strong class="g-bg-gray-dark-v2 g-color-yellow">dolor</strong></h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-23-4" class="tab-pane fade" role="tabpanel">
                <div id="shortcode23-4">
                  <div class="shortcode-html">
                    <div class="u-heading-v8-1 g-mb-20">
                      <h2 class="h3 u-heading-v8__title g-font-weight-200 mb-0">Dolorem ipsum quia
                        <strong class="g-bg-gray-dark-v2 g-color-yellow">dolor</strong></h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-4" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-23-5" class="tab-pane fade" role="tabpanel">
                <div id="shortcode23-5">
                  <div class="shortcode-html">
                    <div class="u-heading-v8-1 g-mb-20">
                      <h2 class="h4 text-uppercase u-heading-v8__title g-font-weight-700 g-letter-spacing-1 mb-0">
                        <strong class="h7 d-inline-block g-bg-yellow g-mb-3">Happy</strong>
                        <br>
                        Lorem Ipsum
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-5" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-23-6" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode23-6">
                  <div class="shortcode-html">
                    <div class="u-heading-v8-2 g-mb-40">
                      <h2 class="h1 text-uppercase u-heading-v8__title g-font-weight-700 mb-0">
                        <strong class="h6 d-inline-block g-bg-bluegray g-color-white g-mb-20">ipsumeria</strong>
                        <br>
                        <span class="g-color-red">Curabitur</span>
                        ullamcorper ultricies nisi
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode23-6" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #23 -->

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

        <!-- Heading #24 -->
        <section class="g-py-30">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#24</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-25"
                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="#heading-25-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-25-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-25-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-25" class="tab-content">
              <div id="heading-25-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode25-1">
                  <div class="shortcode-html">
                    <div class="text-uppercase g-mb-20">
                      <h2 class="g-font-weight-700 mb-0">Est qui dolorem ipsum quia dolor sit amet</h2>
                      <h5 class="g-font-weight-200 g-color-primary">Neque porro quisquam</h5>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode25-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-25-2" class="tab-pane fade" role="tabpanel">
                <div id="shortcode25-2">
                  <div class="shortcode-html">
                    <div class="g-bg-black g-color-white-opacity-0_7 g-pa-30">
                      <h4 class="text-uppercase g-font-weight-700 g-color-yellow g-mb-5">Est qui dolorem sit amet</h4>
                      <h2 class="display-5 text-uppercase g-color-white g-font-weight-700 g-mb-30">Neque porro quisquam</h2>
                      <p>Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                      <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
                    </div>
                  </div>
                </div>

                {% set contentTarget = "#shortcode25-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-25-3" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode25-3">
                  <div class="shortcode-html">
                    <div class="text-uppercase g-mb-30">
                      <h4 class="h7 g-font-weight-700 g-mb-15">
                        <span class="g-color-primary">01.</span>
                        porro quisquam
                      </h4>
                      <h2 class="h1">quia dolor <strong>sit amet dolorem</strong></h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode25-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #24 -->

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

        <!-- Heading #26 -->
        <section class="g-py-30 g-mb-60">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading
                <span class="g-color-primary g-ml-5">#26</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-26"
                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="#heading-26-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-26-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-26-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-26" class="tab-content">
              <div id="heading-26-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode26-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-7 g-bg-main g-brd-gray-light-v2 g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode26-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-26-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode26-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-7 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem ipsum standard</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode26-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-26-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode26-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v1-7 g-bg-main g-brd-primary g-mb-20">
                      <h2 class="h3 u-heading-v1__title">Lorem
                        <span class="g-color-primary">ipsum</span>
                        standard
                      </h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode26-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #26 -->

        <!-- Heading #27 -->
        <section class="g-py-30 g-mb-60">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading <span class="g-color-primary g-ml-5">#27</span>
              </h2>
            </div>

            <!-- Nav tabs -->
            <ul class="nav justify-content-center u-nav-v2-1 u-nav-rounded-3 g-mb-50" role="tablist"
                data-target="heading-27"
                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="#heading-27-1" role="tab">Example 1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-27-2" role="tab">Example 2</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#heading-27-3" role="tab">Example 3</a>
              </li>
            </ul>
            <!-- End Nav tabs -->

            <!-- Tab panes -->
            <div id="heading-27" class="tab-content">
              <div id="heading-27-1" class="tab-pane fade show active" role="tabpanel">
                <div id="shortcode27-1">
                  <div class="shortcode-html">
                    <div class="u-heading-v9 u-heading-v9--left g-bg-main g-mb-40">
                      <h5 class="g-font-weight-200 g-pt-17 g-mb-0">Porro quisquam</h5>
                      <h2 class="text-uppercase g-font-weight-700 g-mb-0">Neque dolorem ipsum quia</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode27-1" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-27-2" class="tab-pane fade text-center" role="tabpanel">
                <div id="shortcode27-2">
                  <div class="shortcode-html">
                    <div class="u-heading-v9 g-bg-main g-mb-40">
                      <h5 class="g-font-weight-200 g-pt-17 g-mb-0">Porro quisquam</h5>
                      <h2 class="text-uppercase g-font-weight-700 g-mb-0">Neque dolorem ipsum quia</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode27-2" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>

              <div id="heading-27-3" class="tab-pane fade text-right" role="tabpanel">
                <div id="shortcode27-3">
                  <div class="shortcode-html">
                    <div class="u-heading-v9 u-heading-v9--right g-bg-main g-mb-40">
                      <h5 class="g-font-weight-200 g-pt-17 g-mb-0">Porro quisquam</h5>
                      <h2 class="text-uppercase g-font-weight-700 g-mb-0">Neque dolorem ipsum quia</h2>
                    </div>

                    <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                    <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                  </div>
                </div>

                {% set contentTarget = "#shortcode27-3" %}
                {% set modalID = "#modalMarkup" %}
                {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
              </div>
            </div>
            <!-- End Tab panes -->
          </div>
        </section>
        <!-- End Heading #27 -->

        <!-- Heading #28 -->
        <section class="g-py-30 g-mb-60">
          <div class="container">
            <div class="text-center g-mb-50">
              <h2 class="h4">Heading <span class="g-color-primary g-ml-5">#28</span>
              </h2>
            </div>

            <div id="heading-28" class="tab-pane fade show active" role="tabpanel">
              <div id="shortcode28">
                <div class="shortcode-html">
                  <div class="u-heading-v10 g-mb-40">
                    <h2 class="u-heading-v10__downer g-mb-0">Dolor ipsum</h2>
                    <h3 class="u-heading-v10__upper g-mb-0">Porro quisquam.</h3>
                  </div>

                  <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
                  <p>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.</p>
                </div>
              </div>

              {% set contentTarget = "#shortcode28" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
        </section>
        <!-- End Heading #28 -->
      </section>
      <!-- End Headings -->
    </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.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 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 plugin
      $('.js-mega-menu').HSMegaMenu({
        event: 'hover',
        pageContainer: $('.container'),
        breakpoint: 991
      });
    });
  </script>
</body>
</html>
