rizzo-next/dist/search.html

The next generation of Lonely Planet's style guide and pattern library.

<div class="lp-search lp-search--visible" role="search">
  <div class="lp-search__container">
    <div class="lp-search__inner">
      <label class="lp-search__label" for="search-input">
        <svg class="svg-icon" aria-label="Search">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-icon-search"></use>
        </svg>
        Search places, cities, countries and continents
      </label>
      <input class="lp-search__input js-lp-search-input" id="search-input" type="text" placeholder="Search places, cities, countries and continents" autocapitalize="none" autocomplete="off" autocorrect="off">
      <button class="lp-search__close js-lp-search-close">
        <svg class="svg-icon" aria-label="Close">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#lp-icon-cross"></use>
        </svg>
        Close
      </button>
    </div>
  </div>

  <div class="lp-search__container">
    <div class="lp-search-results js-lp-search-results">
      <ul class="lp-search-results__list js-lp-search-results-list"></ul>
      <a class="lp-search-results__more js-lp-search-results-more">
        See all results
        <i class="icon-chevron-right" aria-hidden="true"></i>
      </a>
    </div>
  </div>
</div>