Footer
Voorbeeld HTML
<div class="rvo-footer-bg">
<footer class="utrecht-page-footer rvo-footer rvo-footer--lg">
<div class="rvo-footer__primary-menu-container">
<div class="rvo-footer-column">
<ul class="rvo-footer-menu">
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Over ons</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Contact</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Pers</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Zaken regelen bij RVO</div>
</a>
</li>
</ul>
</div>
<div class="rvo-footer-column">
<ul class="rvo-footer-menu">
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Privacy</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Cookies en anti-spam</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Toegankelijkheid</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Proclaimer</div>
</a>
</li>
</ul>
</div>
<div class="rvo-footer-column">
<ul class="rvo-footer-menu">
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Onderwerpen A t/m Z</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Klantenpanel</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Documenten en publicaties</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Overheidspublicaties en auteursrecht</div>
</a>
</li>
</ul>
</div>
<div class="rvo-footer-column">
<ul class="rvo-footer-menu">
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Social media</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Higherlevel.nl ondernemersforum</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>RSS</div>
</a>
</li>
<li class="rvo-footer-menu-item">
<a
class="rvo-link rvo-link--with-icon rvo-link--no-underline"
href="#"
>
<span
class="utrecht-icon rvo-icon rvo-icon-delta-naar-rechts rvo-icon--sm rvo-icon--wit rvo-link__icon--before"
role="img"
aria-label="Delta naar rechts"
></span>
<div>Gratis nieuwsbrief</div>
</a>
</li>
</ul>
</div>
</div>
<div class="rvo-footer__payoff">We helpen u graag vooruit!</div>
<hr class="rvo-hr" />
<div class="rvo-footer__secondary-menu-container">
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/contact"
>
Contact
</a>
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/privacy"
>
Privacy
</a>
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/cookies"
>
Cookies en anti-spam
</a>
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/toegankelijkheid"
>
Toegankelijkheid
</a>
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/proclaimer"
>
Proclaimer
</a>
<a
class="rvo-link rvo-link--no-underline rvo-link--wit rvo-link--normal"
href="https://www.rvo.nl/onderwerpen/kwetsbaarheid"
>
Kwetsbaarheid melden
</a>
</div>
</footer>
</div>
Footer
In de footer worden links geplaatst naar andere onderdelen van een website of applicatie.
Wanneer gebruik je een Footer
Elke website of applicatie gebruikt een Footer op elke pagina.
Anatomie van een Footer
Een Footer bestaat uit:
- Optionele lijsten met links
- Optionele pay-off
- Verplichte links waaronder aan de onderkant van de footer:
- Contact: verwijst naar de algemene contactpagina op de website van RVO.
- Privacy: verwijst naar de Privacy pagina op de website van RVO.
- Cookies en anti-spam: verwijst naar de Cookies en anti-spam pagina op de website van RVO.
- Toegankelijkheid: verwijst naar de specifieke eigen toegankelijkheidsverklaring van de website of applicatie.
- Proclaimer: verwijst naar de Proclaimer pagina op de website van RVO.
- Kwetsbaarheid melden: verwijst naar de kwetsbaarheid melden pagina op de website van RVO.
Richtlijnen
- Een Footer moet elke pagina binnen de applicatie of website zichtbaar zijn.
- Een Footer moet altijd de verplichte links bevatten.
- Links die verwijzen naar een externe pagina worden geopend in een nieuw tabblad of venster.
Rijkshuisstijl
Vanuit de Rijkshuisstijl zijn er geen voorschriften over hoe een Footer eruit moet zien of wat voor een links deze moet bevatten.