Content wrapper div

Componenten gegroepeerd in div's binnen de main.

HTML-voorbeeld:

<main>
  <div> <!-- This can be full width -->
    <div> <!-- While the content width can be limited -->
      <!-- content -->
    </div>
  </div>
</main>

Gebruikte 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/div-content-wrapper";

Ingestelde waarden

CSS-voorbeeld

:root {
  --div-content-wrapper-gap: var(--content-gap);
  --div-content-wrapper-padding-top: var(--content-padding-top);
  --div-content-wrapper-padding-right: var(--content-padding-right);
  --div-content-wrapper-padding-bottom: var(--content-padding-bottom);
  --div-content-wrapper-padding-left: var(--content-padding-left);
}

Layout-set

:root {
  /* Page */
  --page-whitespace-top: 4rem;
  --page-whitespace-right: 2%;
  --page-whitespace-bottom: 4rem;
  --page-whitespace-left: 2%;

  /* Content */
  --content-flex-direction: column;
  --content-justify-content: flex-start;
  --content-align-items: flex-start;
  --content-gap: 2rem;
  --content-padding-top: 2rem;
  --content-padding-right: 0;
  --content-padding-bottom: 2rem;
  --content-padding-left: 0;
  --content-max-width: 80rem;
}