Filter

Component based upon the collapse to use as filter. Used on the map page to filter the map by specific criteria.

Default

px

			
				<div class="m-filter m-collapse js-m-collapse ">
	<div class="m-collapse__header m-filter__header">
		<h6>filter menu</h6>
	</div>
	<div class="m-collapse__content m-filter__content">
		<div class="m-collapse__content__container m-filter__content__container">
			<div class="a-check m-filter__item">
				<label class="a-check__container">
					<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Checkbox" />
					<span class="a-check__holder"></span>
					<p class="a-check__text">Checkbox</p>
				</label>
			</div>
			<div class="a-check m-filter__item">
				<label class="a-check__container">
					<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Checkbox" />
					<span class="a-check__holder"></span>
					<p class="a-check__text">Checkbox</p>
				</label>
			</div>
			<div class="a-check m-filter__item">
				<label class="a-check__container">
					<input class="a-check__input" type="checkbox" name="checkbox-styleguide-example" value="Checkbox" />
					<span class="a-check__holder"></span>
					<p class="a-check__text">Checkbox</p>
				</label>
			</div>
		</div>
	</div>
</div>
			

		

Desktop

px

			
				<div class="m-filter-group">
	<div class="m-filter-group__title">
		<span class="a-label ">Filter op categorie</span>
	</div>
	<div class="m-filter-group__items">
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="1" class="a-tag__input" type="checkbox" name="" value="Tips &amp; tricks" />
				<label for="1" class="a-tag__label">
					Tips &amp; tricks
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="2" class="a-tag__input" type="checkbox" name="" value="Batterijen thuis" />
				<label for="2" class="a-tag__label">
					Batterijen thuis
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="3" class="a-tag__input" type="checkbox" name="" value="Veiligheid" />
				<label for="3" class="a-tag__label">
					Veiligheid
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="4" class="a-tag__input" type="checkbox" name="" value="Voor producenten en verkopers" />
				<label for="4" class="a-tag__label">
					Voor producenten en verkopers
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="5" class="a-tag__input" type="checkbox" name="" value="Voor inzamelpunten" />
				<label for="5" class="a-tag__label">
					Voor inzamelpunten
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="6" class="a-tag__input" type="checkbox" name="" value="Voor scholen" />
				<label for="6" class="a-tag__label">
					Voor scholen
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="7" class="a-tag__input" type="checkbox" name="" value="Educatie" />
				<label for="7" class="a-tag__label">
					Educatie
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="8" class="a-tag__input" type="checkbox" name="" value="Wetgeving" />
				<label for="8" class="a-tag__label">
					Wetgeving
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="9" class="a-tag__input" type="checkbox" name="" value="Recyclage" />
				<label for="9" class="a-tag__label">
					Recyclage
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="10" class="a-tag__input" type="checkbox" name="" value="E-mobility" />
				<label for="10" class="a-tag__label">
					E-mobility
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<div class="a-tag a-tag--filter ">
				<input id="11" class="a-tag__input" type="checkbox" name="" value="Campagnes" />
				<label for="11" class="a-tag__label">
					Campagnes
					<span class="a-tag__check"></span>
				</label>
			</div>
		</div>
		<div class="m-filter-group__item">
			<a class="a-link a-link--inline" href="">Reset filter</a>
		</div>
	</div>
</div>
			

		

Documentation

States

  • is-open

    This will show the content