Search Box

The Search Box is a custom module with specific classes to define its elements, including the search input and program links. This is based on the same interaction in Growing Up NYC, NYC Opportunity’s product for parents and families.

<div aria-hidden="true" class="o-search-box active static" id="search">
  <div class="o-search-box__inner">
    <div class="wrap">
      <a class="o-search-box__close js-hide-search" href="#content">
        <svg class="icon-ui icon-3">
          <use xlink:href="#icon-ui-x"></use>
        </svg>
        <span class="sr-only">Close search</span>
      </a>
      <form class="o-search-box__form">
        <input name="lang" type="hidden" value="en" />
        <label class="type-small" for="search-field">Search for programs and services</label>
        <div class="input-search">
          <input id="search-field" name="s" placeholder="Search" type="text" value="" />
          <button class="btn-link input-search__submit" type="submit">
            <svg class="icon icon-ui-search">
              <use xlink:href="#icon-ui-search"></use>
            </svg>
          </button>
        </div>
      </form>
      <div class="o-search-box__suggestions">
        <div class="o-search-box__suggestions-header">
          <h3>Programs</h3>
          <a class="link-more hidden screen-tablet:inline-block" href="#">see all programs</a>
        </div>
        <div class="o-search-box__suggestions-body">
          <div class="o-search-box__suggestions-item">
            <a href="#">Money to buy food</a>
          </div>
          <div class="o-search-box__suggestions-item">
            <a href="#">Cash help when you are in need</a>
          </div>
          <div class="o-search-box__suggestions-item">
            <a href="#">Low-cost and free health insurance</a>
          </div>
        </div>
        <a aria-hidden="true" class="link-more screen-tablet:hidden" href="#">see all programs</a>
      </div>
    </div>
  </div>
</div>