Skip to main content

Location Landing Header

The Location Landing Header that includes a headline, search boxes, and "View All Locations" link.

Links:

Confluence

This is only to be used on Location Landing page and in the Location Search app.

Tincid augue interdum.

Location Search
Name, Type, or Service
Address, City, or Zip Code
View All Locations
<div class="c-location-landing-header" style="background-image: url('/images/patterns/pattern-light-gray.png')">
  <h2 class="nyp-type-h1">Tincid augue interdum.</h2>
  <div class="o-box u-bg-black u-c-white">
    <form action="" id="location-landing-form">
      <div role="group" aria-labelledby="search-group-legend">
        <span id="search-group-legend" class="u-visually-hidden">Location Search</span>
        <div class="o-grid">
          <div class="o-grid__item o-grid__item-12 o-grid__item@md">
            <label class="u-m-b-xs u-d-block" for="location">Find a Location by:</label>
            <input class="c-input u-bg-white" type="text" id="location" name="location" value="All locations" aria-describedby="location-help" autocomplete="address">
            <span class="c-input__hint u-d-block u-m-t-xs" id="location-help">Name, Type, or Service</span>
          </div>
          <div class="o-grid__item o-grid__item-12@sm o-grid__item@md">
            <div class="u-d-flex u-f-justify-between">
              <label class="u-m-b-xs u-d-block" for="near">Near:</label>
              <a class="small-location-link c-inline-icon u-f-align-self-center u-d-none" aria-label="Use Current location" href="#">
                <span class="o-svg-icon o-svg-icon--lg u-c-white">
                  <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                      <path d="M256 168c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 128c-22.06 0-40-17.94-40-40s17.94-40 40-40 40 17.94 40 40-17.94 40-40 40zm240-64h-49.66C435.49 145.19 366.81 76.51 280 65.66V16c0-8.84-7.16-16-16-16h-16c-8.84 0-16 7.16-16 16v49.66C145.19 76.51 76.51 145.19 65.66 232H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h49.66C76.51 366.81 145.19 435.49 232 446.34V496c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-49.66C366.81 435.49 435.49 366.8 446.34 280H496c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zM256 400c-79.4 0-144-64.6-144-144s64.6-144 144-144 144 64.6 144 144-64.6 144-144 144z" fill="currentColor"/>
                </span>
                <span class="c-inline-icon__link subtle-link subtle-link--inverse">Current location</span>
              </a>
            </div>
            <div class="c-input-group">
              <!-- Loading spinner -->
              <div class="c-location-landing__loader">
                <div role="status" class="spinner-border">
                  <span class="u-visually-hidden">Loading...</span>
                </div>
              </div>
              <input class="c-input c-input-group__input u-bg-white" type="text" id="near" name="near" value="Manhattan, NY" aria-describedby="near-help">
              <div class="c-input-group__append u-bg-white u-d-flex">
                <a class="current-location-icon-link c-inline-icon u-f-align-self-center" href="#" aria-label="Use Current location">
                  <span class="o-svg-icon o-svg-icon--lg u-c-red">
                    <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                        <path d="M256 168c-48.6 0-88 39.4-88 88s39.4 88 88 88 88-39.4 88-88-39.4-88-88-88zm0 128c-22.06 0-40-17.94-40-40s17.94-40 40-40 40 17.94 40 40-17.94 40-40 40zm240-64h-49.66C435.49 145.19 366.81 76.51 280 65.66V16c0-8.84-7.16-16-16-16h-16c-8.84 0-16 7.16-16 16v49.66C145.19 76.51 76.51 145.19 65.66 232H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h49.66C76.51 366.81 145.19 435.49 232 446.34V496c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-49.66C366.81 435.49 435.49 366.8 446.34 280H496c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zM256 400c-79.4 0-144-64.6-144-144s64.6-144 144-144 144 64.6 144 144-64.6 144-144 144z" fill="currentColor"/>
                  </span>
                  <span class="c-inline-icon__link current-location-link">Current location</span>
                </a>
              </div>
            </div>
            <span class="c-input__hint u-d-block u-m-t-xs" id="near-help">Address, City, or Zip Code</span>
          </div>
          <div class="o-grid__item-12 o-grid__item-auto@md u-f-align-self-center">
            <a class="c-location-landing-header__button c-button icon--left u-p-horz-0" aria-label="Search for a location" data-results-path="/demos//location-demo.html">
              <span class="o-svg-icon o-svg-icon--lg">
                <svg viewBox="0 0 512 512" focusable="false" role="presentation" shape-rendering="geometricPrecision">
                    <path d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z" fill="currentColor" />
              </span>
              <span class="u-d-inline-block u-d-none@md">Search</span>
            </a>
          </div>
        </div>
      </div>
    </form>
  </div>
  <a href="#" class="c-button c-button--naked">
    <span>View All Locations</span>
  </a>
</div>