Sectie section

Componenten gegroepeerd in section's.

HTML-voorbeeld:

<main>
<section>
<!-- content -->
</section>
</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/main";
@use "@minvws/manon/section";

Ingestelde waarden

CSS-voorbeeld

:root {
/* Main */
--main-gap: var(--content-gap);
--main-padding-top: var(--page-whitespace-top);
--main-padding-right: var(--page-whitespace-right);
--main-padding-bottom: var(--page-whitespace-bottom);
--main-padding-left: var(--page-whitespace-left);

/*Section */
--section-gap: var(--content-gap);
--section-padding-top: 0;
--section-padding-right: 0;
--section-padding-bottom: 0;
--section-padding-left: 0;
}

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