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

{% 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>
      <!-- Bootstrap Blockquotes -->
      <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">Bootstrap Blockquotes</h2>
            </div>
            <div class="g-pl-90">
              <p>For quoting blocks of content from another source within your document. Wrap
                <code>&lt;blockquote class="blockquote"&gt;</code> around any HTML as the quote. You may check the offecial Bootstrap documentation for more details from here
                <a href="#">Bootstrap Blockquotes</a>
              </p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Default</h3>
              <p>Includ the content into <code>&lt;blockquote&gt;</code> tag with the class <code>blockquote</code>
              </p>
            </div>

            <div class="col-md-9">
              <div id="shortcode1">
                <div class="shortcode-html">
                  <!-- Default Blockquotes -->
                  <blockquote class="blockquote g-mb-30">
                    <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  </blockquote>
                  <!-- End Default Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Naming a source</h3>
              <p>Includ naming in <code>&lt;footer&gt;</code> tag with the class <code>blockquote-footer</code>
              </p>
            </div>

            <div class="col-md-9">
              <div id="shortcode2">
                <div class="shortcode-html">
                  <!-- Naming A Source Blockquotes -->
                  <blockquote class="blockquote g-mb-30">
                    <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Naming A Source Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Reverse layout</h3>
              <p>Add an additional class <code>blockquote-reverse</code> to the <code>&lt;blockquote&gt;</code> tag.
              </p>
            </div>
            <div class="col-md-9">
              <div id="shortcode3">
                <div class="shortcode-html">
                  <!-- Reverse Layout Blockquotes -->
                  <blockquote class="blockquote blockquote-reverse g-mb-30">
                    <p class="m-b-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Reverse Layout Blockquotes -->
                </div>
              </div>

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

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

      <!-- Unify Blockquotes -->
      <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">Unify Blockquotes</h2>
            </div>
            <div class="g-pl-90">
              <p>Unify Blockquotes are extensions of the default Bootstrap Blockquotes. To extend, it uses Unify's global classes.</p>
            </div>
          </header>
          <!-- End Heading -->

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Border primary</h3>
              <p>Add some additional global classes <code>g-brd-2</code> and <code>g-brd-primary</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode4">
                <div class="shortcode-html">
                  <!-- Border Primary Blockquotes -->
                  <blockquote class="blockquote g-brd-2 g-brd-primary g-font-size-16 g-mb-30">
                    <p>If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Border Primary Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Border primary on hover</h3>
              <p>Add some additional global classes <code>g-brd-2</code> and <code>g-brd-primary--hover</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode5">
                <div class="shortcode-html">
                  <!-- Border Primary on Hover Blockquotes -->
                  <blockquote class="blockquote g-brd-2 g-brd-primary--hover g-font-size-16 g-transition-0_2 g-mb-30">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing duis mollis, est non commodo luctus elit posuere erat a ante. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis lorem ipsum dolor sit amet, consectetur adipiscing</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Border Primary on Hover Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Reverse border black</h3>
              <p>Add an additional bootstrap classes <code>blockquote-reverse</code> and global class
                <code>g-brd-black</code> black border color</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode6">
                <div class="shortcode-html">
                  <!-- Reverse Border Black Blockquotes -->
                  <blockquote class="blockquote blockquote-reverse g-brd-2 g-brd-black g-font-size-16 g-mb-30">
                    <p>That's been one of my mantras - focus and simplicity. Simple can be harder than complex: You have to work hard to get your thinking clean to make it simple. But it's worth it in the end because once you get there, you can move mountains</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Reverse Border Black Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Reverse border black on hover</h3>
              <p>Add an additional bootstrap classes <code>blockquote-reverse</code> and global class
                <code>g-brd-black--hover</code> black border color</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode7">
                <div class="shortcode-html">
                  <!-- Reverse Border Black on Hover Blockquotes -->
                  <blockquote class="blockquote blockquote-reverse g-brd-2 g-brd-black--hover g-font-size-16 g-transition-0_2 g-mb-30">
                    <p>If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Reverse Border Black on Hover Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Large size</h3>
              <p>Add some bootstrap utility and global classes like <code>text-uppercase</code> and
                <code>g-font-size-22</code></p>
            </div>
            <div class="col-md-9">
              <div id="shortcode8">
                <div class="shortcode-html">
                  <!-- Large Size Blockquote -->
                  <blockquote class="blockquote g-brd-2 g-brd-primary--hover text-uppercase g-font-size-22 g-transition-0_2 g-mb-30">
                    <p>The best ideas come as jokes. Make your thinking as funny as possible and use them in your projects.</p>
                    <footer class="blockquote-footer">Another Example</footer>
                  </blockquote>
                  <!-- End Large Size Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Reversed large size</h3>
              <p>Add an additional class <code>blockquote-reverse</code> to the large size blockquote example.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode9">
                <div class="shortcode-html">
                  <!-- Reversed Large Size Blockquotes -->
                  <blockquote class="blockquote blockquote-reverse g-brd-2 g-brd-primary--hover text-uppercase g-font-size-22 g-transition-0_2 g-mb-30">
                    <p>The best ideas come as jokes. Make your thinking as funny as possible and use them in your projects.</p>
                    <footer class="blockquote-footer">Another Example</footer>
                  </blockquote>
                  <!-- End Reversed Large Size Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Gray colored examples</h3>
              <p>Add some global classes <code>g-bg-gray-light-v5</code> for backfround color and
                <code>g-pa-40</code> for padding spacing.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode10">
                <div class="shortcode-html">
                  <!-- Gray Colored Blockquotes -->
                  <blockquote class="blockquote g-bg-gray-light-v5 g-brd-primary g-font-size-16 g-pa-40 g-mb-30">
                    <p>If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on</p>
                    <footer class="blockquote-footer">Someone famous in
                      <cite title="Source Title">Source Title</cite>
                    </footer>
                  </blockquote>
                  <!-- End Gray Colored Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Black colored examples</h3>
              <p>Please click to the <strong>show code</strong> for more details under the blockquote example.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode11">
                <div class="shortcode-html">
                  <!-- Black Colored Blockquotes -->
                  <blockquote class="blockquote text-center g-bg-black g-color-white g-brd-left-none g-font-size-16 g-pa-40 g-mb-30">
                    <p>If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on</p>
                    <footer class="blockquote-footer g-color-white">Someone famous in
                      <cite title="Source Title">Source Title</cite></footer>
                  </blockquote>
                  <!-- End Black Colored Blockquotes -->
                </div>
              </div>

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

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

          <div class="row">
            <div class="col-md-3">
              <h3 class="h4 g-font-weight-300">Primary colored examples</h3>
              <p>Please click to the <strong>show code</strong> for more details under the blockquote example.</p>
            </div>
            <div class="col-md-9">
              <div id="shortcode12">
                <div class="shortcode-html">
                  <!-- Primary Colored Blockquotes -->
                  <blockquote class="blockquote text-center g-bg-primary g-color-white g-brd-left-none g-font-size-16 g-pa-40 g-mb-30">
                    <p>If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it. And, like any great relationship, it just gets better and better as the years roll on</p>
                    <footer class="blockquote-footer g-color-white">Someone famous in
                      <cite title="Source Title">Source Title</cite></footer>
                  </blockquote>
                  <!-- End Primary Colored Blockquotes -->
                </div>
              </div>

              {% set contentTarget = "#shortcode12" %}
              {% set modalID = "#modalMarkup" %}
              {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}
            </div>
          </div>
        </div>
      </section>
      <!-- End Unify Blockquotes -->
    </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>
