---
layout: demo
title: Light7 Demo
---
<div id="page-searchbar" class="page">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/demos">
      <span class="icon icon-left"></span>
      Back
    </a>
    <h1 class="title">Search Bar</h1>
  </header>
  <div class="bar bar-header-secondary">
    <div class="searchbar">
      <a class="searchbar-cancel">Cancel</a>
      <div class="search-input">
        <label class="icon icon-search" for="search"></label>
        <input type="search" id='search' placeholder='Input Query...'/>
      </div>
    </div>
  </div>
  <div class="content" id=''>
    <div class="content-padded">
      <div class="searchbar">
        <div class="search-input">
          <label class="icon icon-search" for="search"></label>
          <input type="search" id='search' placeholder='Input Query...'/>
        </div>
      </div>

      <div class="searchbar row">
        <div class="search-input col-80">
          <label class="icon icon-search" for="search"></label>
          <input type="search" id='search' placeholder='Input Query...'/>
        </div>
        <a class="button button-fill button-primary col-20">Search</a>
      </div>

      <div class="searchbar row">
        <div class="search-input col-85">
          <input type="search" id='search' placeholder='Input Query...'/>
        </div>
        <a class="button button-fill button-primary col-15"><span class="icon icon-search"></span></a>
      </div>
    </div>
  </div>
</div>