Map Modules

Markup

<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>

Location Title Goes Here

Car Care Center

1111 North Broad Street
Philadelphia Pennsylvania. 19123
215-555-5555

View Details|Get Directions

Markup

<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.