Tabbed search bar

By Kevin

F6 Line Created with Sketch.
tabs search content
How do I use This?

Using Foundation's tabs to have a series of search options. Designed to sit on top of e.g. a hero image (used here in the layout to show context)

HTML
<div class="row">
  <div class="medium-12 columns">
    <ul class="tabbed-search tabs" data-tabs id="tabbed-search">
      <li class="tabs-title is-active"><a href="#panel1" >Flights</a></li>
      <li class="tabs-title"><a href="#panel2">Hotels</a></li>
      <li class="tabs-title"><a href="#panel3">Cars</a></li>
      <li class="tabs-title"><a href="#panel4" aria-selected="true">Packages</a></li>
    </ul>
  </div>
</div>


<div class="tabbed-search-content tabs-content" data-tabs-content="tabbed-search">
   <div class="tabs-panel is-active" id="panel1">
    <form>
      <div class="row">
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="From">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="To">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Start Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Return Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <select>
              <option value="one">1 person</option>
              <option value="two">2 people</option>
              <option value="three">3 people</option>
              <option value="four">4 people</option>
            </select>
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <button type="button" class="primary button expanded search-button"><i class="fa fa-search"></i>Search Flights</button>
        </div>
      </div>
    </form>
  </div>
   <div class="tabs-panel" id="panel2">
    <form>
      <div class="row">
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="From">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="To">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Start Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Return Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <select>
              <option value="one">1 person</option>
              <option value="two">2 people</option>
              <option value="three">3 people</option>
              <option value="four">4 people</option>
            </select>
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <button type="button" class="primary button expanded search-button"><i class="fa fa-search"></i>Search Hotels</button>
        </div>
      </div>
    </form>
  </div>
   <div class="tabs-panel" id="panel3">
    <form>
      <div class="row">
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="From">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="To">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Start Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Return Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <select>
              <option value="one">1 person</option>
              <option value="two">2 people</option>
              <option value="three">3 people</option>
              <option value="four">4 people</option>
            </select>
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <button type="button" class="primary button expanded search-button"><i class="fa fa-search"></i>Search Cars</button>
        </div>
      </div>
    </form>
  </div>
  <div class="tabs-panel" id="panel4">
    <form>
      <div class="row">
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="From">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="To">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Start Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <input type="text" placeholder="Return Date">
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <label>
            <select>
              <option value="one">1 person</option>
              <option value="two">2 people</option>
              <option value="three">3 people</option>
              <option value="four">4 people</option>
            </select>
          </label>
        </div>
        <div class="small-12 medium-2 columns">
          <button type="button" class="primary button expanded search-button"><i class="fa fa-search"></i>Search Packages</button>
        </div>
      </div>
    </form>
  </div>
</div>



.tabbed-search {
  background: none;
  border: none;
  position: relative;
  top: -59px;
}

.tabbed-search-content {
  position: relative;
  top: -59px;
  background: #43403a;
  border: none;
  
  @include breakpoint(small only) {
    padding-top: 20px;
    padding-bottom: 30px;
  }
  
  label {
    font-weight: 700;
    font-size: 0.8em;
    text-transform: uppercase;
    color: #efefef;
    letter-spacing: 0.5px;
    color: lighten(#43403a, 35%);
    background: #43403a;
  }
  
  input[type=text] {
    margin-top: 15px;
    background: darken(#43403a, 8%);
    color: lighten(#43403a, 80%);
    border: 1px solid lighten(#43403a, 20%);
    border-radius: 3px;
    font-weight: 400;
    padding-left: 15px;
    
    @include breakpoint(small only) {
      margin-top: 0px;
    }
  }
  
  select {
    margin-top: 15px;
    background: darken(#43403a, 8%);
    color: lighten(#43403a, 80%);
    border: 1px solid lighten(#43403a, 20%);
    border-radius: 3px;
    font-weight: 400;
    padding-left: 15px;
    
    @include breakpoint(small only) {
      margin-top: 0px;
    }
  }
  
  .button.search-button {
    padding-left: 0;
    padding-right: 0;
    border-radius: 3px;
    margin-top: 15px;
    
    @include breakpoint(small only) {
      margin-top: 0px;
    }
    
    i {
      height: 15px;
      width: 15px;
      margin-right: 5px;
      margin-top: -2px;
    }
  }
}

.tabs-title > a {
  color: #fff;
  font-size: 1em;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected='true']{
  color: #fff;
  background: #43403a;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tabs-title > a:hover {
  color: #fff;
  background: #43403a;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.signup-callout {
  padding-top: 100px;
  padding-bottom: 100px;
  background: linear-gradient(
    rgba(0, 0, 0, 0.60), 
    rgba(0, 0, 0, 0.4)
  ),
    url("https://unsplash.it/2000/1200?image=667");
  background-position: center center;
  
  h2 {
    color: #fff;
  }
  p {
    color: #fff;
  }
}

.tabs-title > a {
   padding: 1em 1.25em;
}




.tabbed-search {
  background: none;
  border: none;
  position: relative;
  top: -59px;
}

.tabbed-search-content {
  position: relative;
  top: -59px;
  background: #43403a;
  border: none;
}

@media screen and (max-width: 39.9375em) {
  .tabbed-search-content {
    padding-top: 20px;
    padding-bottom: 30px;
  }
}

.tabbed-search-content label {
  font-weight: 700;
  font-size: 0.8em;
  text-transform: uppercase;
  color: #efefef;
  letter-spacing: 0.5px;
  color: #9f9a90;
  background: #43403a;
}

.tabbed-search-content input[type=text] {
  margin-top: 15px;
  background: #2d2b27;
  color: white;
  border: 1px solid #7a7469;
  border-radius: 3px;
  font-weight: 400;
  padding-left: 15px;
}

@media screen and (max-width: 39.9375em) {
  .tabbed-search-content input[type=text] {
    margin-top: 0px;
  }
}

.tabbed-search-content select {
  margin-top: 15px;
  background: #2d2b27;
  color: white;
  border: 1px solid #7a7469;
  border-radius: 3px;
  font-weight: 400;
  padding-left: 15px;
}

@media screen and (max-width: 39.9375em) {
  .tabbed-search-content select {
    margin-top: 0px;
  }
}

.tabbed-search-content .button.search-button {
  padding-left: 0;
  padding-right: 0;
  border-radius: 3px;
  margin-top: 15px;
}

@media screen and (max-width: 39.9375em) {
  .tabbed-search-content .button.search-button {
    margin-top: 0px;
  }
}

.tabbed-search-content .button.search-button i {
  height: 15px;
  width: 15px;
  margin-right: 5px;
  margin-top: -2px;
}

.tabs-title > a {
  color: #fff;
  font-size: 1em;
}

.tabs-title > a:focus, .tabs-title > a[aria-selected='true'] {
  color: #fff;
  background: #43403a;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.tabs-title > a:hover {
  color: #fff;
  background: #43403a;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.signup-callout {
  padding-top: 100px;
  padding-bottom: 100px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url("https://unsplash.it/2000/1200?image=667");
  background-position: center center;
}

.signup-callout h2 {
  color: #fff;
}

.signup-callout p {
  color: #fff;
}

.tabs-title > a {
  padding: 1em 1.25em;
}
JS

Similar Building Blocks

control

Add to Cart Interaction

F6
by Rafi
Page 1 Created with Sketch.
control

Button Group Options

F6
by Rafi
Page 1 Created with Sketch.
control

Mobile App Dashboard

F6
by Rafi
Page 1 Created with Sketch.