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

{% 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>
      <!-- Button Types -->
      <section class="g-py-50 g-pt-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Types</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Flat -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-primary g-mr-10 g-mb-15">Primary</a>
                  <a href="#" class="btn btn-md u-btn-red g-mr-10 g-mb-15">Red</a>
                  <a href="#" class="btn btn-md u-btn-lightred g-mr-10 g-mb-15">Light Red</a>
                  <a href="#" class="btn btn-md u-btn-darkred g-mr-10 g-mb-15">Dark Red</a>
                  <a href="#" class="btn btn-md u-btn-blue g-mr-10 g-mb-15">Blue</a>
                  <a href="#" class="btn btn-md u-btn-indigo g-mr-10 g-mb-15">Indigo</a>
                  <a href="#" class="btn btn-md u-btn-purple g-mr-10 g-mb-15">Purple</a>
                  <a href="#" class="btn btn-md u-btn-darkpurple g-mr-10 g-mb-15">Dark Purple</a>
                  <a href="#" class="btn btn-md u-btn-pink g-mr-10 g-mb-15">Pink</a>
                  <a href="#" class="btn btn-md u-btn-orange g-mr-10 g-mb-15">Orange</a>
                  <a href="#" class="btn btn-md u-btn-deeporange g-mr-10 g-mb-15">Deep Orange</a>
                  <a href="#" class="btn btn-md u-btn-aqua g-mr-10 g-mb-15">Aqua</a>
                  <a href="#" class="btn btn-md u-btn-yellow g-mr-10 g-mb-15">Yellow</a>
                  <a href="#" class="btn btn-md u-btn-cyan g-mr-10 g-mb-15">Cyan</a>
                  <a href="#" class="btn btn-md u-btn-teal g-mr-10 g-mb-15">Teal</a>
                  <a href="#" class="btn btn-md u-btn-brown g-mr-10 g-mb-15">Brown</a>
                  <a href="#" class="btn btn-md u-btn-bluegray g-mr-10 g-mb-15">Blue Gray</a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-mr-10 g-mb-15">Dark Gray</a>
                  <a href="#" class="btn btn-md u-btn-black g-mr-10 g-mb-15">Black</a>
                </div>
              </div>

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

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

          <!-- Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default Outline</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-outline-primary g-mr-10 g-mb-15">Primary</a>
                  <a href="#" class="btn btn-md u-btn-outline-red g-mr-10 g-mb-15">Red</a>
                  <a href="#" class="btn btn-md u-btn-outline-lightred g-mr-10 g-mb-15">Light Red</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkred g-mr-10 g-mb-15">Dark Red</a>
                  <a href="#" class="btn btn-md u-btn-outline-blue g-mr-10 g-mb-15">Blue</a>
                  <a href="#" class="btn btn-md u-btn-outline-indigo g-mr-10 g-mb-15">Indigo</a>
                  <a href="#" class="btn btn-md u-btn-outline-purple g-mr-10 g-mb-15">Purple</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkpurple g-mr-10 g-mb-15">Dark Purple</a>
                  <a href="#" class="btn btn-md u-btn-outline-pink g-mr-10 g-mb-15">Pink</a>
                  <a href="#" class="btn btn-md u-btn-outline-orange g-mr-10 g-mb-15">Orange</a>
                  <a href="#" class="btn btn-md u-btn-outline-deeporange g-mr-10 g-mb-15">Deep Orange</a>
                  <a href="#" class="btn btn-md u-btn-outline-aqua g-mr-10 g-mb-15">Aqua</a>
                  <a href="#" class="btn btn-md u-btn-outline-yellow g-mr-10 g-mb-15">Yellow</a>
                  <a href="#" class="btn btn-md u-btn-outline-cyan g-mr-10 g-mb-15">Cyan</a>
                  <a href="#" class="btn btn-md u-btn-outline-teal g-mr-10 g-mb-15">Teal</a>
                  <a href="#" class="btn btn-md u-btn-outline-brown g-mr-10 g-mb-15">Brown</a>
                  <a href="#" class="btn btn-md u-btn-outline-bluegray g-mr-10 g-mb-15">Blue Gray</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">Dark Gray</a>
                  <a href="#" class="btn btn-md u-btn-outline-black g-mr-10 g-mb-15">Black</a>
                </div>
              </div>

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

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

          <!-- 3d -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">3d</h3>
              <p>Extend the <strong>default buttons</strong> with <code class="text-nowrap">u-btn-3d</code> class.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-3d u-btn-primary g-mr-10 g-mb-15">Primary</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-red g-mr-10 g-mb-15">Red</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-lightred g-mr-10 g-mb-15">Light Red</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-darkred g-mr-10 g-mb-15">Dark Red</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-blue g-mr-10 g-mb-15">Blue</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-indigo g-mr-10 g-mb-15">Indigo</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-purple g-mr-10 g-mb-15">Purple</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-darkpurple g-mr-10 g-mb-15">Dark Purple</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-pink g-mr-10 g-mb-15">Pink</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-orange g-mr-10 g-mb-15">Orange</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-deeporange g-mr-10 g-mb-15">Deep Orange</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-aqua g-mr-10 g-mb-15">Aqua</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-yellow g-mr-10 g-mb-15">Yellow</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-cyan g-mr-10 g-mb-15">Cyan</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-teal g-mr-10 g-mb-15">Teal</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-brown g-mr-10 g-mb-15">Brown</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-bluegray g-mr-10 g-mb-15">Blue Gray</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-darkgray g-mr-10 g-mb-15">Dark Gray</a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-black g-mr-10 g-mb-15">Black</a>
                </div>
              </div>

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

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

          <!-- Inset -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inset</h3>
              <p>Extend the <strong>default buttons</strong> with
                <code class="text-nowrap">u-btn-inset</code> class.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-inset u-btn-primary g-mr-10 g-mb-15">Primary</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-red g-mr-10 g-mb-15">Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-lightred g-mr-10 g-mb-15">Light Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-darkred g-mr-10 g-mb-15">Dark Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-blue g-mr-10 g-mb-15">Blue</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-indigo g-mr-10 g-mb-15">Indigo</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-purple g-mr-10 g-mb-15">Purple</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-darkpurple g-mr-10 g-mb-15">Dark Purple</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-pink g-mr-10 g-mb-15">Pink</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-orange g-mr-10 g-mb-15">Orange</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-deeporange g-mr-10 g-mb-15">Deep Orange</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-aqua g-mr-10 g-mb-15">Aqua</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-yellow g-mr-10 g-mb-15">Yellow</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-cyan g-mr-10 g-mb-15">Cyan</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-teal g-mr-10 g-mb-15">Teal</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-brown g-mr-10 g-mb-15">Brown</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-bluegray g-mr-10 g-mb-15">Blue Gray</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-darkgray g-mr-10 g-mb-15">Dark Gray</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-black g-mr-10 g-mb-15">Black</a>
                </div>
              </div>

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

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

          <!-- Inset Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inset Outline</h3>
              <p>Extend the <strong>default outline buttons</strong> with
                <code class="text-nowrap">u-btn-inset</code> class.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-primary g-mr-10 g-mb-15">Primary</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-red g-mr-10 g-mb-15">Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-lightred g-mr-10 g-mb-15">Light Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkred g-mr-10 g-mb-15">Dark Red</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-blue g-mr-10 g-mb-15">Blue</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-indigo g-mr-10 g-mb-15">Indigo</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-purple g-mr-10 g-mb-15">Purple</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkpurple g-mr-10 g-mb-15">Dark Purple</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-pink g-mr-10 g-mb-15">Pink</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-orange g-mr-10 g-mb-15">Orange</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-deeporange g-mr-10 g-mb-15">Deep Orange</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-aqua g-mr-10 g-mb-15">Aqua</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-yellow g-mr-10 g-mb-15">Yellow</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-cyan g-mr-10 g-mb-15">Cyan</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-teal g-mr-10 g-mb-15">Teal</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-brown g-mr-10 g-mb-15">Brown</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-bluegray g-mr-10 g-mb-15">Blue Gray</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-mr-10 g-mb-15">Dark Gray</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-black g-mr-10 g-mb-15">Black</a>
                </div>
              </div>

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

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

          <!-- Skew -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Skew</h3>
              <p>Extend the <strong>default buttons</strong> with
                <code class="text-nowrap">u-btn-skew</code> class and use
                <code class="text-nowrap">u-btn-skew__inner</code> for the inner content.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-skew u-btn-primary g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Primary</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-red g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-lightred g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Light Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-darkred g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-blue g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Blue</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-indigo g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Indigo</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-purple g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Purple</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-darkpurple g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Purple</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-pink g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Pink</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-orange g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Orange</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-deeporange g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Deep Orange</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-aqua g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Aqua</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-yellow g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Yellow</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-cyan g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Cyan</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-teal g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Teal</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-brown g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Brown</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-bluegray g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Blue Gray</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-darkgray g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Gray</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-black g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Black</span>
                  </a>
                </div>
              </div>

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

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

          <!-- Skew Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Skew Outline</h3>
              <p>Extend the <strong>default outline buttons</strong> with
                <code class="text-nowrap">u-btn-skew</code> class and use
                <code class="text-nowrap">u-btn-skew__inner</code> for the inner content.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-primary g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Primary</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-red g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-lightred g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Light Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkred g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Red</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-blue g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Blue</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-indigo g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Indigo</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-purple g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Purple</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkpurple g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Purple</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-pink g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Pink</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-orange g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Orange</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-deeporange g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Deep Orange</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-aqua g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Aqua</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-yellow g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Yellow</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-cyan g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Cyan</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-teal g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Teal</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-brown g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Brown</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-bluegray g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Blue Gray</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Dark Gray</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-black g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Black</span>
                  </a>
                </div>
              </div>

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

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

          <!-- Gradient -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gradient</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-gradient-v1 g-mr-10 g-mb-15">Gradient v1</a>
                  <a href="#" class="btn btn-md u-btn-gradient-v2 g-mr-10 g-mb-15">Gradient v2</a>
                </div>
              </div>

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

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

          <!-- Gradient Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gradient Outline</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-outline-gradient-v1 g-mr-10 g-mb-15">Gradient v1</a>
                  <a href="#" class="btn btn-md u-btn-outline-gradient-v2 g-mr-10 g-mb-15">Gradient v2</a>
                </div>
              </div>

              {% set contentTarget = "#shortcode9" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Gradient Outline -->
        </div>
      </section>
      <!-- End Button Types -->

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

      <!-- Button Hover Effects -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Hover Effects</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Hover v1 -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Hover v1</h3>
              <p>Just add a class
                <code class="text-nowrap">u-btn-hover-v1-*</code> * is any numbers from 1 to 4 e.g.
                <code class="text-nowrap">u-btn-hover-v1-4</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v1-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v1-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v1-3 g-mr-10 g-mb-15">Hover v3</a>
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v1-4 g-mr-10 g-mb-15">Hover v4</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v1-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v1-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v1-3 g-mr-10 g-mb-15">Hover v3</a>
                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v1-4 g-mr-10 g-mb-15">Hover v4</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v1-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v1-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v1-3 g-mr-10 g-mb-15">Hover v3</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v1-4 g-mr-10 g-mb-15">Hover v4</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v1-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v1-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v1-3 g-mr-10 g-mb-15">Hover v3</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v1-4 g-mr-10 g-mb-15">Hover v4</a>
                </div>
              </div>

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

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

          <!-- Hover v2 -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Hover v2</h3>
              <p>Just add a class <code class="text-nowrap">u-btn-hover-v2-1</code> or
                <code class="text-nowrap">u-btn-hover-v2-2</code> to activate hover effect.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v2-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-primary u-btn-hover-v2-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v2-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray u-btn-hover-v2-2 g-mr-10 g-mb-15">Hover v2</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v2-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-outline-primary u-btn-hover-v2-2 g-mr-10 g-mb-15">Hover v2</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v2-1 g-mr-10 g-mb-15">Hover v1</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray u-btn-hover-v2-2 g-mr-10 g-mb-15">Hover v2</a>
                </div>
              </div>

              {% set contentTarget = "#shortcode11" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Hover v2 -->
        </div>
      </section>
      <!-- End Button Hover Effects -->

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

      <!-- Button Border Sizes -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Border Sizes</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default Outline</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-outline-primary g-mr-10 g-mb-15">Default</a>
                  <a href="#" class="btn btn-md u-btn-outline-cyan g-brd-2 g-mr-10 g-mb-15">Border 2px</a>
                  <a href="#" class="btn btn-md u-btn-outline-purple g-brd-3 g-mr-10 g-mb-15">Border 3px</a>
                  <a href="#" class="btn btn-md u-btn-outline-indigo g-brd-4 g-mr-10 g-mb-15">Border 4px</a>
                  <a href="#" class="btn btn-md u-btn-outline-pink g-brd-5 g-mr-10 g-mb-15">Border 5px</a>
                  <a href="#" class="btn btn-md u-btn-outline-yellow g-brd-6 g-mr-10 g-mb-15">Border 6px</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">Default</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-brd-2 g-mr-10 g-mb-15">Border 2px</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-brd-3 g-mr-10 g-mb-15">Border 3px</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-brd-4 g-mr-10 g-mb-15">Border 4px</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-brd-5 g-mr-10 g-mb-15">Border 5px</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-brd-6 g-mr-10 g-mb-15">Border 6px</a>
                </div>
              </div>

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

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

          <!-- Inset Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inset Outline</h3>
              <p>Extend the default outline buttons with <code class="text-nowrap">u-btn-inset</code> class.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode13">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-primary g-mr-10 g-mb-15">Default</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-bluegray g-brd-2 g-mr-10 g-mb-15">Border 2px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-red g-brd-3 g-mr-10 g-mb-15">Border 3px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-blue g-brd-4 g-mr-10 g-mb-15">Border 4px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-brown g-brd-5 g-mr-10 g-mb-15">Border 5px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-deeporange g-brd-6 g-mr-10 g-mb-15">Border 6px</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-mr-10 g-mb-15">Default</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-brd-2 g-mr-10 g-mb-15">Border 2px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-brd-3 g-mr-10 g-mb-15">Border 3px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-brd-4 g-mr-10 g-mb-15">Border 4px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-brd-5 g-mr-10 g-mb-15">Border 5px</a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-darkgray g-brd-6 g-mr-10 g-mb-15">Border 6px</a>
                </div>
              </div>

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

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

          <!-- Skew Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Skew Outline</h3>
              <p>Add <code class="text-nowrap">u-btn-skew</code> class and
                <code class="text-nowrap">use u-btn-skew__inner</code> for the inner content.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode14">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-primary g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Default</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-aqua g-brd-2 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 2px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-orange g-brd-3 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 4px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-bluegray g-brd-3 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 5px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-teal g-brd-5 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 3px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkpurple g-brd-6 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 6px</span>
                  </a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Default</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-brd-2 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 2px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-brd-3 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 3px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-brd-4 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 4px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-brd-5 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 5px</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-outline-darkgray g-brd-6 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">Border 6px</span>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode14" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Skew Outline -->
        </div>
      </section>
      <!-- End Button Border Sizes -->

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

      <!-- Button Sizes -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Sizes</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default and Outline -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default Buttons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode15">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xs u-btn-primary g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-primary g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-primary g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-primary g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-primary g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-primary g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-primary g-mr-10 g-mb-15">Largest</a>

                  <div class="g-mb-10"></div>

                  <a href="#" class="btn btn-xs u-btn-darkgray g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-darkgray g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-darkgray g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-darkgray g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-darkgray g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-xs u-btn-outline-darkgray g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkgray g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-outline-darkgray g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-outline-darkgray g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-outline-darkgray g-mr-10 g-mb-15">Largest</a>
                </div>
              </div>

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

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

          <!-- Block Level -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Block Level Buttons</h3>
              <p>Just add a class
                <code class="text-nowrap">btn-block</code> to make them block level view to any buttons</p>
            </div>
            <div class="col-md-9">
              <div class="row">
                <!-- Default -->
                <div class="col-md-6">
                  <div id="shortcode16">
                    <div class="shortcode-html">
                      <a href="#" class="btn btn-xxl btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-xl btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-lg btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-md btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-sm btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-xs btn-block u-btn-darkgray g-mb-10">Block Level Button</a>
                    </div>
                  </div>

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

                <!-- Default Outline -->
                <div class="col-md-6">
                  <div id="shortcode17">
                    <div class="shortcode-html">
                      <a href="#" class="btn btn-xxl btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-xl btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-lg btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-md btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-sm btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                      <a href="#" class="btn btn-xs btn-block u-btn-outline-darkgray g-mb-10">Block Level Button</a>
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode17" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
                <!-- End Default Outline -->
              </div>
            </div>
          </div>
          <!-- End Block Level -->
        </div>
      </section>
      <!-- End Button Sizes -->

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

      <!-- Button Angles -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Angles</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- No Rounded -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">No Rounded</h3>
              <p>Add a class <code class="text-nowrap">rounded-0</code> to make no rounded buttons.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode18">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xs u-btn-primary rounded-0 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-primary rounded-0 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-primary rounded-0 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-primary rounded-0 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-primary rounded-0 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-primary rounded-0 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-primary rounded-0 g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-darkgray rounded-0 g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-outline-darkgray rounded-0 g-mr-10 g-mb-15">Largest</a>
                </div>
              </div>

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

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

          <!-- Semi Rounded (Default) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Semi Rounded (Default)</h3>
              <p>It is default mode, you do not need to add any classes.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode19">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xs u-btn-primary g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-primary g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-primary g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-primary g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-primary g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-primary g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-primary g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-darkgray g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-darkgray g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-darkgray g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-darkgray g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-darkgray g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-outline-darkgray g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkgray g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-outline-darkgray g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-outline-darkgray g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-outline-darkgray g-mr-10 g-mb-15">Largest</a>
                </div>
              </div>

              {% set contentTarget = "#shortcode19" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Semi Rounded (Default) -->

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

          <!-- Pill -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Pill</h3>
              <p>Add a class <code class="text-nowrap">g-rounded-50</code> to make pill buttons. For
                <strong>Inset</strong> buttons you should add an adition class
                <code class="text-nowrap">u-btn-inset--rounded</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode20">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xs u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-primary g-rounded-50 g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-darkgray g-rounded-50 g-mr-10 g-mb-15">Largest</a>

                  <div class="g-my-5"></div>

                  <a href="#" class="btn btn-xs u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Extra Small</a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Small</a>
                  <a href="#" class="btn u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Regular</a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Medium</a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Large</a>
                  <a href="#" class="btn btn-xl u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Extra Large</a>
                  <a href="#" class="btn btn-xxl u-btn-outline-darkgray g-rounded-50 g-mr-10 g-mb-15">Largest</a>
                </div>
              </div>

              {% set contentTarget = "#shortcode20" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Pill -->
        </div>
      </section>
      <!-- End Button Angles -->

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

      <!-- Button Icons -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Icons</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default</h3>
              <p>You may use any icons with the all buttons types and modes such as colors, sizes, angles etc.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode21">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xs u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-sm u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-lg u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-xl u-btn-primary g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-xs u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-sm u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-lg u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-xl u-btn-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-xs u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-lg u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                  <a href="#" class="btn btn-xl u-btn-outline-darkgray g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-5"></i>
                    Button Icon
                  </a>
                </div>
              </div>

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

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

          <!-- Without Text -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Without Text</h3>
              <p>Also here, you may use any icons with the all buttons types and modes such as colors, sizes, angles etc.</p>
            </div>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-6">
                  <div id="shortcode22">
                    <div class="shortcode-html">
                      <a href="#" class="btn btn-xs u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-align-right"></i>
                      </a>
                      <a href="#" class="btn btn-sm u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-line-chart"></i>
                      </a>
                      <a href="#" class="btn u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-list"></i>
                      </a>
                      <a href="#" class="btn btn-md u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-area-chart"></i>
                      </a>
                      <a href="#" class="btn btn-lg u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-clock-o"></i>
                      </a>
                      <a href="#" class="btn btn-xl u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-camera-retro"></i>
                      </a>
                      <a href="#" class="btn btn-xxl u-btn-primary g-mr-10 g-mb-15">
                        <i class="fa fa-database"></i>
                      </a>

                      <div class="g-mb-10"></div>

                      <a href="#" class="btn btn-xs u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-align-right"></i>
                      </a>
                      <a href="#" class="btn btn-sm u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-line-chart"></i>
                      </a>
                      <a href="#" class="btn u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-list"></i>
                      </a>
                      <a href="#" class="btn btn-md u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-area-chart"></i>
                      </a>
                      <a href="#" class="btn btn-lg u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-clock-o"></i>
                      </a>
                      <a href="#" class="btn btn-xl u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-camera-retro"></i>
                      </a>
                      <a href="#" class="btn btn-xxl u-btn-outline-primary g-mr-10 g-mb-15">
                        <i class="fa fa-database"></i>
                      </a>
                    </div>
                  </div>

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

                <div class="col-md-6">
                  <div id="shortcode23">
                    <div class="shortcode-html">
                      <a href="#" class="btn btn-xs u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-align-right"></i>
                      </a>
                      <a href="#" class="btn btn-sm u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-line-chart"></i>
                      </a>
                      <a href="#" class="btn u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-list"></i>
                      </a>
                      <a href="#" class="btn btn-md u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-area-chart"></i>
                      </a>
                      <a href="#" class="btn btn-lg u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-clock-o"></i>
                      </a>
                      <a href="#" class="btn btn-xl u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-camera-retro"></i>
                      </a>
                      <a href="#" class="btn btn-xxl u-btn-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-database"></i>
                      </a>

                      <div class="g-mb-10"></div>

                      <a href="#" class="btn btn-xs u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-align-right"></i>
                      </a>
                      <a href="#" class="btn btn-sm u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-line-chart"></i>
                      </a>
                      <a href="#" class="btn u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-list"></i>
                      </a>
                      <a href="#" class="btn btn-md u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-area-chart"></i>
                      </a>
                      <a href="#" class="btn btn-lg u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-clock-o"></i>
                      </a>
                      <a href="#" class="btn btn-xl u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-camera-retro"></i>
                      </a>
                      <a href="#" class="btn btn-xxl u-btn-outline-darkgray g-mr-10 g-mb-15">
                        <i class="fa fa-database"></i>
                      </a>
                    </div>
                  </div>

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

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

          <!-- Min Width -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Min Width</h3>
              <p>It can be achived by global min width classes e.g.
                <code class="text-nowrap">g-width-170</code> or padding classes e.g.
                <code class="text-nowrap">g-px-80</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode24">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-area-chart"></i>
                    <span class="sr-only">Area Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Table Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-pie-chart"></i>
                    <span class="sr-only">Pie Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-clone"></i>
                    <span class="sr-only">Clone Icon</span>
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-area-chart"></i>
                    <span class="sr-only">Area Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Table Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-pie-chart"></i>
                    <span class="sr-only">Pie Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-clone"></i>
                    <span class="sr-only">Clone Icon</span>
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-area-chart"></i>
                    <span class="sr-only">Area Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-th"></i>
                    <span class="sr-only">Table Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-pie-chart"></i>
                    <span class="sr-only">Pie Chart Icon</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-clone"></i>
                    <span class="sr-only">Clone Icon</span>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode24" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Min Width -->

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

          <!-- Spinners -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Spinners</h3>
              <p>Spinner examples are based on
                <strong>font-awesome icons</strong> and you can use them with the class <code>fa-spin</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode25">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-spinner fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-cog fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-refresh fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-spinner fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-cog fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-refresh fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>

                  <div class="g-my-10"></div>

                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-spinner fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-cog fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-darkgray g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-refresh fa-spin"></i>
                    <span class="sr-only">Loading...</span>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode25" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Spinners -->
        </div>
      </section>
      <!-- End Button Icons -->

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

      <!-- Button Mixed Groupes -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Mixed Groupes</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Inset Pill Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Inset Pill Buttons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode26">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-primary g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-red g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-lightred g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-blue g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-indigo g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-purple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-darkpurple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-pink g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-orange g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-deeporange g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-aqua g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-yellow g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-cyan g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-teal g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-brown g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-bluegray g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-darkgray g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-black g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Pill
                  </a>
                </div>
              </div>

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

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

          <!-- Skewed Pill Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Skewed Pill Buttons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode27">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-skew u-btn-primary g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-red g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-lightred g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-blue g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-indigo g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-purple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-darkpurple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-pink g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-orange g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-deeporange g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-aqua g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-yellow g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-cyan g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-teal g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-brown g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-bluegray g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-darkgray g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-skew u-btn-black g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode27" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Skewed Pill Buttons -->
        </div>
      </section>
      <!-- End Button Mixed Groupes -->

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

      <!-- Button Mixed Examples -->
      <section class="g-py-50">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Button Mixed Examples</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Small Sizes (Mixed) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Small Sizes (Mixed)</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode28">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-sm u-btn-pink g-font-weight-600 g-letter-spacing-0_5 text-uppercase rounded-0 g-mr-10 g-mb-15"> Flat
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-black u-btn-hover-v1-1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-3 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Bordered
                  </a>
                  <a href="#" class="btn btn-sm u-btn-inset u-btn-cyan g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Inset Button
                  </a>
                  <a href="#" class="btn btn-sm u-btn-3d u-btn-indigo g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    3d Button
                  </a>
                  <a href="#" class="btn btn-sm u-btn-gradient-v2 g-width-170 g-mr-10 g-mb-15">Min Width</a>
                  <a href="#" class="btn btn-sm u-btn-darkpurple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Rounded
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-teal g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-4 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Rounded
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-lightred u-btn-hover-v2-1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 rounded-0 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Flat Button
                  </a>
                  <a href="#" class="btn btn-sm u-btn-bluegray u-btn-3d g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15"> Rounded
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-darkred u-btn-hover-v2-2 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-width-170 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Min Width
                  </a>
                  <a href="#" class="btn btn-sm u-btn-deeporange u-btn-skew u-btn-hover-v2-1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-px-20 g-mx-5 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      Skew Rounded
                      <i class="fa fa-check-circle g-ml-3"></i>
                    </span>
                  </a>
                  <a href="#" class="btn btn-sm u-btn-outline-red g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-rounded-5 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-ml-3"></i>
                    Rounded
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode28" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Small Sizes (Mixed) -->

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

          <!-- Medium Sizes (Mixed) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Medium Sizes (Mixed)</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode29">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-gradient-v1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase rounded-0 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Flat Style
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-teal g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 rounded-0 g-mr-10 g-mb-15"> Flat Style
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                  <a href="#" class="btn btn-md u-btn-primary u-btn-hover-v1-4 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Rounded
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-pink u-btn-hover-v2-2 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15"> Rounded
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                  <a href="#" class="btn btn-md u-btn-3d u-btn-blue g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    3d Button
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-outline-black g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15"> Inset Hover
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                  <a href="#" class="btn btn-md u-btn-inset u-btn-inset--rounded u-btn-darkpurple g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Rounded
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-brown u-btn-hover-v1-1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase rounded-0 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Flat Style
                  </a>
                  <a href="#" class="btn btn-md u-btn-black u-btn-hover-v1-2 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 rounded-0 g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Flat Black
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-cyan u-btn-hover-v1-2 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-10 g-mr-10 g-mb-15"> Semi Rounded
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode29" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Medium Sizes (Mixed) -->

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

          <!-- Medium Sizes (Skewed) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Medium Sizes (Skewed)</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode30">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-md u-btn-outline-black u-btn-skew g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Outline
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-red u-btn-skew g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Button
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-purple u-btn-skew u-btn-inset u-btn-hover-v1-4 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Inset
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-yellow u-btn-skew g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Rounded
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-pink u-btn-3d u-btn-skew u-btn-hover-v2-1 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-5 g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew 3d
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-gradient-v1 u-btn-skew g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Gradient
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-outline-indigo u-btn-skew u-btn-hover-v1-3 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Outline
                    </span>
                  </a>
                  <a href="#" class="btn btn-md u-btn-teal u-btn-skew u-btn-hover-v2-2 g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15">
                    <span class="u-btn-skew__inner">
                      <i class="fa fa-check-circle g-mr-3"></i>
                      Skew Button
                    </span>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode30" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Medium Sizes (Skewed) -->

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

          <!-- Extra Large Sizes -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Extra Large Sizes</h3>
              <p>Add a class <code>u-btn-content</code> when there are large texts in buttons.</p>
            </div>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-6">
                  <div id="shortcode31">
                    <div class="shortcode-html">
                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-primary u-btn-content g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                        <i class="fa fa-chrome pull-left g-font-size-42 g-mr-10"></i>
                        <span class="float-right text-left">
                          Let's Use this Button
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                        </span>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-outline-primary u-btn-content g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                        <i class="fa fa-firefox pull-left g-font-size-42 g-mr-10"></i>
                        <span class="float-right text-left">
                          Let's Use this Button
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                        </span>
                      </a>
                      <!-- End Example Button -->
                    </div>
                  </div>

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

                <div class="col-md-6">
                  <div id="shortcode32">
                    <div class="shortcode-html">
                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-black u-btn-content g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                        <i class="fa fa-android fa-2 pull-left g-font-size-42 g-mr-15"></i>
                        <span class="float-right text-left">
                          Let's Use this Button
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                        </span>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-outline-black u-btn-content g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-mr-10 g-mb-15">
                        <i class="fa fa-apple pull-left g-font-size-42 g-mr-15"></i>
                        <span class="float-right text-left">
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                          Let's Use this Button
                        </span>
                      </a>
                      <!-- End Example Button -->
                    </div>
                  </div>

                  {% set contentTarget = "#shortcode32" %}
                  {% set modalID = "#modalMarkup" %}
                  {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
                </div>
              </div>
            </div>
          </div>
          <!-- End Extra Large Sizes -->

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

          <!-- Extra Large Sizes -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Extra Large Sizes</h3>
            </div>
            <div class="col-md-9">
              <div class="row">
                <div class="col-md-6">
                  <div id="shortcode33">
                    <div class="shortcode-html">
                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-bluegray u-btn-hover-v1-4 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Register Today
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                        </span>
                        <i class="fa fa-github float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-darkpurple u-btn-hover-v1-3 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Purchase Now
                          <span class="d-block g-font-size-11">and Get 30 GB for free</span>
                        </span>
                        <i class="fa fa-comments float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-pink u-btn-hover-v2-2 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Forever Free
                          <span class="d-block g-font-size-11">creat your account today</span>
                        </span>
                        <i class="fa fa-pinterest float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->
                    </div>
                  </div>

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

                <div class="col-md-6">
                  <div id="shortcode34">
                    <div class="shortcode-html">
                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-outline-bluegray u-btn-hover-v1-4 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Register Today
                          <span class="d-block g-font-size-11">30 days free for all users</span>
                        </span>
                        <i class="fa fa-github float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-outline-darkpurple u-btn-hover-v1-3 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Purchase Now
                          <span class="d-block g-font-size-11">and Get 30 GB for free</span>
                        </span>
                        <i class="fa fa-comments float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->

                      <!-- Example Button -->
                      <a href="#" class="btn btn-xl u-btn-outline-pink u-btn-hover-v2-2 g-letter-spacing-0_5 text-uppercase g-rounded-50 g-px-30 g-mr-10 g-mb-15">
                        <span class="pull-left text-left">
                          Forever Free
                          <span class="d-block g-font-size-11">creat your account today</span>
                        </span>
                        <i class="fa fa-pinterest float-right g-font-size-42 g-ml-15"></i>
                      </a>
                      <!-- End Example Button -->
                    </div>
                  </div>

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

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

          <!-- Extra Large Sizes (Bootstrap Colors) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Extra Large Sizes (Bootstrap Colors)</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode35">
                <div class="shortcode-html">
                  <!-- Example Button -->
                  <a href="#" class="btn btn-xl btn-danger g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From App Store</span>
                    </span>
                    <i class="fa fa-apple float-right g-font-size-32 g-ml-15"></i>
                  </a>

                  <a href="#" class="btn btn-xl btn-success g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From Play Store</span>
                    </span>
                    <i class="fa fa-android float-right g-font-size-32 g-ml-15"></i>
                  </a>

                  <a href="#" class="btn btn-xl btn-primary g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From Windows Store</span>
                    </span>
                    <i class="fa fa-windows float-right g-font-size-32 g-ml-15"></i>
                  </a>
                  <!-- End Example Button -->

                  <!-- Example Button -->
                  <a href="#" class="btn btn-xl btn-outline-danger g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From App Store</span>
                    </span>
                    <i class="fa fa-apple float-right g-font-size-32 g-ml-15"></i>
                  </a>

                  <a href="#" class="btn btn-xl btn-outline-success g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From Play Store</span>
                    </span>
                    <i class="fa fa-android float-right g-font-size-32 g-ml-15"></i>
                  </a>

                  <a href="#" class="btn btn-xl btn-outline-primary g-font-weight-600 g-letter-spacing-0_5 text-uppercase text-left rounded-0 g-mr-10 g-mb-15">
                    <span class="pull-left">
                      Download App
                      <span class="d-block g-font-size-11">From Windows Store</span>
                    </span>
                    <i class="fa fa-windows float-right g-font-size-32 g-ml-15"></i>
                  </a>
                  <!-- End Example Button -->
                </div>
              </div>

              {% set contentTarget = "#shortcode35" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Extra Large Sizes (Bootstrap Colors) -->

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

          <!-- Mixed Sizes and Styles (Block Level) -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Mixed Sizes and Styles (Block Level)</h3>
              <p>Add a class <code>u-btn-content</code> when there are large texts in buttons.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode36">
                <div class="shortcode-html">
                  <div class="row">
                    <!-- Flat Buttons -->
                    <div class="col-md-6">
                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-primary u-btn-content g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- End XXL Button -->
                    </div>
                    <!-- End Flat Buttons -->

                    <!-- Outline Button -->
                    <div class="col-md-6">
                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-black u-btn-inset u-btn-content g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- End XXL Button -->
                    </div>
                    <!-- End Outline Button -->
                  </div>

                  <div class="row">
                    <!-- 3D Buttons -->
                    <div class="col-md-6">
                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-teal g-font-weight-600 u-btn-content g-letter-spacing-0_5 text-uppercase u-btn-3d g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- XXL Button -->

                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-blue g-font-weight-600 u-btn-content g-letter-spacing-0_5 text-uppercase u-btn-3d g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- XXL Button -->
                    </div>
                    <!-- End 3D Buttons -->

                    <!-- Inset Buttons -->
                    <div class="col-md-6">
                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-inset u-btn-purple g-font-weight-600 u-btn-content g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- XXL Button -->

                      <!-- XXL Button -->
                      <a href="#" class="btn btn-block btn-xxl u-btn-inset u-btn-pink g-font-weight-600 u-btn-content g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15"> Let's Use this Button
                        <span class="d-block g-font-size-11">30 days free for all users</span>
                      </a>
                      <!-- XXL Button -->
                    </div>
                    <!-- End Inset Buttons -->
                  </div>
                </div>
              </div>

              {% set contentTarget = "#shortcode36" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Mixed Sizes and Styles (Block Level) -->

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

          <!-- Block Level Button -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Block Level Button</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode37">
                <div class="shortcode-html">
                  <a href="#" class="btn btn-xl btn-block u-btn-outline-primary g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-3 rounded-0 g-mr-10 g-mb-15"> Block Level Button</a>
                  <a href="#" class="btn btn-xl btn-block u-btn-3d u-btn-darkgray g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-mr-10 g-mb-15">
                    <i class="fa fa-check-circle g-mr-3"></i>
                    Block Level Button
                  </a>
                  <a href="#" class="btn btn-xl btn-block u-btn-outline-black g-font-weight-600 g-letter-spacing-0_5 text-uppercase g-brd-2 g-rounded-50 g-mr-10 g-mb-15"> Block Level Button
                    <i class="fa fa-check-circle g-ml-3"></i>
                  </a>
                </div>
              </div>

              {% set contentTarget = "#shortcode37" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Block Level Button -->
        </div>
      </section>
      <!-- End Button Mixed Examples -->

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

      <!-- Bootstrap Buttons -->
      <section class="g-pt-50 g-pb-100">
        <div class="container">
          <!-- Heading -->
          <header class="g-mb-80">
            <div class="u-heading-v6-2 text-uppercase">
              <h2 class="h4 u-heading-v6__title g-font-weight-300">Bootstrap Buttons</h2>
            </div>
            <div class="g-pl-90">
              <p>Nulla ipsum dolor sit amet, consectetur adipiscing elitut eleifend nisl. In hac habitasse platea dictumst. Curabitur hendrerit, Proin et augue vel nisi rhoncus tincidunt lectus in bibendum pellentesque, lacus eros rutrum ligula.</p>
            </div>
          </header>
          <!-- End Heading -->

          <!-- Default Examples -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default Examples</h3>
              <p>Just add a class
                <code class="text-nowrap">u-btn-hover-v1-*</code> * is any numbers from 1 to 4 e.g.
                <code class="text-nowrap">u-btn-hover-v1-4</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode38">
                <div class="shortcode-html">
                  <button type="button" class="btn btn-primary g-mr-10 g-mb-15">Primary</button>
                  <button type="button" class="btn btn-secondary g-mr-10 g-mb-15">Secondary</button>
                  <button type="button" class="btn btn-success g-mr-10 g-mb-15">Success</button>
                  <button type="button" class="btn btn-info g-mr-10 g-mb-15">Info</button>
                  <button type="button" class="btn btn-warning g-mr-10 g-mb-15">Warning</button>
                  <button type="button" class="btn btn-danger g-mr-10 g-mb-15">Danger</button>
                </div>
              </div>

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

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

          <!-- Outline Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Outline Buttons</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode39">
                <div class="shortcode-html">
                  <button type="button" class="btn btn-outline-primary g-mr-10 g-mb-15">Primary</button>
                  <button type="button" class="btn btn-outline-secondary g-mr-10 g-mb-15">Secondary</button>
                  <button type="button" class="btn btn-outline-success g-mr-10 g-mb-15">Success</button>
                  <button type="button" class="btn btn-outline-info g-mr-10 g-mb-15">Info</button>
                  <button type="button" class="btn btn-outline-warning g-mr-10 g-mb-15">Warning</button>
                  <button type="button" class="btn btn-outline-danger g-mr-10 g-mb-15">Danger</button>
                </div>
              </div>

              {% set contentTarget = "#shortcode39" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Outline Buttons -->

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

          <!-- Outline Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Button Sizes</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode40">
                <div class="shortcode-html">
                  <button type="button" class="btn btn-primary btn-lg g-mr-10 g-mb-15">Large button</button>
                  <button type="button" class="btn btn-primary g-mr-10 g-mb-15">Large button</button>
                  <button type="button" class="btn btn-primary btn-sm g-mr-10 g-mb-15">Large button</button>
                </div>
              </div>

              {% set contentTarget = "#shortcode40" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Outline Buttons -->

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

          <!-- Block Level Buttons -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Block Level</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode41">
                <div class="shortcode-html">
                  <button type="button" class="btn btn-primary btn-lg btn-block g-mr-10 g-mb-15">Block level button</button>
                  <button type="button" class="btn btn-secondary btn-lg btn-block g-mr-10 g-mb-15">Block level button</button>
                </div>
              </div>

              {% set contentTarget = "#shortcode41" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Block Level Buttons -->

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

          <!-- Single Button Dropdowns -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Single Button Dropdowns</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode42">
                <div class="shortcode-html">
                  <!-- Secondary Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Action
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Secondary Button -->

                  <!-- Danger Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Action
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Danger Button -->

                  <!-- Primary Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Action
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Primary Button -->

                  <!-- Success Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Action
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Success Button -->
                </div>
              </div>

              {% set contentTarget = "#shortcode42" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Single Button Dropdowns -->

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

          <!-- Split Button Dropdowns -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Split Button Dropdowns</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode43">
                <div class="shortcode-html">
                  <!-- Secondary Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-secondary">Action</button>
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Secondary Button -->

                  <!-- Danger Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-danger">Action</button>
                    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Danger Button -->

                  <!-- Primary Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-primary">Action</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Primary Button -->

                  <!-- Success Button -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-success">Action</button>
                    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Success Button -->
                </div>
              </div>

              {% set contentTarget = "#shortcode43" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Split Button Dropdowns -->

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

          <!-- Split Button Dropup -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Split Button Dropup</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode44">
                <div class="shortcode-html">
                  <!-- Dropup Secondary Button -->
                  <div class="btn-group dropup g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-secondary">Dropup</button>
                    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Dropup Secondary Button -->

                  <!-- Dropup Primary Button -->
                  <div class="btn-group dropup g-mr-10 g-mb-15">
                    <button type="button" class="btn btn-primary">Dropup</button>
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Dropup Primary Button -->
                </div>
              </div>

              {% set contentTarget = "#shortcode44" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Split Button Dropup -->

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

          <!-- Single Button Dropdowns Sizes -->
          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Single Button Dropdowns Sizes</h3>
            </div>
            <div class="col-md-9">
              <div id="shortcode45">
                <div class="shortcode-html">
                  <!-- Large Button Group -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button class="btn btn-primary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Large button
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Large Button Group -->

                  <!-- Small Button Group -->
                  <div class="btn-group g-mr-10 g-mb-15">
                    <button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Small button
                    </button>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="#">Action</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                  </div>
                  <!-- End Small Button Group -->
                </div>
              </div>

              {% set contentTarget = "#shortcode45" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
          <!-- End Single Button Dropdowns Sizes -->
        </div>
      </section>
      <!-- End Bootstrap Buttons -->
    </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>
