Footer tweederde eenderde

Footer-element met een tweederde eenderde verdeling.

Benodigde stappen:

  1. Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde en optionele bestanden zie: Bijbehorende bestanden.
  2. Plaats de content in tweetallen binnen een div om gebruik te maken van de tweederde/eenderde uitlijning.

Voorbeelden:

Visueel voorbeeld:

Zie de footer op deze pagina.

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-two-thirds-one-third";

Instelbare variabelen

Instelbare css-variabelen:
Variabele CSS-attribuut Manon ingestelde waarde Breekpunt Class
--footer-two-thirds-one-third-flex-direction flex-direction column - -
--footer-two-thirds-one-third-gap gap 0 - -
--footer-two-thirds-one-third-justify-content justify-content flex-end - -
--footer-two-thirds-one-third-align-items align-items center - -
--footer-two-thirds-one-third-flex-wrap flex-wrap wrap - -
--footer-two-thirds-one-third-min-height min-height 10rem - -
--footer-two-thirds-one-third-background-color background-color var(--application-base-tint-1-background-color) - -
--footer-two-thirds-one-third-text-color text-color var(--application-base-tint-1-text-color) - -
--footer-two-thirds-one-third-padding-top padding-top 0 - -
--footer-two-thirds-one-third-padding-right padding-right 0 - -
--footer-two-thirds-one-third-padding-bottom padding-bottom 0 - -
--footer-two-thirds-one-third-padding-left padding-left 0 - -
--footer-two-thirds-one-third-max-width max-width 100% - -
--footer-two-thirds-one-third-link-text-color text-color var(--footer-text-color) - -
--footer-two-thirds-one-third-link-text-decoration text-decoration none - -
--footer-two-thirds-one-third-link-hover-text-color text-color var(--footer-link-text-color) - -
--footer-two-thirds-one-third-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-two-thirds-one-third-flex-direction: ;
    --footer-two-thirds-one-third-gap: ;
    --footer-two-thirds-one-third-justify-content: ;
    --footer-two-thirds-one-third-align-items: ;
    --footer-two-thirds-one-third-flex-wrap: ;
    --footer-two-thirds-one-third-min-height: ;
    --footer-two-thirds-one-third-background-color: ;
    --footer-two-thirds-one-third-text-color: ;
    --footer-two-thirds-one-third-padding-top: ;
    --footer-two-thirds-one-third-padding-right: ;
    --footer-two-thirds-one-third-padding-bottom: ;
    --footer-two-thirds-one-third-padding-left: ;
    --footer-two-thirds-one-third-max-width: ;

    /* Links */
    --footer-two-thirds-one-third-link-text-color: ;
    --footer-two-thirds-one-third-link-text-decoration: ;

    /* Links hover */
    --footer-two-thirds-one-third-link-hover-text-color: ;
    --footer-two-thirds-one-third-link-hover-text-decoration: ;

    /* After breakpoint */
    --footer-two-thirds-one-third-breakpoint-1-gap: ;
}