Car Care Center
1111 North Broad Street
Philadelphia Pennsylvania. 19123
215-555-5555
Car Care Center
1111 North Broad Street
Philadelphia Pennsylvania. 19123
215-555-5555
Car Care Center
1111 North Broad Street
Philadelphia Pennsylvania. 19123
215-555-5555
<div class="card map-card location-search">
<div class="copy-wrap">
<div class="row">
<div class="col-md-4 col-lg-5">
<div class="form-block">
<label class="visuallyhidden" for="input-medium">input medium</label>
<input type="text" class="form-input" id="input-medium" placeholder="input medium">
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="form-block select">
<label class="visuallyhidden" for="select">Select field:</label>
<div class="form-input">
<select name="select" id="select">
<option value="1">5 Miles</option>
<option value="2">10 Miles</option>
<option value="3">15 Miles</option>
<option value="4">30 Miles</option>
<option value="5">50 Miles</option>
</select>
<i class="icon icon-arrow">
<svg><use xlink:href="img/spritemap.svg#icon-arrow-down"></use><svg>
</i>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="form-block">
<button type="submit" class="button-link button-link-default alt">Submit</button>
</div>
</div>
</div>
</div>
<div class="map-wrapper">
<div id="map-finder"></div>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
</div>Car Care Center
1111 North Broad Street
Philadelphia Pennsylvania. 19123
215-555-5555
<div class="card map-card location-search">
<div class="copy-wrap">
<div class="row">
<div class="col-md-4 col-lg-5">
<div class="form-block">
<label class="visuallyhidden" for="input-medium">input medium</label>
<input type="text" class="form-input" id="input-medium" placeholder="input medium">
</div>
</div>
<div class="col-md-5 col-lg-4">
<div class="form-block select">
<label class="visuallyhidden" for="select">Select field:</label>
<div class="form-input">
<select name="select" id="select">
<option value="1">5 Miles</option>
<option value="2">10 Miles</option>
<option value="3">15 Miles</option>
<option value="4">30 Miles</option>
<option value="5">50 Miles</option>
</select>
<i class="icon icon-arrow">
<svg><use xlink:href="img/spritemap.svg#icon-arrow-down"></use><svg>
</i>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3">
<div class="form-block">
<button type="submit" class="button-link button-link-default alt">Submit</button>
</div>
</div>
</div>
</div>
<div class="map-wrapper">
<div id="map-finder"></div>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
<div class="location">
<h4>Location Title Goes Here</h4>
<p class="location-feature">
<i class="icon icon-feature">
<svg><use xlink:href="img/spritemap.svg#icon-tools"></use><svg>
</i>
Car Care Center
</p>
<p class="location-address">
1111 North Broad Street<br>
Philadelphia Pennsylvania. 19123<br>
215-555-5555
</p>
<a href="#">View Details</a>|<a href="#">Get Directions</a>
</div>
</div>The first is a larger version to highlight multiple locations; a change zip field is also present. The smaller version is to be used to highlight a single location.
Variants: Not all locations have a car care center. Locations that do are highlighted via an icon and rendering below the location title.