Footer

The footer of the website.

Default

px

			
				<footer class="o-footer u-mobile-hide ">
	<div class="l-container l-container-1x-s">
		<div class="o-footer__nav">
			<ul class="m-list m-list--no-type ">
				<li class="m-list__item">
					<a class="a-link " href="">Recycleren</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">Inzamelen</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">Verkopen &amp; produceren</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">E-mobility</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">Over batterijen</a>
				</li>
			</ul>
			<ul class="m-list m-list--no-type ">
				<li class="m-list__item">
					<a class="a-link icon-link" href="">MyBebat</a>
				</li>
				<li class="m-list__item">
					<a class="a-link icon-link" href="">Reneos</a>
				</li>
				<li class="m-list__item">
					<a class="a-link icon-link" href="">My Batbase</a>
				</li>
				<li class="m-list__item">
					<a class="a-link icon-link" href="">Villa Pila</a>
				</li>
				<li class="m-list__item">
					<a class="a-link icon-link" href="">Sortbat</a>
				</li>
			</ul>
			<ul class="m-list m-list--no-type ">
				<li class="m-list__item">
					<a class="a-link " href="">Over Bebat</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">Blog</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">FAQ</a>
				</li>
				<li class="m-list__item">
					<a class="a-link " href="">Contacteer ons</a>
				</li>
			</ul>
		</div>
		<div class="m-actions o-footer__social">
			<div class="m-actions__options">
				<ul>
					<li>
						<a class="a-button a-button--round m-actions__option  " href="/">
							<span class="a-button__icon a-button__icon--before icon-instagram"></span>
							<span class="a-button__text">icon-instagram</span>
						</a>
					</li>
					<li>
						<a class="a-button a-button--round m-actions__option  " href="/">
							<span class="a-button__icon a-button__icon--before icon-twitter"></span>
							<span class="a-button__text">icon-twitter</span>
						</a>
					</li>
					<li>
						<a class="a-button a-button--round m-actions__option  " href="/">
							<span class="a-button__icon a-button__icon--before icon-facebook"></span>
							<span class="a-button__text">icon-facebook</span>
						</a>
					</li>
					<li>
						<a class="a-button a-button--round m-actions__option  " href="/">
							<span class="a-button__icon a-button__icon--before icon-linkedin"></span>
							<span class="a-button__text">icon-linkedin</span>
						</a>
					</li>
					<li>
						<a class="a-button a-button--round m-actions__option  " href="/">
							<span class="a-button__icon a-button__icon--before icon-youtube"></span>
							<span class="a-button__text">icon-youtube</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="o-footer__disclaimer">
			<p>© 2018 Bebat vzw</p>
			<ul class="m-list m-list--inline m-list--disclaimer ">
				<li class="m-list__item">
					<a href="/" class="a-link ">Privacy</a>
				</li>
				<li class="m-list__item">
					<a href="/" class="a-link ">Cookie policy</a>
				</li>
				<li class="m-list__item">
					<a href="/" class="a-link ">Disclaimer</a>
				</li>
			</ul>
		</div>
	</div>
</footer>
<footer class="o-footer o-footer--mobile u-mobile-show">
	<div class="o-collapses">
		<div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">
			<div class="m-collapse__header">
				<h6>Mijn batterijen</h6>
			</div>
			<div class="m-collapse__content">
				<div class="m-collapse__content__container">
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link " href="">Recycleren</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">Inzamelen</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">Verkopen &amp; produceren</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">E-mobility</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">Over batterijen</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">
			<div class="m-collapse__header">
				<h6>Tools</h6>
			</div>
			<div class="m-collapse__content">
				<div class="m-collapse__content__container">
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-link" href="">MyBebat</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-link" href="">Reneos</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-link" href="">My Batbase</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-link" href="">Villa Pila</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-link" href="">Sortbat</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">
			<div class="m-collapse__header">
				<h6>Over Bebat</h6>
			</div>
			<div class="m-collapse__content">
				<div class="m-collapse__content__container">
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link " href="">Over Bebat</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">Blog</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">FAQ</a>
						</li>
						<li class="m-list__item">
							<a class="a-link " href="">Contacteer ons</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="m-collapse js-m-collapse o-footer__collapse" data-is-root="true">
			<div class="m-collapse__header">
				<h6 class="icon-question">Hulp nodig?</h6>
			</div>
			<div class="m-collapse__content">
				<div class="m-collapse__content__container">
					<ul class="m-list m-list--no-type ">
						<li class="m-list__item">
							<a class="a-link icon-question" href="">Bekijk de FAQ</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-mail" href="">info@bebat.be</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-telephone" href="">0800 97 54 21</a>
						</li>
						<li class="m-list__item">
							<a class="a-link icon-chat-single" href="">Chat met één van onze collega&#39;s</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div class="m-actions o-footer__social m-actions--center">
		<div class="m-actions__options">
			<ul>
				<li>
					<a class="a-button a-button--round m-actions__option  " href="/">
						<span class="a-button__icon a-button__icon--before icon-instagram"></span>
						<span class="a-button__text">icon-instagram</span>
					</a>
				</li>
				<li>
					<a class="a-button a-button--round m-actions__option  " href="/">
						<span class="a-button__icon a-button__icon--before icon-twitter"></span>
						<span class="a-button__text">icon-twitter</span>
					</a>
				</li>
				<li>
					<a class="a-button a-button--round m-actions__option  " href="/">
						<span class="a-button__icon a-button__icon--before icon-facebook"></span>
						<span class="a-button__text">icon-facebook</span>
					</a>
				</li>
				<li>
					<a class="a-button a-button--round m-actions__option  " href="/">
						<span class="a-button__icon a-button__icon--before icon-linkedin"></span>
						<span class="a-button__text">icon-linkedin</span>
					</a>
				</li>
				<li>
					<a class="a-button a-button--round m-actions__option  " href="/">
						<span class="a-button__icon a-button__icon--before icon-youtube"></span>
						<span class="a-button__text">icon-youtube</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
	<div class="o-footer__disclaimer">
		<p>© 2018 Bebat vzw</p>
		<ul class="m-list m-list--inline m-list--disclaimer ">
			<li class="m-list__item">
				<a href="/" class="a-link ">Privacy</a>
			</li>
			<li class="m-list__item">
				<a href="/" class="a-link ">Cookie policy</a>
			</li>
			<li class="m-list__item">
				<a href="/" class="a-link ">Disclaimer</a>
			</li>
		</ul>
	</div>
</footer>