Map

Map of the website. The interaction between the map and the results will be made in vue.js.

Default

px 

			
				<section class="o-map l-grid l-container l-container--large ">
	<div class="m-filter m-collapse js-m-collapse o-map__filter">
		<div class="m-collapse__header m-filter__header">
			<h6>Type inzamelpunt</h6>
		</div>
		<div class="m-collapse__content m-filter__content">
			<div class="m-collapse__content__container m-filter__content__container">
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Bedrijven" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Bedrijven</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Recyclageparken" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Recyclageparken</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Winkels en supermarkten" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Winkels en supermarkten</p>
					</label>
				</div>
			</div>
		</div>
	</div>
	<div class="o-map__results l-grid__col-5-12">
		<header class="o-map__results__header">
			<h4>Resultaten (133)</h4>
		</header>
		<div class="o-map__results-container">
			<ul class="m-list m-list--no-type o-map__results__list">
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
				<li>
					<div class="m-map-result ">
						<span class="icon-location m-map-result__icon"></span>
						<div class="m-map-result__content">
							<p class="m-map-result__label">Bedrijven</p>
							<p class="a-text a-text--bold">Nmbs/sncb Gent Station Sint Pieters B St W11</p>
							<p>
								Koningin Maria Hendrikaplein 2 </br> 9000 Gent
							</p>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<div class="l-grid__col-7-12 o-map__map">
		<img src="/assets/images/mock/map.jpg" alt="map" title="map" />
	</div>
</section>

Loading

px 

			
				<section class="o-map l-grid l-container l-container--large ">
	<div class="m-filter m-collapse js-m-collapse o-map__filter">
		<div class="m-collapse__header m-filter__header">
			<h6>Type inzamelpunt</h6>
		</div>
		<div class="m-collapse__content m-filter__content">
			<div class="m-collapse__content__container m-filter__content__container">
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Bedrijven" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Bedrijven</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Recyclageparken" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Recyclageparken</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Winkels en supermarkten" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Winkels en supermarkten</p>
					</label>
				</div>
			</div>
		</div>
	</div>
	<div class="o-map__results l-grid__col-5-12">
		<header class="o-map__results__header">
			<h4>Resultaten (133)</h4>
		</header>
		<div class="o-map__results-container">
			<div class="a-loader o-map__loader">
				<div class="a-loader__outer">
					<div class="a-loader__inner"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="l-grid__col-7-12 o-map__map">
		<img src="/assets/images/mock/map.jpg" alt="map" title="map" />
	</div>
</section>

No results

px 

			
				<section class="o-map l-grid l-container l-container--large ">
	<div class="m-filter m-collapse js-m-collapse o-map__filter">
		<div class="m-collapse__header m-filter__header">
			<h6>Type inzamelpunt</h6>
		</div>
		<div class="m-collapse__content m-filter__content">
			<div class="m-collapse__content__container m-filter__content__container">
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Bedrijven" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Bedrijven</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Recyclageparken" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Recyclageparken</p>
					</label>
				</div>
				<div class="a-check ">
					<label class="a-check__container">
						<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Winkels en supermarkten" />
						<span class="a-check__holder"></span>
						<p class="a-check__text">Winkels en supermarkten</p>
					</label>
				</div>
			</div>
		</div>
	</div>
	<div class="o-map__results l-grid__col-5-12">
		<header class="o-map__results__header">
			<h4>Resultaten (0)</h4>
		</header>
		<div class="o-map__results-container">
			<p class="o-map__results-info">Vul een straat naam, postcode of stad in om een resultaat te krijgen</p>
		</div>
	</div>
	<div class="l-grid__col-7-12 o-map__map">
		<img src="/assets/images/mock/map.jpg" alt="map" title="map" />
	</div>
</section>