Footer tweederde eenderde

Footer-element met een tweederde eenderde verdeling.

Benodigde stappen:

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

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