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:

  1. 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: ;
}