soc-core/src/html/elements/sidebar.html

Core sass framework based on Bootstrap

<div class="soc-sidebar-wrapper">
  <div class="soc-search">
    <div class="soc-search-filterbar">
      <div class="soc-search-filter filter1">
        <!-- <span class="fa-stack">
                <i class="fa fa-circle-o fa-stack-2x"></i>
                <i class="fa fa-times fa-stack-1x"></i>
              </span> -->
          <i class="fa fa-times fa-lg"></i>
      </div>
      <div class="soc-search-filter filter2">
        <i class="fa fa-check fa-lg"></i>
      </div>
      <div class="soc-search-filter filter3">
        <i class="fa fa-times fa-lg"></i>
      </div>
      <div class="soc-search-filter filter4">
        <i class="fa fa-times fa-lg"></i>
      </div>
      <div class="soc-search-filter filter5">
        <i class="fa fa-check fa-lg"></i>
      </div>

    </div>
    <div class="soc-search-form">
      <div class="container-fluid">
        <div class="row">
          <div class="col-xs-12">
            <form>
              <div class="form-group">
                <label for="firstnameSearch">First name</label>
                <input type="text" class="form-control" id="firstnameSearch" placeholder="First name">
              </div>
              <div class="form-group">
                <label for="nameSearch">Name</label>
                <input type="text" class="form-control" id="nameSearch" placeholder="Name">
              </div>
              <div class="form-group">
                <p class="soc-searchinfo">Make sure you fill both fields</p>
              </div>
              <button type="submit" class="btn btn-default">Search</button>
            </form>
          </div>
        </div>
      </div>
    </div>
    <div class="btn soc-search-button">
      <i class="fa fa-filter" aria-hidden="true"></i> Filter &amp; zoek
    </div>
  </div>

  <div class="soc-sidebar-content">
    <div class="soc-searchitem filter2 searchContent2"></div>
    <div class="soc-searchitem filter1 searchContent1"></div>
    <div class="soc-searchitem filter3 searchContent2"></div>
    <div class="soc-searchitem filter3 searchContent3"></div>
    <div class="soc-searchitem filter5 searchContent1"></div>
    <div class="soc-searchitem searchContent3"></div>
    <div class="soc-searchitem filter5 searchContent2"></div>
  </div>

  <div class="soc-searchresult">
    <div class="badge badge-info">6</div>
  </div>

  <div class="soc-actionbar">
    <button class="soc-actionbutton">
          <i class="fa fa-plus" aria-hidden="true"></i><br>Nieuw
          </button>
  </div>
</div>