<div class="demos-list">
  <!--Navbar v1-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-navbar.svg" alt="" />
      <div class="title-meta">
        <h3>Navbar v1 Layout</h3>
        <p>With a top navigation</p>
      </div>
    </div>

    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed page</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed page</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed page</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed-sidebar.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed page</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed-v1b.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-posts-double.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-posts-double-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-posts-triple.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-posts-triple-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-profile.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed profile</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed-profile.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-profile-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed profile</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed-profile.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-slider.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed slider</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-feed-slider.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/feed-slider-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed slider</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-feed-slider.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/stories-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/stories-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/stories-story.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story post</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/stories-story-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story post</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-groups.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-groups-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-minimal.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile minimal</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-minimal-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile minimal</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile main</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile main</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile about</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile about</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-friends.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile friends</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-friends-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile friends</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/profile-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-products.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-products-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-cart.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-cart-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-checkout.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-checkout-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-payment.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/ecommerce-payment-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/options-friends.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Friends List</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-friends-grid-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/options-friends-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Friends List</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-friends-grid-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page profile</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page profile</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page about</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page about</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-community.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-community-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/pages-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Page photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-home.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-home-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-home-v2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-home-v2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-player.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Video Player</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/videos-player-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Video Player</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-home.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions home</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-questions-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-home-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions home</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-questions-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-categories.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions categories</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-questions-categories.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-categories-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions categories</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-questions-categories.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-single.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions single</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-questions-single.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-single-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions single</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-questions-single.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-stats.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions stats</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-questions-stats.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-stats-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions stats</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-questions-stats.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-settings.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions settings</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-questions-settings.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/questions-settings-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Questions settings</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-questions-settings.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/events.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Events</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-events.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/events-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Events</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-events.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/event.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Event</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-event.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/event-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Event</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-event.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/news.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">News</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-news.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/news-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">News</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-news.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/settings.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Settings</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-settings-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/settings-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Settings</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-settings-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-map-1.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-map-1-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-map-2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-map-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-map-2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-map-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-empty-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-empty-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-alert-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v1-alert-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>

  <!--Navbar v2-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-navbar.svg" alt="" />
      <div class="title-meta">
        <h3>Navbar v2 Layout</h3>
        <p>With a top navigation</p>
      </div>
    </div>

    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-sidebar.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-feed-sidebar.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-sidebar-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-feed-sidebar.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-posts-double.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-posts-double-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-posts-triple.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-posts-triple-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-slider.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed Slider</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-feed-slider.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-feed-slider-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Feed Slider</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-feed-slider.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-stories-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-stories-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-stories-story.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-stories-story-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-groups.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-groups-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-minimal.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Minimal Profile</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-minimal-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Minimal Profile</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-friends.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Friends</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-friends-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Friends</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-profile-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-products.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-products-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-cart.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-cart-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-checkout.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-checkout-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-payment.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-ecommerce-payment-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Public Page</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Public Page</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-community.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-community-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-pages-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-home.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-home-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-home-v2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-home-v2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-player.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Player</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-videos-player-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Player</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-map-1.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-map-1-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-map-2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-map-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-map-2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-map-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-empty-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-empty-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-alert-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v2-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/navbar-v2-alert-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v2-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>

  <!--Sidebar v1-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-sidebar.svg" alt="" />
      <div class="title-meta">
        <h3>Sidebar v1 Layout</h3>
        <p>With a side navigation</p>
      </div>
    </div>

    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Main Feed</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Main Feed</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed-posts-double.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed-posts-double-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 2x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-feed-posts-double.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed-posts-triple.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-feed-posts-triple-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Posts feed 3x</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-feed-posts-triple.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-stories-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories Feed</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-stories-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Stories Feed</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-stories-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-stories-story.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story Post</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-stories-story-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Story Post</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-stories-story.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-groups.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-groups-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Groups</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-groups.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Feed</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Feed</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-profile-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile About</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile About</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-profile-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-friends.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Friends</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-friends-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Friends</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-profile-friends.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile Photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-profile-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-minimal.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-profile-minimal-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Profile</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-profile-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-products.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-products-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Products</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-ecommerce-products.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-cart.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-cart-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Cart</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-ecommerce-cart.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-checkout.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-checkout-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Checkout</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-ecommerce-checkout.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-payment.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-ecommerce-payment-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Payment</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-ecommerce-payment.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-main.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Public Page</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-main-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Public Page</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-pages-main.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-about.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-about-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">About</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-pages-about.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-community.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-community-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Community</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-pages-community.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-photos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-pages-photos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Photos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-pages-photos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-home.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-home-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-videos-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-home-v2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos V2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-home-v2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Videos V2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-videos-home-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-player.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Player</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-videos-player-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Player</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-videos-player.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-map-1.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-map-1-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Map v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-map-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-settings-v1.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Settings</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-settings-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-settings-v1-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Settings</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-settings-v1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-empty-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-empty-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholder</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-empty-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-alert-placeholder.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/sidebar-v1-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/sidebar-v1-alert-placeholder-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Alert</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/sidebar-v1-alert-placeholder.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>

  <!--Sidebar v1-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-sidebar.svg" alt="" />
      <div class="title-meta">
        <h3>Dashboard Layout</h3>
        <p>Creator dashboard</p>
      </div>
    </div>

    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-home.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Creator Dashboard</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/dashboard-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-home-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Creator Dashboard</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/dashboard-home.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-posts.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Dashboard Posts</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/dashboard-posts.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-posts-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Dashboard Posts</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/dashboard-posts.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-videos.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Dashboard videos</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/dashboard-videos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/dashboard-videos-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Dashboard videos</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/dashboard-videos.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>

  <!--Special-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-special.svg" alt="" />
      <div class="title-meta">
        <h3>Special Layouts</h3>
        <p>Unique pages and layouts</p>
      </div>
    </div>

    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/messages-inbox.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Inbox</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/inbox.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/messages-inbox-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Inbox</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/inbox.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/messages-chat.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Chat</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/chat.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/messages-chat-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Chat</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/chat.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/login.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/login.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/login-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/login.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/login2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/login-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/login2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/login-minimal.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/login-boxed.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v3</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/login-boxed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/login-boxed-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Login v3</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/login-boxed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/signup.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Signup v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/signup.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/signup-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Signup v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/signup.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/signup-v2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Signup v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/signup-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/signup-v2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Signup v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/signup-v2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/elements.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Elements</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/elements.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/error-404.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Error 404</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/error-404.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <span class="new-tag">New</span>
          <img
            data-src="assets/img/screenshots/error-404-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Error 404</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/error-404.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/elements-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Elements</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/elements.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>

  <!--Special-->
  <div class="demo-section">
    <div class="demo-section-title">
      <img src="assets/img/icons/layouts/layout-special.svg" alt="" />
      <div class="title-meta">
        <h3>Placeholders</h3>
        <p>Layout placeholders examples</p>
      </div>
    </div>
    <div class="columns is-multiline">
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-feed.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v1</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-placeholders-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-feed-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v1</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-placeholders-feed.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-1.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v2</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-1-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v2</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-1.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-2.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v3</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-2-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v3</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-2.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-3.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v4</div>
              <div class="demo-link" data-theme="light">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-3.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
      <!-- Demo item -->
      <div class="column is-4 has-text-centered">
        <figure class="demo-wrapper">
          <img
            data-src="assets/img/screenshots/placeholders-questions-3-dark.png"
            alt=""
            data-lazy-load
          />
          <div class="circle-overlay"></div>
          <div class="demo-info has-text-centered">
            <div class="wrapper">
              <div class="demo-title">Placeholders v4</div>
              <div class="demo-link" data-theme="dark">
                <a class="is-dm" href="/navbar-v1-placeholders-questions-3.html"
                  >Go to demo <i data-feather="chevron-right"></i
                ></a>
              </div>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>
</div>
