Widgets

Collection of tiny components to use inside sidebar area.

Createx component

Featured entries list

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

    <!-- Item -->
    <li class="cs-image-scale media mb-4">
      <a class="flex-shrink-0 cs-image-inner rounded mr-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="media-body pl-1">
        <span class="d-block mb-1 font-size-sm text-muted">
          <i class="cxi-clock font-size-base align-middle mt-n1 mr-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="cs-image-scale media mb-4">
      <a class="flex-shrink-0 cs-image-inner rounded mr-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="media-body pl-1">
        <span class="d-block mb-1 font-size-sm text-muted">
          <i class="cxi-clock font-size-base align-middle mt-n1 mr-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="cs-image-scale media mb-4">
      <a class="flex-shrink-0 cs-image-inner rounded mr-3" style="width: 100px;" href="#">
        <img src="path-to-image" alt="Media">
      </a>
      <div class="media-body pl-1">
        <span class="d-block mb-1 font-size-sm text-muted">
          <i class="cxi-clock font-size-base align-middle mt-n1 mr-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>

Categories

<!-- Widget: Categories -->
<div class="cs-widget cs-widget-categories">
  <h3 class="h4">Categories</h3>
  <ul class="nav nav-dark">
    <li>
      <a class="nav-link" href="#">
        <span>All</span>
        <span class="pl-2 font-weight-normal text-muted">25</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Media &amp; Press</span>
        <span class="pl-2 font-weight-normal text-muted">3</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Ad Tips</span>
        <span class="pl-2 font-weight-normal text-muted">7</span>
      </a>
    </li>
    <li>
      <ul class="nav">
        <li>
          <a class="nav-link" href="#">
            <span class="font-weight-normal">First subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="font-weight-normal">Second subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="font-weight-normal">Another subcategory</span>
          </a>
        </li>
        <li>
          <a class="nav-link" href="#">
            <span class="font-weight-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="pl-2 font-weight-normal text-muted">9</span>
      </a>
    </li>
    <li>
      <a class="nav-link" href="#">
        <span>Paid Search</span>
        <span class="pl-2 font-weight-normal text-muted">2</span>
      </a>
    </li>
  </ul>
</div>

Searchable data list

Material

<!-- Widget: Searchable data list -->
<div class="cs-widget">
  <h3 class="h4">Material</h3>
  <div class="cs-widget-data-list cs-filter">
    <div class="input-group-overlay mb-3">
      <input class="cs-filter-search form-control form-control-sm appended-form-control" type="text" placeholder="Search the material">
      <div class="input-group-append-overlay">
        <span class="input-group-text">
          <i class="cxi-search font-size-sm"></i>
        </span>
      </div>
    </div>
    <ul class="cs-filter-list list-unstyled pr-3" style="height: 12rem;" data-simplebar data-simplebar-auto-hide="false">
      <li class="cs-filter-item">
        <div class="custom-control custom-checkbox">
          <input class="custom-control-input" type="checkbox" id="material-1">
          <label class="custom-control-label" for="material-1">
            <span class="cs-filter-item-text">Cotton</span>
            <span class="pl-1 text-muted">(162)</span>
          </label>
        </div>
      </li>
      <!-- ...add as many items as you need -->
    </ul>
  </div>
</div>

Range slider

Price range

<!-- Widget: Range slider -->
<div class="cs-widget">
  <h3 class="h4">Price range</h3>
  <div class="cs-range-slider" data-start-min="250" data-start-max="680" data-min="0" data-max="1000" data-step="1">
    <div class="cs-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 cs-range-slider-value-min" type="number">
        </div>
      </div>
      <div class="mx-1 px-2 font-size-xs">—</div>
      <div class="w-50">
        <div class="form-group position-relative mb-0">
          <input class="form-control form-control-sm cs-range-slider-value-max" type="number">
        </div>
      </div>
    </div>
  </div>
</div>

Media grid

Latest projects

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

Author

Author

Author image

Johnny Lane

Director of Client Services

<!-- Widget: Author -->
<div class="cs-widget">
  <h3 class="h4">Author</h3>
  <div class="media">
    <img class="d-inline-block rounded-circle mr-3" src="path-to-image" alt="Author image" width="100">
    <div class="media-body pl-1">
      <h4 class="h5 mb-1">Johnny Lane</h4>
      <p class="mb-3 font-size-sm text-muted">Director of Client Services</p>
      <a class="social-btn sb-solid sb-round mr-2 mb-2" href="#">
        <i class="cxi-twitter"></i>
      </a>
      <a class="social-btn sb-solid sb-round mr-2 mb-2" href="#">
        <i class="cxi-messenger"></i>
      </a>
      <a class="social-btn sb-solid sb-round mr-2 mb-2" href="#">
        <i class="cxi-pinterest"></i>
      </a>
      <a class="social-btn sb-solid sb-round mb-2" href="#">
        <i class="cxi-linkedin"></i>
      </a>
    </div>
  </div>
</div>

Tag cloud

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

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

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

Subscription (MailChimp Ajax)

Subscribe

*Subscribe to our newsletter to receive early discount offers, updates and new products info.
<!--
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 "cs-subscribe-form-antispam"
-->
<div class="cs-widget">
  <h3 class="h4">Subscribe</h3>
  <form class="cs-subscribe-form validate" action="mailchimp-embedded-form-atcion-link" method="post" name="mc-embedded-subscribe-form" target="_blank" novalidate>
    <div class="input-group input-group-overlay flex-nowrap">
      <input class="form-control" type="email" name="EMAIL" placeholder="Your email">
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit" name="subscribe">Subscribe*</button>
      </div>
    </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="cs-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="cs-subscribe-status"></div>
  </form>
</div>
Top