Search

This component is used as a trigger to open the search bar in the header.

Default

px

			
				<div class="m-search ">
	<div class="m-search__buttons">
		<button class="a-button m-search__button m-search__button--open">
			<span class="a-button__icon a-button__icon--before icon-search"></span>
			<span class="a-button__text">Zoek</span>
		</button>
		<button class="a-button m-search__button m-search__button--close" tabindex="-1">
			<span class="a-button__text">Sluit</span>
			<span class="a-button__icon a-button__icon--after icon-cross"></span>
		</button>
	</div>
</div>
			

		

Inverted

px

			
				<div class="m-search js-m-search ">
	<button class="a-button a-button--inverted m-search__button js-m-search__button">
		<span class="a-button__icon a-button__icon--before icon-search"></span>
		<span class="a-button__text">Zoek</span>
	</button>
	<div class="m-search__flyout">
		<div class="a-input a-input--search m-search__flyout__input a-input--inverted">
			<div class="a-input__container">
				<input class="a-input__field" type="text" id="styleguide-search-example1" name="styleguide-search-example1" placeholder=" " value="" />
				<label for="styleguide-search-example1" class="a-input__label">Search input</label>
			</div>
			<button class="a-button a-button--inverted a-input__button">
				<span class="a-button__icon a-button__icon--before icon-search"></span>
				<span class="a-button__text">Zoek</span>
			</button>
		</div>
		<a class="a-link m-search__flyout__link icon-location a-link--inverted" href="">Vind een inzamelpunt in jouw buurt</a>
	</div>
</div>