Footer

The main footer component on a page only appears once and always at the bottom of the page. It mainly contains navigation and a copyright annotation.

Default

px 

			
				<footer class="o-footer ">
	<nav class="o-footer__content l-container">
		<ul class="o-footer__nav">
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Over Cevora</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Werken bij Cevora</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Pers</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">FAQ</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Contacteer ons</a>
			</li>
		</ul>
		<div><span class="o-footer__copyright">&copy;2018</span></div>
	</nav>
</footer>

Light

px 

			
				<footer class="o-footer o-footer--light">
	<nav class="o-footer__content l-container">
		<ul class="o-footer__nav">
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Over Cevora</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Werken bij Cevora</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Pers</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">FAQ</a>
			</li>
			<li class="o-footer__nav-item">
				<a class="o-footer__nav-link" href="#">Contacteer ons</a>
			</li>
		</ul>
		<div><span class="o-footer__copyright">&copy;2018</span></div>
	</nav>
</footer>

Documentation

Modifiers

  • o-footer--light

    Create a light themed footer. Differentiating mainly in background-color and text-color.