This is only to be used on Location Landing page and in the Location Search app.
<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="street-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"/>
</svg>
</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"/>
</svg>
</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" />
</svg>
</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>