Widgets

<!-- Widget: Featured entries list -->
<div class="widget">
  <h3 class="h4">Recent posts</h3>
  <ul class="list-unstyled">

    <!-- Item -->
    <li class="image-scale d-flex align-items-start mb-4">
      <a class="flex-shrink-0 image-inner rounded me-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="ps-1">
        <span class="d-block mb-1 fs-sm text-muted">
          <i class="ci-clock fs-base align-middle mt-n1 me-2"></i>
          July 5, 2020
        </span>
        <h4 class="h6 mb-1 nav-dark">
          <a class="nav-link" href="#">5 Surprising Ways to Combine Content Marketing with PPC</a>
        </h4>
      </div>
    </li>

    <!-- Item -->
    <li class="image-scale d-flex align-items-start mb-4">
      <a class="flex-shrink-0 image-inner rounded me-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="ps-1">
        <span class="d-block mb-1 fs-sm text-muted">
          <i class="ci-clock fs-base align-middle mt-n1 me-2"></i>
          April 9, 2020
        </span>
        <h4 class="h6 mb-1 nav-dark">
          <a class="nav-link" href="#">Why SEO Is All About Content Marketing?</a>
        </h4>
      </div>
    </li>

    <!-- Item -->
    <li class="image-scale d-flex align-items-start mb-4">
      <a class="flex-shrink-0 image-inner rounded me-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="ps-1">
        <span class="d-block mb-1 fs-sm text-muted">
          <i class="ci-clock fs-base align-middle mt-n1 me-2"></i>
          March 12, 2020
        </span>
        <h4 class="h6 mb-1 nav-dark">
          <a class="nav-link" href="#">10 tips for a small business digital marketing strategy</a>
        </h4>
      </div>
    </li>

    <!-- Add as many items as you need -->
  </ul>
</div>

<!-- Widget: Categories -->
<div class="widget widget-categories">
  <h3 class="h4">Categories</h3>
  <ul class="nav nav-dark">
    <li>
      <a class="nav-link" href="#">
        <span>All</span>
        <span class="ps-2 fw-normal text-muted">25</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Media &amp; Press</span>
        <span class="ps-2 fw-normal text-muted">3</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Ad Tips</span>
        <span class="ps-2 fw-normal text-muted">7</span>
      </a>
    </li>
    <li>
      <ul class="nav">
        <li>
          <a class="nav-link" href="#">
            <span class="fw-normal">First subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="fw-normal">Second subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="fw-normal">Another subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="fw-normal">Another one subcategory</span>
          </a>
        </li>
        <li>
          <ul class="nav">
            <li>
              <a class="nav-link" href="#">First sub-subcategory</a></li>
            <li>
              <a class="nav-link" href="#">Second sub-subcategory</a></li>
            <li>
              <a class="nav-link" href="#">Another sub-subcategory</a></li>
            <li>
              <a class="nav-link" href="#">Another one sub-subcategory</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>SEO</span>
        <span class="ps-2 fw-normal text-muted">9</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Paid Search</span>
        <span class="ps-2 fw-normal text-muted">2</span>
      </a>
    </li>
  </ul>
</div>

<!-- Widget: Searchable data list -->
<div class="widget">
  <h3 class="h4">Material</h3>
  <div class="widget-data-list filter">
    <div class="position-relative mb-3">
      <input class="filter-search form-control form-control-sm pe-5" type="text" placeholder="Search the material">
      <i class="ci-search fs-sm position-absolute top-50 end-0 translate-middle-y me-3 zindex-5"></i>
    </div>
    <ul class="filter-list list-unstyled pe-3" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
      <li class="filter-item">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="material-1">
          <label class="form-check-label" for="material-1">
            <span class="filter-item-text">Cotton</span>
            <span class="ps-1 text-muted">(162)</span>
          </label>
        </div>
      </li>
      <!-- ...add as many items as you need -->
    </ul>
  </div>
</div>

<!-- Widget: Range slider -->
<div class="widget">
  <h3 class="h4">Price range</h3>
  <div class="range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="range-slider-ui"></div>
    <div class="d-flex align-items-center mt-3">
      <div class="w-50">
        <div class="form-group position-relative mb-0">
          <input class="form-control form-control-sm range-slider-value-min" type="number">
        </div>
      </div>
      <div class="mx-1 px-2 fs-xs">—</div>
      <div class="w-50">
        <div class="form-group position-relative mb-0">
          <input class="form-control form-control-sm range-slider-value-max" type="number">
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Widget: Media grid -->
<div class="widget">
  <h3 class="h4">Latest projects</h3>
  <div class="media-grid">
    <div class="media-grid-item">
      <a class="media-grid-inner" href="#">
        <img src="path-to-image" alt="Media grid image">
      </a>
    </div>
    <div class="media-grid-item">
      <a class="media-grid-inner" href="#">
        <img src="path-to-image" alt="Media grid image">
      </a>
    </div>
    <div class="media-grid-item">
      <a class="media-grid-inner" href="#">
        <img src="path-to-image" alt="Media grid image">
      </a>
    </div>
    <!-- ...add as many items as you need -->
  </div>
</div>

<!-- Widget: Author -->
<div class="widget">
  <h3 class="h4">Author</h3>
  <div class="d-flex align-items-start">
    <img class="d-inline-block rounded-circle me-3" src="path-to-image" alt="Author image" width="100">
    <div class="ps-1">
      <h4 class="h5 mb-1">Johnny Lane</h4>
      <p class="mb-3 fs-sm text-muted">Director of Client Services</p>
      <a class="btn-social bs-solid rounded-circle me-2 mb-2" href="#">
        <i class="ci-twitter"></i>
      </a>
      <a class="btn-social bs-solid rounded-circle me-2 mb-2" href="#">
        <i class="ci-messenger"></i>
      </a>
      <a class="btn-social bs-solid rounded-circle me-2 mb-2" href="#">
        <i class="ci-pinterest"></i>
      </a>
      <a class="btn-social bs-solid rounded-circle mb-2" href="#">
        <i class="ci-linkedin"></i>
      </a>
    </div>
  </div>
</div>

<!-- Widget: Tags -->
<div class="widget">
  <h3 class="h4">Tags</h3>

  <!-- Basic tag -->
  <a class="btn-tag" href="#">#inspiration</a>

  <!-- Pilled tag -->
  <a class="btn-tag rounded-pill" href="#">#tips&amp;tricks</a>
</div>

<!--
Widget: Subscription (MailChimp Ajax)
Instructions how to get MailChimp action link:
1. Log in to your MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
2. In the provided code find form action link and copy it
3. Paste it to the form action attribute below
4. Also in the form code provided by MailChimp find antispam input and copy it name attribute contents
5. Paste what you have copied from name attribute to the name attribute of input with class "subscribe-form-antispam"
-->
<div class="widget">
  <h3 class="h4">Subscribe</h3>
  <form class="subscribe-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group">
      <input class="form-control" type="email" name="EMAIL" placeholder="Your email">
      <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
    </div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input class="subscribe-form-antispam" type="text" name="mailchimp-embedded-form-antispam-name-attribute" tabindex="-1">
    </div>
    <small class="form-text text-muted">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</small>
    <div class="subscribe-status"></div>
  </form>
</div>