Footer

De footer wordt vaak gebruikt als extra navigatiepunt en om aan te geven aan de gebruiker dat het einde van de pagina bereikt is.

Benodigde stappen:

Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.

Voorbeelden:

Visueel voorbeeld:

HTML-voorbeeld:

<footer>
  <nav aria-labelledby="footer-nav-1-heading">
    <h1 id="footer-nav-1-heading">Lorem ipsum</h1>
    <ul>
      <li><a href="{base}/components/footer-base">Dolor</a></li>
      <li><a href="{base}/components/footer-base">Sit</a></li>
      <li><a href="{base}/components/footer-base">Amet</a></li>
    </ul>
  </nav>
</footer>

Structuur-voorbeeld:

<footer>
  <!-- Content -->
</footer>

Bijbehorende bestanden

Voeg de (s)css-bestanden toe aan het project of importeer de bestanden.

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/footer";

Instelbare variabelen

Instelbare css-variabelen:
Variabele	CSS-attribuut	Manon ingestelde waarde	Breekpunt	Class
--footer-flex-direction	flex-direction	column	-	-
--footer-gap	gap	var(--application-base-gap-medium)	-	-
--footer-justify-content	justify-content	center	-	-
--footer-align-items	align-items	flex-start	-	-
--footer-flex-wrap	flex-wrap	wrap	-	-
--footer-min-height	min-height	10rem	-	-
--footer-background-color	background-color	var(--application-base-tint-1-background-color)	-	-
--footer-text-color	text-color	var(--application-base-tint-1-text-color)	-	-
--footer-padding-top	padding-top	var(--content-padding-top)	-	-
--footer-padding-right	padding-right	5%	-	-
--footer-padding-bottom	padding-bottom	var(--content-padding-bottom)	-	-
--footer-padding-left	padding-left	5%	-	-
--footer-max-width	max-width	100%	-	-
--footer-link-text-color	text-color	var(--footer-text-color)	-	-
--footer-link-text-decoration	text-decoration	none	-	-
--footer-link-hover-text-color	text-color	var(--footer-link-text-color)	-	-
--footer-link-hover-text-decoration	text-decoration	underline	-	-

CSS

Overzicht van de beschikbare variabelen om te kunnen gebruiken binnen de CSS van jouw project. Kies en gebruik de benodigde variabelen.

:root {
  --footer-min-height: ;
  --footer-justify-content: ;
  --footer-align-items: ;
  --footer-flex-wrap: ;
  --footer-background-color: ;
  --footer-text-color: ;
  --footer-padding: ;

  /* Links */
  --footer-link-text-color: ;
  --footer-link-text-decoration: ;

  /* Links hover */
  --footer-link-hover-text-color: ;
  --footer-link-hover-text-decoration: ;
}