Doormat

Doormat is a component which includes lists of links so the user can navigate to some particular pages.

Default

px 

			
				<div class="m-doormat m-collapse js-m-collapse " data-is-root="true">
	<div class="m-doormat__header m-collapse__header">
		<h4>Wat wil je doen?</h4>
	</div>
	<div class="m-collapse__content m-doormat__content">
		<div class="m-collapse__content__container m-doormat__content__container">
			<div class="l-grid l-grid--with-margins">
				<div class="l-grid__col-3-12 m-doormat__item js-reveal">
					<a href="" class="m-doormat__main-link">
						<h5 class="m-doormat__main-title" tabindex="-1">Ik wil mijn batterijen recycleren</h5>
					</a>
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Zakjes aanvragen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-location" href="/">Vind een inzamelpunt in jouw buurt</a>
						</li>
					</ul>
				</div>
				<div class="l-grid__col-3-12 m-doormat__item js-reveal">
					<a href="/" class="m-doormat__main-link">
						<h5 class="m-doormat__main-title" tabindex="-1">Ik zamel batterijen in</h5>
					</a>
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Scholenprogramma</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Inzamelpunt zoeken</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Ophaling aanvragen</a>
						</li>
					</ul>
				</div>
				<div class="l-grid__col-3-12 m-doormat__item js-reveal">
					<a href="/" class="m-doormat__main-link">
						<h5 class="m-doormat__main-title" tabindex="-1">Ik verkoop of produceer batterijen</h5>
					</a>
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Deelnemer worden</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Aangifte doen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Deelnemer opzoeken</a>
						</li>
					</ul>
				</div>
				<div class="l-grid__col-3-12 m-doormat__item js-reveal">
					<a href="/" class="m-doormat__main-link">
						<h5 class="m-doormat__main-title" tabindex="-1">Ik wil meer weten over batterijen</h5>
					</a>
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Lesmateriaal voor scholen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Recyclageproces</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-arrow-right" href="/">Bezoek aan Villa Pila</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>