From 2aaa9dad37e54df05db599251ca121fddf6e2dbe Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Mon, 12 Aug 2024 12:53:14 +0200
Subject: [PATCH 1/4] Updates doc page: accordion

---
 .../(docs)/components/accordion/+page.svelte  | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/docs/src/routes/(docs)/components/accordion/+page.svelte b/docs/src/routes/(docs)/components/accordion/+page.svelte
index 7dc203c3..425010ef 100644
--- a/docs/src/routes/(docs)/components/accordion/+page.svelte
+++ b/docs/src/routes/(docs)/components/accordion/+page.svelte
@@ -347,20 +347,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">
-            Componenten gebruiken en styling toevoegen
-          </a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>accordion.scss</code></li>
-          <li><code>accordion.js</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>accordion-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/accordion";
+`}
+        />
       </section>
 
       <section id="variables">

From 38486e044a2b0b255bf2c8e7dbad97dfb9acd258 Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Mon, 12 Aug 2024 18:30:31 +0200
Subject: [PATCH 2/4] Adds and updates implementation documentation per
 component

---
 .../button-call-to-action/+page.svelte        | 24 ++++----
 .../button-destructive/+page.svelte           | 31 +++++++++-
 .../components/button-dropdown/+page.svelte   | 31 +++++++++-
 .../components/button-ghost/+page.svelte      | 30 +++++++++-
 .../components/button-icon-only/+page.svelte  | 30 +++++++++-
 .../components/button-icon/+page.svelte       | 30 +++++++++-
 .../components/collapsible/+page.svelte       | 31 +++++++++-
 .../(docs)/components/filter/+page.svelte     | 21 +++----
 .../(docs)/components/finn-large/+page.svelte | 45 +++++++++-----
 .../components/finn-medium/+page.svelte       | 35 +++++++----
 .../(docs)/components/finn-small/+page.svelte | 32 ++++++----
 .../(docs)/components/focus-only/+page.svelte | 16 +++--
 .../components/form-accent-color/+page.svelte | 20 ++++---
 .../(docs)/components/form-base/+page.svelte  | 21 +++----
 .../components/form-columns/+page.svelte      | 17 +++---
 .../form-combined-fields/+page.svelte         | 19 +++---
 .../form-fieldset-invisible/+page.svelte      | 19 +++---
 .../(docs)/components/form-help/+page.svelte  | 16 ++---
 .../form-horizontal-view/+page.svelte         | 30 ++++++----
 .../components/form-inline/+page.svelte       | 24 ++++----
 .../form-input-color-filled/+page.svelte      | 26 ++++----
 .../components/form-input-color/+page.svelte  | 23 ++++----
 .../components/form-input-date/+page.svelte   | 23 ++++----
 .../components/form-input-email/+page.svelte  | 23 ++++----
 .../components/form-input-file/+page.svelte   | 17 ++++--
 .../form-input-password/+page.svelte          | 19 +++---
 .../components/form-input-range/+page.svelte  | 19 +++---
 .../form-input-textarea/+page.svelte          | 19 +++---
 .../(docs)/components/form-input/+page.svelte | 43 +++++---------
 .../components/form-required/+page.svelte     | 20 +++----
 .../components/form-select/+page.svelte       | 24 ++++----
 .../(docs)/components/hidden/+page.svelte     | 17 ++++--
 .../components/horizontal-scroll/+page.svelte | 27 ++++++---
 .../components/horizontal-view/+page.svelte   | 23 ++++----
 .../components/image-cover/+page.svelte       | 20 ++++---
 .../(docs)/components/image-icon/+page.svelte | 34 ++++++++++-
 .../components/image-round/+page.svelte       | 20 ++++---
 .../components/image-square/+page.svelte      | 20 ++++---
 .../layout-authentication/+page.svelte        | 39 ++++++++----
 .../components/layout-centered/+page.svelte   | 22 +++----
 .../components/layout-column-2/+page.svelte   | 47 ++++++++++-----
 .../components/layout-column-3/+page.svelte   | 47 ++++++++++-----
 .../components/layout-column-4/+page.svelte   | 47 ++++++++++-----
 .../layout-fifty-fifty/+page.svelte           |  4 +-
 .../components/layout-form/+page.svelte       | 15 ++++-
 .../(docs)/components/login-meta/+page.svelte | 21 +++----
 .../(docs)/components/logo/+page.svelte       | 33 +++++++++--
 .../components/max-line-length/+page.svelte   | 56 ++++++++----------
 .../components/message-counter/+page.svelte   | 41 +++++++++----
 .../(docs)/components/nota-bene/+page.svelte  | 17 +++---
 .../notification-confirmation/+page.svelte    | 37 ++++++------
 .../notification-error/+page.svelte           | 29 +++++----
 .../notification-explanation/+page.svelte     | 37 ++++++------
 .../notification-system-message/+page.svelte  | 31 +++++-----
 .../notification-warning/+page.svelte         | 29 +++++----
 .../notifications-paragraph/+page.svelte      | 40 ++++---------
 .../notifications-table/+page.svelte          | 21 +++++++
 .../(docs)/components/nowrap/+page.svelte     | 25 +++++---
 .../(docs)/components/spot-large/+page.svelte | 46 ++++++++++-----
 .../components/spot-medium/+page.svelte       | 45 +++++++++-----
 .../(docs)/components/spot-mini/+page.svelte  | 35 +++++++----
 .../(docs)/components/spot-small/+page.svelte | 40 +++++++++----
 .../table-action-buttons/+page.svelte         | 30 ++++++----
 .../(docs)/components/table-base/+page.svelte | 59 ++++++++++++++++---
 .../components/table-caption/+page.svelte     | 28 ++++++---
 .../components/table-checkbox/+page.svelte    | 25 +++++---
 .../components/table-condensed/+page.svelte   | 28 ++++++---
 .../components/table-expando-row/+page.svelte | 41 ++++++++++---
 .../table-multiple-columns/+page.svelte       | 25 ++++++--
 .../table-multiple-rows/+page.svelte          | 25 ++++++--
 .../table-notifications/+page.svelte          | 35 +++++++----
 .../table-numerical-data/+page.svelte         | 27 ++++++---
 .../components/table-scope/+page.svelte       | 21 +++++--
 .../components/table-sortable/+page.svelte    | 28 ++++++---
 .../table-sticky-header/+page.svelte          | 24 +++++---
 .../components/table-summary/+page.svelte     | 25 ++++++--
 .../components/tile-groups/+page.svelte       | 23 ++++----
 .../(docs)/components/tiles/+page.svelte      | 20 ++++---
 78 files changed, 1426 insertions(+), 781 deletions(-)

diff --git a/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte b/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
index d0c89883..9ec5a3dd 100644
--- a/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-call-to-action/+page.svelte
@@ -83,18 +83,20 @@
       <section id="requirements">
         <h2>Bijbehorende bestanden</h2>
         <p>
-          Voor meer informatie over het importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>button/button-cta.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>button/button-cta-variables-variables.scss</code></li>
-        </ul>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-cta";
+      `}
+        />
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/button-destructive/+page.svelte b/docs/src/routes/(docs)/components/button-destructive/+page.svelte
index af5519fe..0af594e8 100644
--- a/docs/src/routes/(docs)/components/button-destructive/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-destructive/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Destructieve knop</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -82,6 +92,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-destructive";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>
diff --git a/docs/src/routes/(docs)/components/button-dropdown/+page.svelte b/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
index 85d4a265..d6f4e06e 100644
--- a/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-dropdown/+page.svelte
@@ -3,17 +3,27 @@
 </script>
 
 <script>
+  import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import { initCollapsible } from "$lib/manon.js";
   onMount(initCollapsible);
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Dropdown button</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -129,6 +139,25 @@ class="collapsible">
 `}
         />
       </section>
+
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/dropdown";
+      `}
+        />
+      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/button-ghost/+page.svelte b/docs/src/routes/(docs)/components/button-ghost/+page.svelte
index 4c712438..d0e7dbc1 100644
--- a/docs/src/routes/(docs)/components/button-ghost/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-ghost/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Ghost button</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -82,6 +92,24 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-ghost";
+      `}
+        />
+      </section>
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>
diff --git a/docs/src/routes/(docs)/components/button-icon-only/+page.svelte b/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
index 78c66159..c4041e74 100644
--- a/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-icon-only/+page.svelte
@@ -5,13 +5,22 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Icoonknoppen zonder achtergrond</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -84,6 +93,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-icon-only";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>
diff --git a/docs/src/routes/(docs)/components/button-icon/+page.svelte b/docs/src/routes/(docs)/components/button-icon/+page.svelte
index c7a38153..a7382750 100644
--- a/docs/src/routes/(docs)/components/button-icon/+page.svelte
+++ b/docs/src/routes/(docs)/components/button-icon/+page.svelte
@@ -5,13 +5,22 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Icoonknoppen</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article id="button-base">
     <div>
       <section id="introduction">
@@ -84,6 +93,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/button-icon";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>
diff --git a/docs/src/routes/(docs)/components/collapsible/+page.svelte b/docs/src/routes/(docs)/components/collapsible/+page.svelte
index 45bd5fcb..8c72b643 100644
--- a/docs/src/routes/(docs)/components/collapsible/+page.svelte
+++ b/docs/src/routes/(docs)/components/collapsible/+page.svelte
@@ -3,17 +3,27 @@
 </script>
 
 <script>
+  import { base } from "$app/paths";
   import { onMount } from "svelte";
   import Code from "$lib/Code.svelte";
   import { initCollapsible } from "$lib/manon.js";
   onMount(initCollapsible);
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Inklapbaar component</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -417,6 +427,25 @@
 `}
         />
       </section>
+
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+      @use "@minvws/manon/collapsible";
+      `}
+        />
+      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/filter/+page.svelte b/docs/src/routes/(docs)/components/filter/+page.svelte
index f6133ac6..28555b2b 100644
--- a/docs/src/routes/(docs)/components/filter/+page.svelte
+++ b/docs/src/routes/(docs)/components/filter/+page.svelte
@@ -305,18 +305,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>filter.scss</code></li>
-          <li><code>filter.js</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>filter-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/filter";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/finn-large/+page.svelte b/docs/src/routes/(docs)/components/finn-large/+page.svelte
index c7a8b7dc..2467aac1 100644
--- a/docs/src/routes/(docs)/components/finn-large/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-large/+page.svelte
@@ -147,17 +147,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>finn-large.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>finn-large-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/finn-large";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -183,7 +185,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -225,7 +230,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -267,7 +275,10 @@
 
               <tr>
                 <td>--branding-color-3-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -309,7 +320,10 @@
 
               <tr>
                 <td>--branding-color-4-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -351,7 +365,10 @@
 
               <tr>
                 <td>--branding-color-5-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/finn-medium/+page.svelte b/docs/src/routes/(docs)/components/finn-medium/+page.svelte
index 3b339153..3abdf849 100644
--- a/docs/src/routes/(docs)/components/finn-medium/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-medium/+page.svelte
@@ -137,17 +137,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>finn-medium.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>finn-medium-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/finn-medium";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -173,7 +175,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -215,7 +220,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -257,7 +265,10 @@
 
               <tr>
                 <td>--branding-color-3-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/finn-small/+page.svelte b/docs/src/routes/(docs)/components/finn-small/+page.svelte
index b77410e9..9413dcee 100644
--- a/docs/src/routes/(docs)/components/finn-small/+page.svelte
+++ b/docs/src/routes/(docs)/components/finn-small/+page.svelte
@@ -131,18 +131,20 @@
       <section id="requirements">
         <h2>Bijbehorende bestanden</h2>
         <p>
-          Voor meer informatie over importeren en instellen van componenten, zie
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>finn-small.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>finn-small-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/finn-small";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -168,7 +170,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -210,7 +215,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/focus-only/+page.svelte b/docs/src/routes/(docs)/components/focus-only/+page.svelte
index ec0341b5..533b72ac 100644
--- a/docs/src/routes/(docs)/components/focus-only/+page.svelte
+++ b/docs/src/routes/(docs)/components/focus-only/+page.svelte
@@ -60,13 +60,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>helpers/focus-only.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/focus-only";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-accent-color/+page.svelte b/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
index 9a053908..64200ff0 100644
--- a/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-accent-color/+page.svelte
@@ -156,17 +156,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h4>Benodigd</h4>
-        <ul>
-          <li><code>form/form-accent-color.scss</code></li>
-        </ul>
 
-        <h4>Optioneel</h4>
-        <ul>
-          <li><code>form/form-accent-color-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-accent-color";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-base/+page.svelte b/docs/src/routes/(docs)/components/form-base/+page.svelte
index b2657901..924eaac4 100644
--- a/docs/src/routes/(docs)/components/form-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-base/+page.svelte
@@ -104,18 +104,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-columns/+page.svelte b/docs/src/routes/(docs)/components/form-columns/+page.svelte
index d823428e..96828e00 100644
--- a/docs/src/routes/(docs)/components/form-columns/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-columns/+page.svelte
@@ -92,15 +92,14 @@
           >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte b/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
index 6d5b9aab..2ce2d259 100644
--- a/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-combined-fields/+page.svelte
@@ -92,16 +92,15 @@
           >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-combined-field.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-combined-field";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte b/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
index 981dedbb..a992d3b6 100644
--- a/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-fieldset-invisible/+page.svelte
@@ -90,17 +90,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-textarea.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-textarea-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-fieldset";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-help/+page.svelte b/docs/src/routes/(docs)/components/form-help/+page.svelte
index 81f1865f..61e913d8 100644
--- a/docs/src/routes/(docs)/components/form-help/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-help/+page.svelte
@@ -215,15 +215,15 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-help.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-help-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-help";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte b/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
index bc0eb126..628fbb6c 100644
--- a/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-horizontal-view/+page.svelte
@@ -135,18 +135,26 @@
           >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-horizontal-view.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-horizontal-view";
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-horizontal-view-variables.scss</code></li>
-          <li><code>form/form-horizontal-view-fieldset.scss</code></li>
-        </ul>
+/* Optional */
+@use "@minvws/manon/form-horizontal-view-fieldset";
+      `}
+        />
+
+        <h5>Optioneel:</h5>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-horizontal-view-fieldset";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-inline/+page.svelte b/docs/src/routes/(docs)/components/form-inline/+page.svelte
index 0b8bfe34..e285e489 100644
--- a/docs/src/routes/(docs)/components/form-inline/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-inline/+page.svelte
@@ -67,20 +67,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-inline.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-inline-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-inline";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte b/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
index 43ab89a6..0df3616b 100644
--- a/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color-filled/+page.svelte
@@ -83,21 +83,21 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-          <li><code>form/form-input-color-filled.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-          <li><code>form/form-input-color-filled-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input-color";
+@use "@minvws/manon/form-input-color-filled";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-color/+page.svelte b/docs/src/routes/(docs)/components/form-input-color/+page.svelte
index 95d768ab..b732b738 100644
--- a/docs/src/routes/(docs)/components/form-input-color/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-color/+page.svelte
@@ -74,19 +74,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input-color";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-date/+page.svelte b/docs/src/routes/(docs)/components/form-input-date/+page.svelte
index 91f1f2ae..8083cb05 100644
--- a/docs/src/routes/(docs)/components/form-input-date/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-date/+page.svelte
@@ -66,19 +66,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-email/+page.svelte b/docs/src/routes/(docs)/components/form-input-email/+page.svelte
index 4c4a4182..a19a00d9 100644
--- a/docs/src/routes/(docs)/components/form-input-email/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-email/+page.svelte
@@ -66,19 +66,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-file/+page.svelte b/docs/src/routes/(docs)/components/form-input-file/+page.svelte
index ddb839bd..3b010e6f 100644
--- a/docs/src/routes/(docs)/components/form-input-file/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-file/+page.svelte
@@ -77,14 +77,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-password/+page.svelte b/docs/src/routes/(docs)/components/form-input-password/+page.svelte
index 714c3bec..00cca010 100644
--- a/docs/src/routes/(docs)/components/form-input-password/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-password/+page.svelte
@@ -150,17 +150,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-range/+page.svelte b/docs/src/routes/(docs)/components/form-input-range/+page.svelte
index 943fc728..e4a59efa 100644
--- a/docs/src/routes/(docs)/components/form-input-range/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-range/+page.svelte
@@ -97,16 +97,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">
-            Componenten gebruiken en styling toevoegen
-          </a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte b/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
index c5254503..509780be 100644
--- a/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input-textarea/+page.svelte
@@ -104,17 +104,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-textarea.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-textarea-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-textarea";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-input/+page.svelte b/docs/src/routes/(docs)/components/form-input/+page.svelte
index c3361c02..479a05d2 100644
--- a/docs/src/routes/(docs)/components/form-input/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-input/+page.svelte
@@ -53,11 +53,7 @@
         <h4>Visueel voorbeeld:</h4>
         <form action="" method="post">
           <label for="example-input-base">Voorbeeld invoerveld</label>
-          <input
-            id="example-input-base"
-            name="example-input-base"
-            type="text"
-          />
+          <input id="example-input-base" name="example-input-base" type="text" />
           <button type="submit">Verzend</button>
         </form>
 
@@ -98,12 +94,7 @@
         <form action="" method="post">
           <label for="example-input-required">Gebruikersnaam</label>
           <span class="nota-bene">Dit veld is verplicht</span>
-          <input
-            id="example-input-required"
-            name="example-input-required"
-            type="text"
-            required
-          />
+          <input id="example-input-required" name="example-input-required" type="text" required />
           <button type="submit">Verzend</button>
         </form>
 
@@ -136,12 +127,7 @@
         <h4>Visueel voorbeeld:</h4>
         <form action="" method="post">
           <label for="example-input-disabled">Gebruikersnaam</label>
-          <input
-            id="example-input-disabled"
-            name="example-input-disabled"
-            type="text"
-            disabled
-          />
+          <input id="example-input-disabled" name="example-input-disabled" type="text" disabled />
           <button type="submit">Verzend</button>
         </form>
 
@@ -167,19 +153,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h2>Benodigd</h2>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-input.scss</code></li>
-        </ul>
 
-        <h2>Optioneel</h2>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-input-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-input";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-required/+page.svelte b/docs/src/routes/(docs)/components/form-required/+page.svelte
index 5b55fcb6..d3839d9c 100644
--- a/docs/src/routes/(docs)/components/form-required/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-required/+page.svelte
@@ -105,17 +105,15 @@
           >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-nota-bene.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-nota-bene-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-nota-bene";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/form-select/+page.svelte b/docs/src/routes/(docs)/components/form-select/+page.svelte
index 6a943e9b..397d4c90 100644
--- a/docs/src/routes/(docs)/components/form-select/+page.svelte
+++ b/docs/src/routes/(docs)/components/form-select/+page.svelte
@@ -165,20 +165,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>form/form-select-variables.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>form/form-select-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/form-base";
+@use "@minvws/manon/form-select";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/hidden/+page.svelte b/docs/src/routes/(docs)/components/hidden/+page.svelte
index 11d8dc8c..d795205e 100644
--- a/docs/src/routes/(docs)/components/hidden/+page.svelte
+++ b/docs/src/routes/(docs)/components/hidden/+page.svelte
@@ -74,12 +74,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>hidden.scss</code></li>
-        </ul>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/hidden";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte b/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
index 1181e4ff..1a891ac0 100644
--- a/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-scroll/+page.svelte
@@ -440,18 +440,27 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>helpers/horizontal-scroll.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/horizontal-scroll";
+      `}
+        />
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>nowrap.scss</code></li>
-        </ul>
+        <h5>Optioneel:</h5>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/nowrap";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/horizontal-view/+page.svelte b/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
index 8886377f..e7de80c0 100644
--- a/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
+++ b/docs/src/routes/(docs)/components/horizontal-view/+page.svelte
@@ -135,20 +135,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>form/form-base.scss</code></li>
-          <li><code>helper/horizontal-view.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>form/form-base-variables.scss</code></li>
-          <li><code>helper/horizontal-view-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/horizontal-view";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/image-cover/+page.svelte b/docs/src/routes/(docs)/components/image-cover/+page.svelte
index ac617252..d9a00469 100644
--- a/docs/src/routes/(docs)/components/image-cover/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-cover/+page.svelte
@@ -160,17 +160,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>image/image-cover.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>image/image-cover-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/image-cover";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/image-icon/+page.svelte b/docs/src/routes/(docs)/components/image-icon/+page.svelte
index 629b77d5..c0c21537 100644
--- a/docs/src/routes/(docs)/components/image-icon/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-icon/+page.svelte
@@ -5,16 +5,25 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Icoon-afbeelding</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
   <article>
     <div>
-      <section>
+      <section id="introduction">
         <h1>Icoon-afbeelding</h1>
         <p>
           Het <a href="{base}/components/icons">Icoon-component</a> kan gebruikt wordt met unicode-codes
@@ -32,7 +41,9 @@
           Voeg hiervoor de class <code>icon</code> toe aan het <code>{`<img>`}</code> element om gebruik
           te maken van de visuele weergave van een icoon.
         </p>
+      </section>
 
+      <section id="examples">
         <h2>Voorbeeld</h2>
 
         <h3>Visueel voorbeeld:</h3>
@@ -47,6 +58,25 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/icon";
+      `}
+        />
+      </section>
+
       <section id="related">
         <h2>Gerelateerde pagina's</h2>
         <a href="{base}/components/icons/test">Test- en voorbeelden-pagina</a>
diff --git a/docs/src/routes/(docs)/components/image-round/+page.svelte b/docs/src/routes/(docs)/components/image-round/+page.svelte
index ef0284ac..a22e1155 100644
--- a/docs/src/routes/(docs)/components/image-round/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-round/+page.svelte
@@ -187,17 +187,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>image/image-round.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>image/image-round-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/image-round";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/image-square/+page.svelte b/docs/src/routes/(docs)/components/image-square/+page.svelte
index 6d8d2fa1..1868143c 100644
--- a/docs/src/routes/(docs)/components/image-square/+page.svelte
+++ b/docs/src/routes/(docs)/components/image-square/+page.svelte
@@ -187,17 +187,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>image/image-square.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>image/image-square-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/image-square";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/layout-authentication/+page.svelte b/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
index 58bd9bb6..5bf55688 100644
--- a/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-authentication/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Layout authentication</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -23,20 +33,23 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigde bestanden</h2>
+        <h2>Bijbehorende bestanden</h2>
         <p>
-          Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via
-          het
-          <code>manon.scss</code> bestand.
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <ul>
-          <li><code>layout/layout-base/layout-base.scss</code></li>
-          <li><code>layout/layout-base-variables.scss</code></li>
-          <li>
-            <code>layout/layout-authentication/layout-authentication.scss</code>
-          </li>
-          <li><code>layout/layout-authentication-variables.scss</code></li>
-        </ul>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/layout-base";
+@use "@minvws/manon/layout-authentication";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/layout-centered/+page.svelte b/docs/src/routes/(docs)/components/layout-centered/+page.svelte
index 0eccd40b..b3363a71 100644
--- a/docs/src/routes/(docs)/components/layout-centered/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-centered/+page.svelte
@@ -59,18 +59,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>layout/layout-base.scss</code></li>
-          <li><code>layout/layout-centered.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>layout/layout-base-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/layout-base";
+@use "@minvws/manon/layout-centered";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/layout-column-2/+page.svelte b/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
index a495bec7..b342b72a 100644
--- a/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-2/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Layout twee kolommen</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -19,21 +29,6 @@
         <p>Verdeling 50% - 50% vanaf het ingestelde breekpunt.</p>
       </section>
 
-      <section id="requirements">
-        <h2>Benodigde bestanden</h2>
-        <p>
-          Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via
-          het
-          <code>manon.scss</code> bestand.
-        </p>
-        <ul>
-          <li><code>layout/layout-base.scss</code></li>
-          <li><code>layout/layout-base-variables.scss</code></li>
-          <li><code>layout/layout-column-2.scss</code></li>
-          <li><code>layout/layout-column-2-variables.scss</code></li>
-        </ul>
-      </section>
-
       <section id="examples">
         <h2>Voorbeeld</h2>
         <h3>Visueel voorbeeld:</h3>
@@ -108,6 +103,26 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/layout-base";
+@use "@minvws/manon/layout-column-2";
+      `}
+        />
+      </section>
+
       <section id="related">
         <h2>Gerelateerde pagina's</h2>
         <a href="{base}/components/layout-column-2-test">Test- en voorbeelden-pagina</a>
diff --git a/docs/src/routes/(docs)/components/layout-column-3/+page.svelte b/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
index 9a678a85..405d290e 100644
--- a/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-3/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Layout drie kolommen</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -19,21 +29,6 @@
         <p>Verdeling in drie gelijke kolommen vanaf de ingestelde breekpunten.</p>
       </section>
 
-      <section id="requirements">
-        <h2>Benodigde bestanden</h2>
-        <p>
-          Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via
-          het
-          <code>manon.scss</code> bestand.
-        </p>
-        <ul>
-          <li><code>layout/layout-base.scss</code></li>
-          <li><code>layout/layout-base-variables.scss</code></li>
-          <li><code>layout/layout-column-3.scss</code></li>
-          <li><code>layout/layout-column-3-variables.scss</code></li>
-        </ul>
-      </section>
-
       <section id="examples">
         <h2>Voorbeeld</h2>
         <h3>Visueel voorbeeld:</h3>
@@ -129,6 +124,26 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/layout-base";
+@use "@minvws/manon/layout-column-3";
+      `}
+        />
+      </section>
+
       <section id="related">
         <h2>Gerelateerde pagina's</h2>
         <a href="{base}/components/layout-column-3-test">Test- en voorbeelden-pagina</a>
diff --git a/docs/src/routes/(docs)/components/layout-column-4/+page.svelte b/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
index ceae9873..1cd1d9e0 100644
--- a/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-column-4/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Layout vier kolommen</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -19,21 +29,6 @@
         <p>Verdeling in drie gelijke kolommen vanaf de ingestelde breekpunten.</p>
       </section>
 
-      <section id="requirements">
-        <h2>Benodigde bestanden</h2>
-        <p>
-          Om gebruik te maken van de styling dienen de onderstaande bestanden ingeladen te zijn via
-          het
-          <code>manon.scss</code> bestand.
-        </p>
-        <ul>
-          <li><code>layout/layout-base.scss</code></li>
-          <li><code>layout/layout-base-variables.scss</code></li>
-          <li><code>layout/layout-column-4.scss</code></li>
-          <li><code>layout/layout-column-4-variables.scss</code></li>
-        </ul>
-      </section>
-
       <section id="examples">
         <h2>Voorbeeld</h2>
         <h3>Visueel voorbeeld:</h3>
@@ -150,6 +145,26 @@
         />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/layout-base";
+@use "@minvws/manon/layout-column-4";
+      `}
+        />
+      </section>
+
       <section id="related">
         <h2>Gerelateerde pagina's</h2>
         <a href="{base}/components/layout-column-4-test">Test- en voorbeelden-pagina</a>
diff --git a/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte b/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
index 48f4ac39..d0ea4886 100644
--- a/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-fifty-fifty/+page.svelte
@@ -125,7 +125,9 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
         <h3>Importeer component via NPM</h3>
diff --git a/docs/src/routes/(docs)/components/layout-form/+page.svelte b/docs/src/routes/(docs)/components/layout-form/+page.svelte
index 2fc727df..6339209b 100644
--- a/docs/src/routes/(docs)/components/layout-form/+page.svelte
+++ b/docs/src/routes/(docs)/components/layout-form/+page.svelte
@@ -5,13 +5,22 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Layout form</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -109,7 +118,9 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
         <h3>Aandachtspunten:</h3>
diff --git a/docs/src/routes/(docs)/components/login-meta/+page.svelte b/docs/src/routes/(docs)/components/login-meta/+page.svelte
index cf439b9b..01ed3f6c 100644
--- a/docs/src/routes/(docs)/components/login-meta/+page.svelte
+++ b/docs/src/routes/(docs)/components/login-meta/+page.svelte
@@ -47,18 +47,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>login-meta.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>login-meta-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/login-meta";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/logo/+page.svelte b/docs/src/routes/(docs)/components/logo/+page.svelte
index 902ab3c3..2d9877ca 100644
--- a/docs/src/routes/(docs)/components/logo/+page.svelte
+++ b/docs/src/routes/(docs)/components/logo/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Logo</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -44,11 +54,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigde bestanden</h2>
-        <ul>
-          <li><code>logo/logo-base.scss</code></li>
-          <li><code>logo/logo-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/logo";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/max-line-length/+page.svelte b/docs/src/routes/(docs)/components/max-line-length/+page.svelte
index 6d2d2df9..39bc1171 100644
--- a/docs/src/routes/(docs)/components/max-line-length/+page.svelte
+++ b/docs/src/routes/(docs)/components/max-line-length/+page.svelte
@@ -57,21 +57,27 @@
         <p>
           Er is geen aangepaste HTML nodig om gebruik te maken van dit component zodra de styling is
           toegevoegd aan het project. De styling heeft invloed op de volgende elementen:
+          <code>p</code> <code>a</code> <code>span</code> <code>li</code>
         </p>
-        <ul>
-          <li>
-            <code>{`<p></p>`}</code>
-          </li>
-          <li>
-            <code>{`<a></a>`}</code>
-          </li>
-          <li>
-            <code>{`<span></span>`}</code>
-          </li>
-          <li>
-            <code>{`<li></li>`}</code>
-          </li>
-        </ul>
+      </section>
+
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/max-line-length";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -118,7 +124,9 @@
                 <th rowspan="2" scope="rowgroup">word-break</th>
                 <td>Voor breekpunt</td>
                 <td>--max-line-length-word-break</td>
-                <td rowspan="2"><a href="{base}/documentation/variables#word-break">word-break</a></td>
+                <td rowspan="2"
+                  ><a href="{base}/documentation/variables#word-break">word-break</a></td
+                >
                 <td rowspan="2">-</td>
                 <td>normal</td>
               </tr>
@@ -150,24 +158,6 @@
           </table>
         </div>
       </section>
-
-      <section id="requirements">
-        <h2>Bijbehorende bestanden</h2>
-        <p>Voeg de (s)css-bestanden toe aan het project of importeer de bestanden.</p>
-        <p>
-          Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
-        </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>max-line-length</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>max-line-length-variables</code></li>
-        </ul>
-      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/message-counter/+page.svelte b/docs/src/routes/(docs)/components/message-counter/+page.svelte
index 5110e854..66ba88c1 100644
--- a/docs/src/routes/(docs)/components/message-counter/+page.svelte
+++ b/docs/src/routes/(docs)/components/message-counter/+page.svelte
@@ -5,13 +5,23 @@
 <script>
   import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
+  import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
 <svelte:head>
   <title>Notificatie-teller</title>
 </svelte:head>
 
-<main id="main-content" tabindex="-1">
+<main class="sidemenu" id="main-content" tabindex="-1">
+  <SideMenu>
+    <ul>
+      <li><a href="#introduction">Introductie</a></li>
+      <li><a href="#examples">Voorbeelden</a></li>
+      <li><a href="#requirements">Bijbehorende bestanden</a></li>
+      <li><a href="#related">Gerelateerde pagina's</a></li>
+    </ul>
+  </SideMenu>
+
   <article>
     <div>
       <section id="introduction">
@@ -77,6 +87,25 @@
         <Code language="html" code={`<span class="message-counter">12.830</span>`} />
       </section>
 
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/message-counter-base";
+      `}
+        />
+      </section>
+
       <section id="variables">
         <h2>Instelbare variabelen</h2>
         <ul>
@@ -96,16 +125,6 @@
           <li><a href="{base}/documentation/variables#border-color">border-color</a></li>
         </ul>
       </section>
-
-      <section id="requirements">
-        <h2>Benodigde bestanden</h2>
-        <ul>
-          <li><code>message-counter/message-counter-base.scss</code></li>
-          <li>
-            <code>message-counter/message-counter-base-variables.scss</code>
-          </li>
-        </ul>
-      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/nota-bene/+page.svelte b/docs/src/routes/(docs)/components/nota-bene/+page.svelte
index ddad25d3..cb847104 100644
--- a/docs/src/routes/(docs)/components/nota-bene/+page.svelte
+++ b/docs/src/routes/(docs)/components/nota-bene/+page.svelte
@@ -97,15 +97,14 @@
           >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>text/nota-bene.scss</code></li>
-        </ul>
-
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>text/nota-bene-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/nota-bene";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte b/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
index 4fbd454c..8347023a 100644
--- a/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-confirmation/+page.svelte
@@ -79,7 +79,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Voeg de benodigde HTML toe. Zie het voorbeeld per element voor de implementatiedetails.
@@ -205,7 +207,11 @@
 
         <h4 id="confirmation-th">Bevestiging op tabeltitel</h4>
 
-        <p class="warning"><span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven hoe een tabeltitel als bevestiging opgemaakt kan worden. Deze instructies zijn weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.</p>
+        <p class="warning">
+          <span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven
+          hoe een tabeltitel als bevestiging opgemaakt kan worden. Deze instructies zijn weggehaald,
+          omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.
+        </p>
 
         <h4 id="confirmation-td">Bevestiging op Tabelcel</h4>
 
@@ -635,23 +641,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li><code>notification/notification-confirmation.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-confirmation-variables.scss</code>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-confirmation";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/notification-error/+page.svelte b/docs/src/routes/(docs)/components/notification-error/+page.svelte
index bfdddb0c..5791752e 100644
--- a/docs/src/routes/(docs)/components/notification-error/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-error/+page.svelte
@@ -207,7 +207,11 @@
 
         <h4 id="error-th">Foutmelding op tabeltitel</h4>
 
-        <p class="warning"><span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven hoe een tabeltitel als foutmelding opgemaakt kan worden. Deze instructies zijn weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.</p>
+        <p class="warning">
+          <span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven
+          hoe een tabeltitel als foutmelding opgemaakt kan worden. Deze instructies zijn weggehaald,
+          omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.
+        </p>
 
         <h4 id="error-td">Foutmelding op Tabelcel</h4>
 
@@ -644,21 +648,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li><code>notification/notification-error.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-error-variables.scss</code>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-error";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/notification-explanation/+page.svelte b/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
index 4e6b8931..4f5b4fb8 100644
--- a/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-explanation/+page.svelte
@@ -79,7 +79,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Voeg de benodigde HTML toe. Zie het voorbeeld per element voor de implementatiedetails.
@@ -205,7 +207,11 @@
 
         <h4 id="explanation-th">Toelichting op tabeltitel</h4>
 
-        <p class="warning"><span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven hoe een tabeltitel als toelichting opgemaakt kan worden. Deze instructies zijn weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.</p>
+        <p class="warning">
+          <span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven
+          hoe een tabeltitel als toelichting opgemaakt kan worden. Deze instructies zijn weggehaald,
+          omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.
+        </p>
 
         <h4 id="explanation-td">Toelichting op Tabelcel</h4>
 
@@ -633,23 +639,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li><code>notification/notification-explanation.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-explanation-variables.scss</code>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-explanation";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/notification-system-message/+page.svelte b/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
index dda8779f..0adcfb7e 100644
--- a/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-system-message/+page.svelte
@@ -207,7 +207,11 @@
 
         <h4 id="system-th">Systeembericht op tabeltitel</h4>
 
-        <p class="warning"><span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven hoe een tabeltitel als systeembericht opgemaakt kan worden. Deze instructies zijn weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.</p>
+        <p class="warning">
+          <span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven
+          hoe een tabeltitel als systeembericht opgemaakt kan worden. Deze instructies zijn
+          weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.
+        </p>
 
         <h4 id="system-td">Systeembericht op Tabelcel</h4>
 
@@ -636,23 +640,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li>
-            <code>notification/notification-system-message.scss</code>
-          </li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-system-message-variables.scss</code>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-system-message";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/notification-warning/+page.svelte b/docs/src/routes/(docs)/components/notification-warning/+page.svelte
index d5a48701..47eec92d 100644
--- a/docs/src/routes/(docs)/components/notification-warning/+page.svelte
+++ b/docs/src/routes/(docs)/components/notification-warning/+page.svelte
@@ -207,7 +207,11 @@
 
         <h4 id="warning-th">Waarschuwing op tabeltitel</h4>
 
-        <p class="warning"><span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven hoe een tabeltitel als waarschuwing opgemaakt kan worden. Deze instructies zijn weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.</p>
+        <p class="warning">
+          <span>Waarschuwing:</span> In een vorige versie van de documentatie werd hier beschreven
+          hoe een tabeltitel als waarschuwing opgemaakt kan worden. Deze instructies zijn
+          weggehaald, omdat dit omwille de toegankelijkheid sterk <strong>afgeraden</strong> wordt.
+        </p>
 
         <h4 id="warning-td">Waarschuwing op Tabelcel</h4>
 
@@ -644,21 +648,16 @@
             >Componenten gebruiken en styling toevoegen</a
           >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li><code>notification/notification-warning.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-warning-variables.scss</code>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-warning";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte b/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
index 3e84b0fe..c6d5d68e 100644
--- a/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-paragraph/+page.svelte
@@ -96,36 +96,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>notification/notification.scss</code></li>
-          <li><code>notification/notification-paragraph.scss</code></li>
-          <li>
-            Bestanden behorend bij de gewenste notificatie type(s). Voor de beschikbare types zie:
-            <a href="notifications#notification-types">Beschikbare weergaven</a>
-          </li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            <code>notification/notification-paragraph-variables.scss</code>
-          </li>
-          <li><code>text/link-base.scss</code></li>
-          <li><code>text/link-base-variables.scss</code></li>
-          <li><code>icon/icon-base.scss</code></li>
-          <li><code>icon/icon-base-variables.scss</code></li>
-          <li>
-            Variabelenbestanden behorend bij de gewenste notificatie type(s). Voor de beschikbare
-            types zie:
-            <a href="notifications#notification-types">Beschikbare weergaven</a>
-          </li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-paragraph";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/notifications-table/+page.svelte b/docs/src/routes/(docs)/components/notifications-table/+page.svelte
index c56677a0..a0609c2b 100644
--- a/docs/src/routes/(docs)/components/notifications-table/+page.svelte
+++ b/docs/src/routes/(docs)/components/notifications-table/+page.svelte
@@ -4,6 +4,7 @@
 
 <script>
   import { base } from "$app/paths";
+  import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 </script>
 
@@ -124,6 +125,26 @@
           </table>
         </div>
       </section>
+
+      <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/notification";
+@use "@minvws/manon/notification-table";
+      `}
+        />
+      </section>
     </div>
   </article>
 </main>
diff --git a/docs/src/routes/(docs)/components/nowrap/+page.svelte b/docs/src/routes/(docs)/components/nowrap/+page.svelte
index ecdac1d9..96662bb9 100644
--- a/docs/src/routes/(docs)/components/nowrap/+page.svelte
+++ b/docs/src/routes/(docs)/components/nowrap/+page.svelte
@@ -58,10 +58,11 @@
         <h3>Basis</h3>
         <p class="explanation">
           <span>Toelichting:</span> In dit voorbeeld wordt er ook gebruik gemaakt van de
-          <dfn>helper-class</dfn> <a href="{base}/components/horizontal-scroll">horizontal-scroll</a> om te
-          voorkomen dat het voorbeeld-element de layout van de pagina breekt. Zonder deze toevoeging
-          zou de tekst het scherm uitlopen. De class <code>horizontal-scroll</code> voegt op de maximale
-          beschikbare breedte de scrollbalk toe.
+          <dfn>helper-class</dfn>
+          <a href="{base}/components/horizontal-scroll">horizontal-scroll</a>
+          om te voorkomen dat het voorbeeld-element de layout van de pagina breekt. Zonder deze
+          toevoeging zou de tekst het scherm uitlopen. De class <code>horizontal-scroll</code> voegt
+          op de maximale beschikbare breedte de scrollbalk toe.
         </p>
         <h4>Visueel voorbeeld:</h4>
         <p class="nowrap horizontal-scroll">
@@ -166,13 +167,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
 
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>nowrap.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/nowrap";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/spot-large/+page.svelte b/docs/src/routes/(docs)/components/spot-large/+page.svelte
index 296f11f8..a6e34d40 100644
--- a/docs/src/routes/(docs)/components/spot-large/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-large/+page.svelte
@@ -157,15 +157,10 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Import scss-file</h3>
-        <Code
-          language="html"
-          code={`
-@import spot-large;
-`}
-        />
 
         <h3>Import via npm-package</h3>
         <Code
@@ -199,7 +194,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -241,7 +239,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -283,7 +284,10 @@
 
               <tr>
                 <td>--branding-color-accent-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -325,7 +329,10 @@
 
               <tr>
                 <td>--branding-color-accent-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -367,7 +374,10 @@
 
               <tr>
                 <td>--branding-color-accent-3-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -409,7 +419,10 @@
 
               <tr>
                 <td>--branding-color-accent-4-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -451,7 +464,10 @@
 
               <tr>
                 <td>--branding-color-accent-5-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/spot-medium/+page.svelte b/docs/src/routes/(docs)/components/spot-medium/+page.svelte
index 126f8034..dd3e81a6 100644
--- a/docs/src/routes/(docs)/components/spot-medium/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-medium/+page.svelte
@@ -147,17 +147,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>spot-medium.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>spot-medium-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/spot-medium";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -183,7 +185,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -225,7 +230,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -267,7 +275,10 @@
 
               <tr>
                 <td>--branding-color-accent-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -309,7 +320,10 @@
 
               <tr>
                 <td>--branding-color-accent-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -351,7 +365,10 @@
 
               <tr>
                 <td>--branding-color-accent-3-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/spot-mini/+page.svelte b/docs/src/routes/(docs)/components/spot-mini/+page.svelte
index e877f9e5..7671b1b8 100644
--- a/docs/src/routes/(docs)/components/spot-mini/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-mini/+page.svelte
@@ -137,17 +137,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>spot-mini.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>spot-mini-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/spot-mini";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -173,7 +175,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -215,7 +220,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -257,7 +265,10 @@
 
               <tr>
                 <td>--branding-color-accent-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/spot-small/+page.svelte b/docs/src/routes/(docs)/components/spot-small/+page.svelte
index 2397c9c3..831c129f 100644
--- a/docs/src/routes/(docs)/components/spot-small/+page.svelte
+++ b/docs/src/routes/(docs)/components/spot-small/+page.svelte
@@ -142,17 +142,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>spot-small.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>spot-small-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/spot-small";
+      `}
+        />
       </section>
 
       <section id="variables">
@@ -178,7 +180,10 @@
 
               <tr>
                 <td>--branding-color-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -220,7 +225,10 @@
 
               <tr>
                 <td>--branding-color-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -262,7 +270,10 @@
 
               <tr>
                 <td>--branding-color-accent-1-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
@@ -304,7 +315,10 @@
 
               <tr>
                 <td>--branding-color-accent-2-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
               </tr>
 
               <tr>
diff --git a/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte b/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
index 4aa34cf1..2f04e8d5 100644
--- a/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-action-buttons/+page.svelte
@@ -202,17 +202,25 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>button/button-base.scss</code></li>
-          <li><code>button/button-base-variables.scss</code></li>
-          <li><code>icon/icon-base.scss</code></li>
-          <li><code>icon/icon-base-variables.scss</code></li>
-          <li><code>table/table-action-buttons.scss</code></li>
-          <li><code>table/table-action-buttons-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/button-base";
+@use "@minvws/manon/icon";
+@use "@minvws/manon/table-action-buttons";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-base/+page.svelte b/docs/src/routes/(docs)/components/table-base/+page.svelte
index 899a5c5c..e2dbf37b 100644
--- a/docs/src/routes/(docs)/components/table-base/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-base/+page.svelte
@@ -207,6 +207,25 @@
       </section>
 
       <section id="requirements">
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
+      </section>
+
+      <section id="variables">
         <h2>Instelbare variabelen</h2>
         <div class="horizontal-scroll">
           <table class="nowrap">
@@ -252,7 +271,10 @@
 
               <tr>
                 <td>--table-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>transparent</td>
                 <td>-</td>
               </tr>
@@ -295,7 +317,10 @@
               <tr>
                 <th rowspan="6" scope="rowgroup">thead</th>
                 <td>--table-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>var(--application-accent-color)</td>
                 <td>-</td>
               </tr>
@@ -395,7 +420,10 @@
 
               <tr>
                 <td>--table-body-head-cell-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>var(--table-background-color)</td>
                 <td>-</td>
               </tr>
@@ -438,7 +466,10 @@
               <tr>
                 <th rowspan="4" scope="rowgroup">Table row - Zebra striping</th>
                 <td>--table-row-background-color-striping</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>rgba(148, 148, 148, 0.1)</td>
                 <td>-</td>
               </tr>
@@ -474,7 +505,10 @@
 
               <tr>
                 <td>--table-cell-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>transparent</td>
                 <td>-</td>
               </tr>
@@ -554,7 +588,10 @@
               <tr>
                 <th rowspan="8" scope="rowgroup">Table footer</th>
                 <td>--table-foot-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>#ddd</td>
                 <td>-</td>
               </tr>
@@ -611,7 +648,10 @@
               <tr>
                 <th rowspan="8" scope="rowgroup">Table footer head</th>
                 <td>--table-foot-header-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>transparent</td>
                 <td>-</td>
               </tr>
@@ -668,7 +708,10 @@
               <tr>
                 <th rowspan="8" scope="rowgroup">Table footer cell styling</th>
                 <td>--table-foot-cell-background-color</td>
-                <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                <td
+                  ><a href="{base}/documentation/variables#background-color">background-color</a
+                  ></td
+                >
                 <td>#f0f0f0</td>
                 <td>-</td>
               </tr>
diff --git a/docs/src/routes/(docs)/components/table-caption/+page.svelte b/docs/src/routes/(docs)/components/table-caption/+page.svelte
index 1ec9b407..6c3a1215 100644
--- a/docs/src/routes/(docs)/components/table-caption/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-caption/+page.svelte
@@ -38,7 +38,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>Voeg de <code>caption</code> direct direct binnen de <code>table</code> toe.</li>
           <li>
@@ -124,13 +126,23 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>table/table-caption.scss</code></li>
-          <li><code>table/table-caption-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/table-caption";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-checkbox/+page.svelte b/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
index 3bbd6b58..2accf5e8 100644
--- a/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-checkbox/+page.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <script>
+  import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
   let lorem = false;
@@ -196,13 +197,23 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>form/form-checkbox.scss</code></li>
-          <li><code>form/form-checkbox-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/form-checkbox";
+      `}
+        />
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/table-condensed/+page.svelte b/docs/src/routes/(docs)/components/table-condensed/+page.svelte
index 75ee89ed..ea2bea2f 100644
--- a/docs/src/routes/(docs)/components/table-condensed/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-condensed/+page.svelte
@@ -39,7 +39,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>Voeg de class <code>condensed</code> toe op de <code>table</code>.</li>
         </ol>
@@ -121,13 +123,23 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>table/table-condensed.scss</code></li>
-          <li><code>table/table-condensed-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/table-condensed";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-expando-row/+page.svelte b/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
index 8bfdca56..02f17d7f 100644
--- a/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-expando-row/+page.svelte
@@ -269,12 +269,23 @@
             </section>
 
             <section id="requirements">
-              <h2>Benodigdheden</h2>
-              <ul>
-                <li><code>table/table-expando-rows.scss</code></li>
-                <li><code>table/table-expando-rows-variables.scss</code></li>
-                <li><code>expando-rows.js</code></li>
-              </ul>
+              <h2>Bijbehorende bestanden</h2>
+              <p>
+                Voor meer informatie over importeren en instellen van componenten. Zie:
+                <a href="{base}/documentation/import-styling"
+                  >Componenten gebruiken en styling toevoegen</a
+                >
+              </p>
+
+              <h3>Importeer component via NPM</h3>
+              <h4>CSS-voorbeeld:</h4>
+              <Code
+                language="css"
+                code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/table-expando-rows";
+      `}
+              />
             </section>
 
             <section id="variables">
@@ -295,7 +306,11 @@
                   <tbody>
                     <tr>
                       <td>--expando-rows-table-cell-background-color</td>
-                      <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                      <td
+                        ><a href="{base}/documentation/variables#background-color"
+                          >background-color</a
+                        ></td
+                      >
                       <td>#e5e5e5</td>
                       <td>Openklapbare cel - td</td>
                       <td>CSS</td>
@@ -324,14 +339,22 @@
                     </tr>
                     <tr>
                       <td>--expando-rows-row-background-color</td>
-                      <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                      <td
+                        ><a href="{base}/documentation/variables#background-color"
+                          >background-color</a
+                        ></td
+                      >
                       <td>transparent</td>
                       <td>De openklapbare rij</td>
                       <td>CSS</td>
                     </tr>
                     <tr>
                       <td>--expando-rows-row-striping-background-color</td>
-                      <td><a href="{base}/documentation/variables#background-color">background-color</a></td>
+                      <td
+                        ><a href="{base}/documentation/variables#background-color"
+                          >background-color</a
+                        ></td
+                      >
                       <td>var(--table-row-background-color-striping, initial)</td>
                       <td>De openklapbare rij</td>
                       <td>CSS</td>
diff --git a/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
index 569fe216..ba30ab48 100644
--- a/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-columns/+page.svelte
@@ -34,7 +34,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Om een datacel over meerdere kolommen te plaatsen gebruik een
@@ -100,11 +102,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte b/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
index d68db69f..e1d773da 100644
--- a/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-multiple-rows/+page.svelte
@@ -34,7 +34,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Om een datacel over meerdere rijen te plaatsen gebruik een
@@ -111,11 +113,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-notifications/+page.svelte b/docs/src/routes/(docs)/components/table-notifications/+page.svelte
index ac6577f5..d27b493b 100644
--- a/docs/src/routes/(docs)/components/table-notifications/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-notifications/+page.svelte
@@ -148,19 +148,28 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>notification/notification.scss</code></li>
-          <li>
-            <code>notification/notification-variables.scss</code>
-          </li>
-          <li>
-            Bijbehorende melding-type-bestanden. Voor meer informatie en beschikbare types zie:
-            <a href="{base}/components/notifications">Meldingen</a>
-          </li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/notification";
+      `}
+        />
+
+        <p>
+          Bijbehorende melding-type-bestanden. Voor meer informatie en beschikbare types zie:
+          <a href="{base}/components/notifications">Notificaties</a>
+        </p>
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte b/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
index d66a716b..2e34d55e 100644
--- a/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-numerical-data/+page.svelte
@@ -37,7 +37,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Om gebruik te maken van de weergave voor numerieke data, voeg de class
@@ -120,13 +122,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>form/form-checkbox.scss</code></li>
-          <li><code>form/form-checkbox-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/table-scope/+page.svelte b/docs/src/routes/(docs)/components/table-scope/+page.svelte
index e5cde386..f9958140 100644
--- a/docs/src/routes/(docs)/components/table-scope/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-scope/+page.svelte
@@ -117,11 +117,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/table-sortable/+page.svelte b/docs/src/routes/(docs)/components/table-sortable/+page.svelte
index ca5ee821..2ea3f950 100644
--- a/docs/src/routes/(docs)/components/table-sortable/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-sortable/+page.svelte
@@ -3,6 +3,7 @@
 </script>
 
 <script>
+  import { base } from "$app/paths";
   import Code from "$lib/Code.svelte";
   import SideMenu from "$lib/SideMenu.svelte";
 
@@ -308,15 +309,24 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>button/button-base.scss</code></li>
-          <li><code>button/button-base-variables.scss</code></li>
-          <li><code>icon/icon-base.scss</code></li>
-          <li><code>icon/icon-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/button";
+@use "@minvws/manon/icon";
+      `}
+        />
       </section>
     </div>
   </article>
diff --git a/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte b/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
index e6a0e6e0..241b6bef 100644
--- a/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-sticky-header/+page.svelte
@@ -198,13 +198,23 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-          <li><code>table/table-sticky-header.scss</code></li>
-          <li><code>table/table-sticky-header-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+@use "@minvws/manon/sticky-header";
+      `}
+        />
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/table-summary/+page.svelte b/docs/src/routes/(docs)/components/table-summary/+page.svelte
index f4a756e8..a07faf12 100644
--- a/docs/src/routes/(docs)/components/table-summary/+page.svelte
+++ b/docs/src/routes/(docs)/components/table-summary/+page.svelte
@@ -37,7 +37,9 @@
             optionele bestanden zie:
             <a href="#requirements">Benodigdheden</a>. Voor meer informatie over importeren en
             instellen van componenten. Zie:
-            <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+            <a href="{base}/documentation/import-styling"
+              >Componenten gebruiken en styling toevoegen</a
+            >
           </li>
           <li>
             Voeg de class <code>summary</code> toe aan de <code>&lt;table&gt;</code> om gebruik te maken
@@ -206,11 +208,22 @@
       </section>
 
       <section id="requirements">
-        <h2>Benodigdheden</h2>
-        <ul>
-          <li><code>table/table-base.scss</code></li>
-          <li><code>table/table-base-variables.scss</code></li>
-        </ul>
+        <h2>Bijbehorende bestanden</h2>
+        <p>
+          Voor meer informatie over importeren en instellen van componenten. Zie:
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
+        </p>
+
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/table";
+      `}
+        />
       </section>
 
       <section id="variables">
diff --git a/docs/src/routes/(docs)/components/tile-groups/+page.svelte b/docs/src/routes/(docs)/components/tile-groups/+page.svelte
index 2a8e465d..98461928 100644
--- a/docs/src/routes/(docs)/components/tile-groups/+page.svelte
+++ b/docs/src/routes/(docs)/components/tile-groups/+page.svelte
@@ -99,19 +99,20 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>tile/tile.scss</code></li>
-          <li><code>tile/tile-groups.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>tile/tile-variables.scss</code></li>
-          <li><code>tile/tile-groups-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/tile";
+@use "@minvws/manon/tile-groups";
+      `}
+        />
       </section>
 
       <section id="related">
diff --git a/docs/src/routes/(docs)/components/tiles/+page.svelte b/docs/src/routes/(docs)/components/tiles/+page.svelte
index bbfaea0f..d8344185 100644
--- a/docs/src/routes/(docs)/components/tiles/+page.svelte
+++ b/docs/src/routes/(docs)/components/tiles/+page.svelte
@@ -198,17 +198,19 @@
         <h2>Bijbehorende bestanden</h2>
         <p>
           Voor meer informatie over importeren en instellen van componenten. Zie:
-          <a href="{base}/documentation/import-styling">Componenten gebruiken en styling toevoegen</a>
+          <a href="{base}/documentation/import-styling"
+            >Componenten gebruiken en styling toevoegen</a
+          >
         </p>
-        <h3>Benodigd</h3>
-        <ul>
-          <li><code>tile/tile.scss</code></li>
-        </ul>
 
-        <h3>Optioneel</h3>
-        <ul>
-          <li><code>tile/tile-variables.scss</code></li>
-        </ul>
+        <h3>Importeer component via NPM</h3>
+        <h4>CSS-voorbeeld:</h4>
+        <Code
+          language="css"
+          code={`
+@use "@minvws/manon/tile";
+      `}
+        />
       </section>
 
       <section id="related">

From bc11c94fa9217e354445541e31c71493d46e8539 Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Mon, 12 Aug 2024 18:49:37 +0200
Subject: [PATCH 3/4] Removes unused link

---
 docs/src/routes/(docs)/components/logo/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/routes/(docs)/components/logo/+page.svelte b/docs/src/routes/(docs)/components/logo/+page.svelte
index 2d9877ca..b4bb4bb6 100644
--- a/docs/src/routes/(docs)/components/logo/+page.svelte
+++ b/docs/src/routes/(docs)/components/logo/+page.svelte
@@ -18,7 +18,6 @@
       <li><a href="#introduction">Introductie</a></li>
       <li><a href="#examples">Voorbeelden</a></li>
       <li><a href="#requirements">Bijbehorende bestanden</a></li>
-      <li><a href="#related">Gerelateerde pagina's</a></li>
     </ul>
   </SideMenu>
 

From ade83e064f6eb40ec2bb242e31055f8c59a596b5 Mon Sep 17 00:00:00 2001
From: Heleen <magned@gmail.com>
Date: Mon, 12 Aug 2024 18:53:01 +0200
Subject: [PATCH 4/4] Removes unused link

---
 docs/src/routes/(docs)/components/message-counter/+page.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/routes/(docs)/components/message-counter/+page.svelte b/docs/src/routes/(docs)/components/message-counter/+page.svelte
index 66ba88c1..7177f3df 100644
--- a/docs/src/routes/(docs)/components/message-counter/+page.svelte
+++ b/docs/src/routes/(docs)/components/message-counter/+page.svelte
@@ -18,7 +18,6 @@
       <li><a href="#introduction">Introductie</a></li>
       <li><a href="#examples">Voorbeelden</a></li>
       <li><a href="#requirements">Bijbehorende bestanden</a></li>
-      <li><a href="#related">Gerelateerde pagina's</a></li>
     </ul>
   </SideMenu>