Search

            
              <div class="search">
  <div class="search-header">
    <div class="filter mb-4">
      <div class="filter-row">
        <div class="form-group mb-0 mr-1">
          <div class="form-group-wrapper">
            <input class="form-text form-control" type="text" name="form-name" placeholder="Enter search term">
          </div>
        </div><button type="submit" class="btn btn-primary mt-1 mt-md-0">Search now</button>
      </div>
    </div>
  </div>
  <div class="search-body">
    <div class="search-row mb-2 d-flex flex-column align-items-start flex-md-row justify-content-md-between align-items-md-center">
      <p class="mb-0">
        Searched for <strong>"chip"</strong>. Found <strong>29</strong> results.
      </p>
      <div class="btn-toolbar mt-1 mt-md-0" role="toolbar" aria-label="Toolbar with button groups">
        <div class="btn-group align-items-center mr-2" role="group" aria-label="First group">
          <p class="mb-0">
            Results per Page
          </p>
        </div>
        <div class="dropdown">
          <button class="btn btn-outline-primary dropdown-toggle" type="button" id="" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">10</button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">25</a> <a class="dropdown-item" href="#">50</a> <a class="dropdown-item" href="#">75</a>
          </div>
        </div>
      </div>
    </div>
    <hr class="divider divider--type-a mb-2">
    <a href="#" class="teaser-c teaser-c--type-b"></a>
    <div class="teaser-wrapper">
      <div class="teaser-header">
        <h3>
          Headline
        </h3>
      </div>
      <div class="teaser-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
      </div>
    </div>
    <hr class="divider divider--type-a mb-2">
    <a href="#" class="teaser-c teaser-c--type-b"></a>
    <div class="teaser-wrapper">
      <div class="teaser-header">
        <h3>
          Headline
        </h3>
      </div>
      <div class="teaser-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
      </div>
    </div>
    <hr class="divider divider--type-a mb-2">
    <a href="#" class="teaser-c teaser-c--type-b"></a>
    <div class="teaser-wrapper">
      <div class="teaser-header">
        <h3>
          Headline
        </h3>
      </div>
      <div class="teaser-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
      </div>
    </div>
    <hr class="divider divider--type-a mb-2">
    <a href="#" class="teaser-c teaser-c--type-b"></a>
    <div class="teaser-wrapper">
      <div class="teaser-header">
        <h3>
          Headline
        </h3>
      </div>
      <div class="teaser-body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque.
      </div>
    </div>
    <hr class="divider divider--type-a mb-4">
  </div>
  <div class="search-footer">
    <div class="search-row d-flex justify-content-center">
      <div class="pagination">
        <ul class="pagination-wrapper">
          <li class="page-item">
            <a class="page-link" href="">Previous</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">1</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">2</a>
          </li>
          <li class="page-item active">
            <a class="page-link" href="#">3</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">4</a>
          </li>
          <li class="page-item">
            <a class="page-link" href="#">Next</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>