foundation-sites/docs/partials/search-bar.html

The most advanced responsive front-end framework in the world.

<div class="collapse expanded row secondary-bar">
  <div class="small-5 medium-3 large-2 columns">
    <a target="_blank" href="https://github.com/foundation/foundation-sites/releases/" class="version-dropdown-label"><span class="foundation-version-label">Foundation for Sites</span><span class="foundation-version-number">6.6.3</span> <span class="changelog-link">changelog</span></a>
  </div>

  <div class="small-7 columns show-for-small-only">
    <span class="search-button" data-toggle="inline-search"></span>
    <a href="#" class="float-right small hollow button mobile-nav-button" data-open="navModal">Component List</a>
    <div class="reveal nav-modal" id="navModal" data-reveal>
      {{> component-list}}
      <button class="close-button" data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div id="inline-search" class="inline-search" data-toggler="expanded">
      <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
    </div>
  </div>
  <div class="small-12 medium-9 large-10 columns show-for-medium docs-search-wrapper">
    <input type="text" class="docs-search" data-docs-search placeholder="Find a page, component, variable, mixin, function...">
  </div>
  <div class="social-list show-for-medium">
    <div class="github-button">
      <a class="github-button" href="https://github.com/foundation/foundation-sites" data-size="large" data-count-aria-label="# stargazers on GitHub" aria-label="Star foundation/foundation-sites on GitHub">Star</a>
    </div>
  </div>
</div>