diff --git a/docs/documentation/components/form-base-test.html b/docs/documentation/components/form-base-test.html
index d6360dfc..3c2a4b3f 100644
--- a/docs/documentation/components/form-base-test.html
+++ b/docs/documentation/components/form-base-test.html
@@ -77,9 +77,8 @@ <h4>Visueel voorbeeld:</h4>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus volutpat ligula.
             </p>
 
-            <label for="form-example-base">Voorbeeld text input</label>
-            <input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
-
+            <label for="form-example-explanation-base">Voorbeeld text input</label>
+            <input id="form-example-explanation-base" name="form-example-explanation-base" placeholder="voorbeeld text input" type="text" />
             <button type="submit">Verzend</button>
           </form>
 
@@ -92,14 +91,8 @@ <h4>Visueel voorbeeld:</h4>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus volutpat ligula.
   &lt;/p>
 
-  &lt;label for="form-example-base">Voorbeeld text input&lt;/label>
-  &lt;input
-    id="form-example-base"
-    name="form-example-base"
-    placeholder="voorbeeld text input"
-    type="text"
-  />
-
+  &lt;label for="form-example-explanation-base">Voorbeeld text input&lt;/label>
+  &lt;input id="form-example-explanation-base" name="form-example-explanation-base" placeholder="voorbeeld text input" type="text" />
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
             </code>
@@ -114,8 +107,8 @@ <h4>Visueel voorbeeld:</h4>
                 varius eget. Mauris euismod a augue sit amet condimentum.</p>
             </div>
 
-            <label for="form-example-base">Voorbeeld text input</label>
-            <input id="form-example-base" name="form-example-base" placeholder="voorbeeld text input" type="text" />
+            <label for="form-example-explanation-block-base">Voorbeeld text input</label>
+            <input id="form-example-explanation-block-base" name="form-example-explanation-block-base" placeholder="voorbeeld text input" type="text" />
 
             <button type="submit">Verzend</button>
           </form>
@@ -129,10 +122,10 @@ <h4>Visueel voorbeeld:</h4>
     &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.&lt;/p>
   &lt;/div>
 
-  &lt;label for="form-example-base">Voorbeeld text input&lt;/label>
+  &lt;label for="form-example-explanation-block-base">Voorbeeld text input&lt;/label>
   &lt;input
-    id="form-example-base"
-    name="form-example-base"
+    id="form-example-explanation-block-base"
+    name="form-example-explanation-block-base"
     placeholder="voorbeeld text input"
     type="text"
   />
@@ -146,10 +139,37 @@ <h3>Notificatie op invoerveld</h3>
           <h4>Visueel voorbeeld foutmelding:</h4>
           <form action="" method="post">
             <label for="input-error">Input</label>
-            <div>
-              <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
+            <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
                 aria-invalid="true">
-              <p class="error" id="input-error-message">
+            <p class="error" id="input-error-message">
+              <span>Foutmelding:</span> Lorem ipsum dolor set amet
+            </p>
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+  &lt;label for="input-error">Input&lt;/label>
+  &lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
+      aria-invalid="true">
+  &lt;p class="error" id="input-error-message">
+    &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
+  &lt;/p>
+  &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+          <h3>Notificatie gegroepeerd met invoerveld (onder)</h3>
+          <h4>Visueel voorbeeld foutmelding:</h4>
+          <form action="" method="post">
+            <div class="notification">
+              <label for="notifiction-grouped-below-error">Input</label>
+              <input id="notifiction-grouped-below-error" class="error" value="Lorem ipsum" aria-describedby="notifiction-grouped-below-error-message"
+                  aria-invalid="true">
+              <p class="error" id="notifiction-grouped-below-error-message">
                 <span>Foutmelding:</span> Lorem ipsum dolor set amet
               </p>
             </div>
@@ -160,11 +180,11 @@ <h4>Visueel voorbeeld foutmelding:</h4>
           <pre>
               <code>
 &lt;form action="" method="post">
-  &lt;label for="input-error">Input&lt;/label>
-  &lt;div>
-    &lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
-    &lt;p class="error" id="input-error-message">
-        &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
+  &lt;div class="notification">
+    &lt;label for="notifiction-grouped-below-error">Input&lt;/label>
+    &lt;input id="notifiction-grouped-below-error" class="error" value="Lorem ipsum" aria-describedby="notifiction-grouped-below-error-message" aria-invalid="true">
+    &lt;p class="error" id="notifiction-grouped-below-error-message">
+      &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
   &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
@@ -172,15 +192,15 @@ <h4>Visueel voorbeeld foutmelding:</h4>
               </code>
             </pre>
 
-          <h4>Visueel voorbeeld toelichting:</h4>
+          <h4>Notificatie gegroepeerd met invoerveld (boven)</h4>
           <form action="" method="post">
-            <label for="input-explanation">Input</label>
-            <div>
-              <p class="explanation" id="input-explanation-message">
+            <label for="notification-grouped-above-explanation">Input</label>
+            <div class="notification">
+              <p class="explanation" id="notification-grouped-above-explanation-message">
                 <span>Toelichting:</span> Lorem ipsum dolor set amet
               </p>
-              <input id="input-explanation" class="explanation" value="Lorem ipsum"
-                aria-describedby="input-explanation-message" aria-invalid="true">
+              <input id="notification-grouped-above-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="notification-grouped-above-explanation-message" aria-invalid="true">
             </div>
             <button type="submit">Verzend</button>
           </form>
@@ -189,12 +209,13 @@ <h4>Visueel voorbeeld toelichting:</h4>
           <pre>
               <code>
 &lt;form action="" method="post">
-  &lt;label for="input-explanation">Input&lt;/label>
-  &lt;div>
-    &lt;p class="explanation" id="input-explanation-message">
+  &lt;label for="notification-grouped-above-explanation">Input&lt;/label>
+  &lt;div class="notification">
+    &lt;p class="explanation" id="notification-grouped-above-explanation-message">
       &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-    &lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
+    &lt;input id="notification-grouped-above-explanation" class="explanation" value="Lorem ipsum"
+      aria-describedby="notification-grouped-above-explanation-message" aria-invalid="true">
   &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
@@ -203,12 +224,12 @@ <h4>Visueel voorbeeld toelichting:</h4>
 
           <h4>Visueel voorbeeld waarschuwing:</h4>
           <form action="" method="post">
-            <label for="input-warning">Input</label>
-            <div>
-              <p class="warning" id="input-warning-message">
+            <label for="notification-grouped-above-warning">Input</label>
+            <div class="notification">
+              <p class="warning" id="notification-grouped-above-warning-message">
                 <span>Waarschuwing:</span> Lorem ipsum dolor set amet
               </p>
-              <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message"
+              <input id="notification-grouped-above-warning" class="warning" value="Lorem ipsum" aria-describedby="notification-grouped-above-warning-message"
                 aria-invalid="true">
             </div>
             <button type="submit">Verzend</button>
@@ -218,12 +239,13 @@ <h4>Visueel voorbeeld waarschuwing:</h4>
           <pre>
               <code>
 &lt;form action="" method="post">
-  &lt;label for="input-warning">Input&lt;/label>
-  &lt;div>
-    &lt;p class="warning" id="input-warning-message">
+  &lt;label for="notification-grouped-above-warning">Input&lt;/label>
+  &lt;div class="notification">
+    &lt;p class="warning" id="notification-grouped-above-warning-message">
       &lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-    &lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
+    &lt;input id="notification-grouped-above-warning" class="warning" value="Lorem ipsum" aria-describedby="notification-grouped-above-warning-message"
+      aria-invalid="true">
   &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
@@ -232,13 +254,13 @@ <h4>Visueel voorbeeld waarschuwing:</h4>
 
           <h4>Visueel voorbeeld bevestiging:</h4>
           <form action="" method="post">
-            <label for="input-confirmation">Input</label>
-            <div>
-              <p class="confirmation" id="input-confirmation-message">
+            <label for="notification-grouped-above-confirmation">Input</label>
+            <div class="notification">
+              <p class="confirmation" id="notification-grouped-above-confirmation-message">
                 <span>Bevestiging:</span> Lorem ipsum dolor set amet
               </p>
-              <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
-                aria-describedby="input-confirmation-message" aria-invalid="true">
+              <input id="notification-grouped-above-confirmation" class="confirmation" value="Lorem ipsum"
+                aria-describedby="notification-grouped-above-confirmation-message" aria-invalid="true">
             </div>
             <button type="submit">Verzend</button>
           </form>
@@ -247,12 +269,13 @@ <h4>Visueel voorbeeld bevestiging:</h4>
           <pre>
               <code>
 &lt;form action="" method="post">
-  &lt;label for="input-confirmation">Input&lt;/label>
-  &lt;div>
-    &lt;p class="confirmation" id="input-confirmation-message">
-        &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+  &lt;label for="notification-grouped-above-confirmation">Input&lt;/label>
+  &lt;div class="notification">
+    &lt;p class="confirmation" id="notification-grouped-above-confirmation-message">
+      &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-      &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
+    &lt;input id="notification-grouped-above-confirmation" class="confirmation" value="Lorem ipsum"
+      aria-describedby="notification-grouped-above-confirmation-message" aria-invalid="true">
   &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
@@ -261,12 +284,12 @@ <h4>Visueel voorbeeld bevestiging:</h4>
 
           <h4>Visueel voorbeeld systeembericht</h4>
           <form action="" method="post">
-            <label for="input-system">Input</label>
-            <div>
-              <p class="system" id="input-system-message">
+            <label for="notification-grouped-aboce-system">Input</label>
+            <div class="notification">
+              <p class="system" id="notification-grouped-aboce-system-message">
                 <span>Systeembericht:</span> Lorem ipsum dolor set amet
               </p>
-              <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message"
+              <input id="notification-grouped-aboce-system" class="system" value="Lorem ipsum" aria-describedby="notification-grouped-aboce-system-message"
                 aria-invalid="true">
             </div>
             <button type="submit">Verzend</button>
@@ -276,16 +299,16 @@ <h4>Visueel voorbeeld systeembericht</h4>
           <pre>
               <code>
 &lt;form action="" method="post">
-  &lt;label for="input-system">Input&lt;/label>
-  &lt;div>
-    &lt;p class="system" id="input-system-message">
-        &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
+  &lt;label for="notification-grouped-aboce-system">Input&lt;/label>
+  &lt;div class="notification">
+    &lt;p class="system" id="notification-grouped-aboce-system-message">
+      &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-    &lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
+    &lt;input id="notification-grouped-aboce-system" class="system" value="Lorem ipsum" aria-describedby="notification-grouped-aboce-system-message"
+      aria-invalid="true">
   &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-
               </code>
             </pre>
 
@@ -477,10 +500,81 @@ <h4>Visueel voorbeeld:</h4>
     &lt;/div>
   &lt;/fieldset>
   &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+            <h3>Invoerveld met notificatie</h3>
+            <h4>Visueel voorbeeld:</h4>
+            <form action="" method="post" class="horizontal-view">
+              <div class="notification">
+                <p class="explanation" id="notification-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
+                
+                <div>
+                    <label for="notification">IBAN-nummer</label>
+                    <input id="notification" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+                </div>
+              </div>
+              <button type="submit">Verzend</button>
+            </form>
+
+            <p>Html-voorbeeld:</p>
+            <pre>
+                <code>
+&lt;form action="" method="post" class="horizontal-view">
+  &lt;div class="notification">
+    &lt;p class="explanation" id="notification-message">&lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet&lt;/p>
+    
+    &lt;div>
+        &lt;label for="notification">IBAN-nummer&lt;/label>
+        &lt;input id="notification" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+    &lt;/div>
+  &lt;/div>
+  &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+            <h3>Invoerveld met notificatie binnen fieldset</h3>
+            <h4>Visueel voorbeeld:</h4>
+            <form action="" method="post" class="horizontal-view">
+              <fieldset>
+                <legend>Lorem ipsum</legend>
+
+                <div class="notification">
+                  <p class="explanation" id="notification-2-message"><span>Toelichting:</span> Lorem ipsum dolor set amet</p>
+                  
+                  <div>
+                      <label for="notification-2">IBAN-nummer</label>
+                      <input id="notification-2" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+                  </div>
+                </div>
+              </fieldset>
+              <button type="submit">Verzend</button>
+            </form>
+
+            <p>Html-voorbeeld:</p>
+            <pre>
+                <code>
+&lt;form action="" method="post" class="horizontal-view">
+  &lt;fieldset>
+    &lt;legend>Lorem ipsum&lt;/legend>
+
+    &lt;div class="notification">
+      &lt;p class="explanation" id="notification-2-message">&lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet&lt;/p>
+      
+      &lt;div>
+          &lt;label for="notification-2">IBAN-nummer&lt;/label>
+          &lt;input id="notification-2" name="iban" placeholder="Lorem ipsum dolor set" type="text">
+      &lt;/div>
+    &lt;/div>
+  &lt;/fieldset>
+  &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
               </code>
             </pre>
         </section>
+        </section>
 
         <section>
           <h2>Test set</h2>
@@ -572,7 +666,7 @@ <h3>Lorem ipsum dolor set amet</h3>
               <label for="checkbox-example-disabled">Lorem ipsum dolor set amet</label>
             </div>
 
-            <div>
+            <div class="notification">
               <div class="checkbox">
                 <input type="checkbox" id="checkbox-example-error-1" name="voorwaarden" value="checkbox input error"
                   class="error" aria-describedby="checkbox-example-error-1-message">
@@ -581,7 +675,7 @@ <h3>Lorem ipsum dolor set amet</h3>
               <p class="error" id="checkbox-example-error-1-message"><span>Foutmelding</span> Lorem ipsum</p>
             </div>
 
-            <div class="required">
+            <div class="required notification">
               <span class="nota-bene">Dit veld is verplicht</span>
               <div class="checkbox">
                 <input type="checkbox" id="checkbox-example-required-with-error" name="verplicht" required>
@@ -624,7 +718,7 @@ <h3>Lorem ipsum dolor set amet</h3>
               <label for="radio-example-checked-1">Lorem ipsum dolor set amet</label>
             </div>
 
-            <div>
+            <div class="notification">
               <div class="radio">
                 <input type="radio" id="radio-example-checked-1-notification" name="standaard-radiobutton" value="value"
                   checked>
@@ -670,7 +764,7 @@ <h3>Lorem ipsum dolor set amet</h3>
                   amet</label>
               </div>
 
-              <div>
+              <div class="notification">
                 <div class="radio">
                   <input type="radio" id="radio-list-long-name-2" name="radio-option" value="value long name"
                     class="error" aria-label="foutmelding">
@@ -685,62 +779,74 @@ <h3>Lorem ipsum dolor set amet</h3>
               <input id="color-input-1" name="color-input" type="color" value="#ffffff">
             </div>
 
-            <label for="voorbeeld-text-input-error-1">Voorbeeld invoerveld foutmelding</label>
-            <div>
-              <input id="voorbeeld-text-input-error-1" class="error" name="voorbeeld-text-input-error-1"
-                aria-describedby="voorbeeld-text-input-error-1-message" placeholder="Voorbeeld invoerveld foutmelding"
-                type="text" aria-invalid="true">
-              <p class="error" id="voorbeeld-text-input-error-1-message"><span>Foutmelding:</span> Lorem ipsum dolor
-                set amet</p>
+            <div class="notification">
+              <label for="voorbeeld-text-input-error-1">Voorbeeld invoerveld foutmelding</label>
+              <div>
+                <input id="voorbeeld-text-input-error-1" class="error" name="voorbeeld-text-input-error-1"
+                  aria-describedby="voorbeeld-text-input-error-1-message" placeholder="Voorbeeld invoerveld foutmelding"
+                  type="text" aria-invalid="true">
+                <p class="error" id="voorbeeld-text-input-error-1-message"><span>Foutmelding:</span> Lorem ipsum dolor
+                  set amet</p>
+              </div>
             </div>
 
-            <label for="voorbeeld-text-input-explanation-1">Voorbeeld invoerveld toelichting</label>
-            <div>
-              <p class="explanation" id="voorbeeld-text-input-explanation-1-message"><span>Toelichting:</span> Lorem
-                ipsum
-                dolor set amet</p>
-              <input id="voorbeeld-text-input-explanation-1" class="explanation"
-                name="voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting" type="text"
-                aria-describedby="voorbeeld-text-input-explanation-1-message">
+            <div class="notification">
+              <label for="voorbeeld-text-input-explanation-1">Voorbeeld invoerveld toelichting</label>
+              <div>
+                <p class="explanation" id="voorbeeld-text-input-explanation-1-message"><span>Toelichting:</span> Lorem
+                  ipsum
+                  dolor set amet</p>
+                <input id="voorbeeld-text-input-explanation-1" class="explanation"
+                  name="voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting" type="text"
+                  aria-describedby="voorbeeld-text-input-explanation-1-message">
+              </div>
             </div>
 
-            <label for="voorbeeld-text-input-warning-1">Voorbeeld invoerveld waarschuwing</label>
-            <div>
-              <p class="warning" id="voorbeeld-text-input-warning-1-message"><span>Waarschuwing:</span> Lorem ipsum
-                dolor set amet</p>
-              <input id="voorbeeld-text-input-warning-1" class="warning" name="voorbeeld-text-input-warning-1"
-                placeholder="Voorbeeld invoerveld waarschuwing" type="text"
-                aria-describedby="voorbeeld-text-input-warning-1-message">
+            <div class="notification">
+              <label for="voorbeeld-text-input-warning-1">Voorbeeld invoerveld waarschuwing</label>
+              <div>
+                <p class="warning" id="voorbeeld-text-input-warning-1-message"><span>Waarschuwing:</span> Lorem ipsum
+                  dolor set amet</p>
+                <input id="voorbeeld-text-input-warning-1" class="warning" name="voorbeeld-text-input-warning-1"
+                  placeholder="Voorbeeld invoerveld waarschuwing" type="text"
+                  aria-describedby="voorbeeld-text-input-warning-1-message">
+              </div>
             </div>
 
-            <label for="voorbeeld-tekstveld-error">Voorbeeld tekstveld foutmelding</label>
-            <div>
-              <textarea id="voorbeeld-tekstveld-error" class="error" name="voorbeeld-tekstveld-error"
-                placeholder="Voorbeeld tekstveld foutmelding" rows="3"
-                aria-describedby="voorbeeld-tekstveld-error-message" aria-invalid="true"></textarea>
-              <p class="error" id="voorbeeld-tekstveld-error-message">
-                <span>Foutmelding:</span> Lorem ipsum dolor set amet
-              </p>
+            <div class="notification">
+              <label for="voorbeeld-tekstveld-error">Voorbeeld tekstveld foutmelding</label>
+              <div>
+                <textarea id="voorbeeld-tekstveld-error" class="error" name="voorbeeld-tekstveld-error"
+                  placeholder="Voorbeeld tekstveld foutmelding" rows="3"
+                  aria-describedby="voorbeeld-tekstveld-error-message" aria-invalid="true"></textarea>
+                <p class="error" id="voorbeeld-tekstveld-error-message">
+                  <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                </p>
+              </div>
             </div>
 
-            <label for="voorbeeld-tekstveld-explanation">Voorbeeld tekstveld toelichting</label>
-            <div>
-              <p class="explanation" id="voorbeeld-tekstveld-explanation-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet
-              </p>
-              <textarea id="voorbeeld-tekstveld-explanation" class="explanation" name="voorbeeld-tekstveld-explanation"
-                placeholder="Voorbeeld tekstveld toelichting" rows="3"
-                aria-describedby="voorbeeld-tekstveld-explanation-message"></textarea>
+            <div class="notification">
+              <label for="voorbeeld-tekstveld-explanation">Voorbeeld tekstveld toelichting</label>
+              <div>
+                <p class="explanation" id="voorbeeld-tekstveld-explanation-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet
+                </p>
+                <textarea id="voorbeeld-tekstveld-explanation" class="explanation" name="voorbeeld-tekstveld-explanation"
+                  placeholder="Voorbeeld tekstveld toelichting" rows="3"
+                  aria-describedby="voorbeeld-tekstveld-explanation-message"></textarea>
+              </div>
             </div>
 
-            <label for="voorbeeld-tekstveld-warning">Voorbeeld tekstveld waarschuwing</label>
-            <div>
-              <p class="warning" id="voorbeeld-tekstveld-warning-message">
-                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-              </p>
-              <textarea id="voorbeeld-tekstveld-warning" class="warning" name="voorbeeld-tekstveld-warning"
-                placeholder="Voorbeeld tekstveld waarschuwing" rows="3"
-                aria-describedby="voorbeeld-tekstveld-warning-message"></textarea>
+            <div class="notification">
+              <label for="voorbeeld-tekstveld-warning">Voorbeeld tekstveld waarschuwing</label>
+              <div>
+                <p class="warning" id="voorbeeld-tekstveld-warning-message">
+                  <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+                </p>
+                <textarea id="voorbeeld-tekstveld-warning" class="warning" name="voorbeeld-tekstveld-warning"
+                  placeholder="Voorbeeld tekstveld waarschuwing" rows="3"
+                  aria-describedby="voorbeeld-tekstveld-warning-message"></textarea>
+              </div>
             </div>
 
             <label for="select-1">Selectielijst</label>
@@ -773,17 +879,19 @@ <h3>Lorem ipsum dolor set amet</h3>
               <option value="2" selected>Voorgeselecteerd</option>
             </select>
 
-            <label for="select-error">Selectielijst met foutmelding</label>
-            <div>
-              <p class="error" id="select-error-message">
-                <span>Foutmelding:</span> Lorem ipsum dolor set amet
-              </p>
-              <select id="select-error" name="select" class="error" aria-describedby="select-error-message"
-                aria-invalid="true">
-                <option value="1">Optie 1</option>
-                <option value="2">Optie 2</option>
-                <option value="3">Optie 3</option>
-              </select>
+            <div class="notification">
+              <label for="select-error">Selectielijst met foutmelding</label>
+              <div>
+                <p class="error" id="select-error-message">
+                  <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                </p>
+                <select id="select-error" name="select" class="error" aria-describedby="select-error-message"
+                  aria-invalid="true">
+                  <option value="1">Optie 1</option>
+                  <option value="2">Optie 2</option>
+                  <option value="3">Optie 3</option>
+                </select>
+              </div>
             </div>
 
             <label for="select-explanation">Selectielijst met toelichting</label>
@@ -832,8 +940,8 @@ <h3>Lorem ipsum dolor set amet</h3>
               <option value="3">Optie 3</option>
             </select>
 
-            <label for="select-mulitple-size-1">Meerdere opties selecteren</label>
-            <div class="explanation" role="group" id="select-mulitple-size-1-message">
+            <label for="select-multiple-size-1">Meerdere opties selecteren</label>
+            <div class="explanation" role="group" id="select-multiple-size-1-message">
               <span>Toelichting:</span>
               <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
                 voorbeelden:</p>
@@ -847,8 +955,8 @@ <h3>Lorem ipsum dolor set amet</h3>
               </ul>
             </div>
 
-            <select id="select-mulitple-size-1" name="select-mulitple-size-1" multiple size="3"
-              aria-describedby="select-mulitple-size-1-message">
+            <select id="select-multiple-size-1" name="select-multiple-size-1" multiple size="3"
+              aria-describedby="select-multiple-size-1-message">
               <option value="1">Optie 1</option>
               <option value="2">Optie 2</option>
               <option value="3">Optie 3</option>
@@ -1126,44 +1234,45 @@ <h3>Lorem ipsum dolor set amet</h3>
                 type="text">
             </div>
 
-            <div>
-              <label for="voorbeeld-text-input-error-with-link">Voorbeeld invoerveld
-                foutmelding</label>
+            <div class="notification">
+              <p class="error" id="voorbeeld-text-input-error-with-link-message">
+                <span>Foutmelding:</span> Lorem ipsum <a href="">dolor set amet</a>
+              </p>
+
               <div>
+                <label for="voorbeeld-text-input-error-with-link">Voorbeeld invoerveld
+                  foutmelding</label>
                 <input id="voorbeeld-text-input-error-with-link" class="error"
                   name="voorbeeld-text-input-error-with-link" placeholder="Voorbeeld invoerveld foutmelding" type="text"
                   aria-describedby="voorbeeld-text-input-error-with-link-message" aria-invalid="true">
-                <p class="error" id="voorbeeld-text-input-error-with-link-message">
-                  <span>Foutmelding:</span> Lorem ipsum <a href="">dolor set amet</a>
-                </p>
               </div>
             </div>
 
-            <div>
-              <label for="voorbeeld-text-input-warning-2">Voorbeeld invoerveld waarschuwing</label>
+            <div class="notification">
+              <p class="warning" id="voorbeeld-text-input-warning-2-message">
+                <span>Waarschuwing:</span> Lorem ipsum
+              </p>
               <div>
-                <p class="warning" id="voorbeeld-text-input-warning-2-message">
-                  <span>Waarschuwing:</span> Lorem ipsum
-                </p>
+                <label for="voorbeeld-text-input-warning-2">Voorbeeld invoerveld waarschuwing</label>
                 <input id="voorbeeld-text-input-warning-2" class="warning" name="voorbeeld-text-input-warning-2"
                   placeholder="Voorbeeld invoerveld waarschuwing" type="text"
                   aria-describedby="voorbeeld-text-input-warning-2-message">
               </div>
             </div>
 
-            <div>
-              <label for="voorbeeld-text-input-explanation-2">Voorbeeld invoerveld toelichting</label>
+            <div class="notification">
+              <p class="explanation" id="voorbeeld-text-input-explanation-2-message">
+                <span>Toelichting:</span> Lorem ipsum
+              </p>
               <div>
-                <p class="explanation" id="voorbeeld-text-input-explanation-2-message">
-                  <span>Toelichting:</span> Lorem ipsum
-                </p>
+                <label for="voorbeeld-text-input-explanation-2">Voorbeeld invoerveld toelichting</label>
                 <input id="voorbeeld-text-input-explanation-2" class="explanation"
                   name="voorbeeld-text-input-explanation-2" placeholder="Voorbeeld invoerveld toelichting" type="text"
                   aria-describedby="voorbeeld-text-input-explanation-2-message">
               </div>
             </div>
 
-            <div class="option-group">
+            <div class="option-group notification">
               <div class="checkbox">
                 <input type="checkbox" id="checkbox-example-default-3" name="standaard-checkbox" aria-invalid="true"
                   aria-describedby="checkbox-example-default-3-message">
@@ -1174,7 +1283,7 @@ <h3>Lorem ipsum dolor set amet</h3>
               </p>
             </div>
 
-            <div class="option-group required">
+            <div class="option-group required notification">
               <span class="nota-bene">Dit veld is verplicht</span>
               <div class="checkbox">
                 <input type="checkbox" id="checkbox-example-required-3" name="voorwaarden" required aria-invalid="true"
@@ -1186,14 +1295,15 @@ <h3>Lorem ipsum dolor set amet</h3>
               </p>
             </div>
 
-            <div>
-              <label for="voorbeeld-text-input-4">Voorbeeld text input</label>
+            <div class="notification">
+              <p class="explanation" id="voorbeeld-text-input-4-message">
+                <span>Toelichting:</span> Lorem ipsum dolor set amet.
+              </p>
+              
               <div>
+                <label for="voorbeeld-text-input-4">Voorbeeld text input</label>
                 <input id="voorbeeld-text-input-4" name="voorbeeld-text-input-4" placeholder="voorbeeld text input"
                   type="text" aria-describedby="voorbeeld-text-input-4-message">
-                <p class="explanation" id="voorbeeld-text-input-4-message">
-                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
-                </p>
               </div>
             </div>
 
@@ -1234,22 +1344,23 @@ <h3>Lorem ipsum dolor set amet</h3>
               </div>
             </div>
 
-            <div>
-              <label for="select-multiple-2">Meerdere opties selecteren</label>
+            <div class="notification">
+              <div class="explanation" role="group" id="select-multiple-2-message">
+                <span>Toelichting:</span>
+                <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
+                  voorbeelden:</p>
+                <ul>
+                  <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de
+                    gewenste opties.
+                  </li>
+                  <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
+                    gewenste opties.
+                  </li>
+                </ul>
+              </div>
+              
               <div>
-                <div class="explanation" role="group" id="select-multiple-2-message">
-                  <span>Toelichting:</span>
-                  <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
-                    voorbeelden:</p>
-                  <ul>
-                    <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de
-                      gewenste opties.
-                    </li>
-                    <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
-                      gewenste opties.
-                    </li>
-                  </ul>
-                </div>
+                <label for="select-multiple-2">Meerdere opties selecteren</label>
                 <select id="select-multiple-2" name="select-multiple-2" multiple
                   aria-describedby="select-multiple-2-message">
                   <option value="1">Optie 1</option>
@@ -1259,25 +1370,25 @@ <h3>Lorem ipsum dolor set amet</h3>
               </div>
             </div>
 
-            <div>
-              <label for="select-mulitple-size-2">Meerdere opties selecteren</label>
+            <div class="notification">
+              <div class="explanation" role="group" id="select-multiple-size-2-message">
+                <span>Toelichting:</span>
+                <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
+                  voorbeelden:</p>
+                <ul>
+                  <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de
+                    gewenste opties.
+                  </li>
+                  <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
+                    gewenste opties.
+                  </li>
+                </ul>
+              </div>
+              
               <div>
-                <div class="explanation" role="group" id="select-mulitple-size-2-message">
-                  <span>Toelichting:</span>
-                  <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
-                    voorbeelden:</p>
-                  <ul>
-                    <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis de
-                      gewenste opties.
-                    </li>
-                    <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
-                      gewenste opties.
-                    </li>
-                  </ul>
-                </div>
-
-                <select id="select-mulitple-size-2" name="select-mulitple-size-2" multiple size="3"
-                  aria-describedby="select-mulitple-size-2-message">
+                <label for="select-multiple-size-2">Meerdere opties selecteren</label>
+                <select id="select-multiple-size-2" name="select-multiple-size-2" multiple size="3"
+                  aria-describedby="select-multiple-size-2-message">
                   <option value="1">Optie 1</option>
                   <option value="2">Optie 2</option>
                   <option value="3">Optie 3</option>
@@ -1519,35 +1630,41 @@ <h3>Lorem ipsum dolor set amet</h3>
 
             <fieldset>
               <legend>Meldingen</legend>
-              <label for="voorbeeld-text-input-error-4">Voorbeeld invoerveld foutmelding</label>
+              <div class="notification">
+                <label for="voorbeeld-text-input-error-4">Voorbeeld invoerveld foutmelding</label>
 
-              <div>
-                <input id="voorbeeld-text-input-error-4" class="error" name="voorbeeld-text-input-error-4"
-                  placeholder="Voorbeeld invoerveld foutmelding" type="text"
-                  aria-describedby="voorbeeld-text-input-error-4-message" aria-invalid="true">
-                <p class="error" id="voorbeeld-text-input-error-4-message">
-                  <span>Foutmelding:</span> Lorem ipsum dolor set amet
-                </p>
+                <div>
+                  <input id="voorbeeld-text-input-error-4" class="error" name="voorbeeld-text-input-error-4"
+                    placeholder="Voorbeeld invoerveld foutmelding" type="text"
+                    aria-describedby="voorbeeld-text-input-error-4-message" aria-invalid="true">
+                  <p class="error" id="voorbeeld-text-input-error-4-message">
+                    <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                  </p>
+                </div>
               </div>
 
-              <label for="voorbeeld-text-input-explanation-4">Voorbeeld invoerveld toelichting</label>
-              <div>
-                <p class="explanation" id="voorbeeld-text-input-explanation-4-message">
-                  <span>Toelichting:</span> Lorem ipsum dolor set amet
-                </p>
-                <input id="voorbeeld-text-input-explanation-4" class="explanation"
-                  name="voorbeeld-text-input-explanation-4" placeholder="Voorbeeld invoerveld toelichting" type="text"
-                  aria-describedby="voorbeeld-text-input-explanation-4">
+              <div class="notification">
+                <label for="voorbeeld-text-input-explanation-4">Voorbeeld invoerveld toelichting</label>
+                <div>
+                  <p class="explanation" id="voorbeeld-text-input-explanation-4-message">
+                    <span>Toelichting:</span> Lorem ipsum dolor set amet
+                  </p>
+                  <input id="voorbeeld-text-input-explanation-4" class="explanation"
+                    name="voorbeeld-text-input-explanation-4" placeholder="Voorbeeld invoerveld toelichting" type="text"
+                    aria-describedby="voorbeeld-text-input-explanation-4">
+                </div>
               </div>
 
-              <label for="voorbeeld-text-input-warning-5">Voorbeeld invoerveld waarschuwing</label>
-              <div>
-                <p class="warning" id="voorbeeld-text-input-warning-5-message">
-                  <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-                </p>
-                <input id="voorbeeld-text-input-warning-5" class="warning" name="voorbeeld-text-input-warning-5"
-                  placeholder="Voorbeeld invoerveld waarschuwing" type="text"
-                  aria-describedby="voorbeeld-text-input-warning-5-message">
+              <div class="notification">
+                <label for="voorbeeld-text-input-warning-5">Voorbeeld invoerveld waarschuwing</label>
+                <div>
+                  <p class="warning" id="voorbeeld-text-input-warning-5-message">
+                    <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+                  </p>
+                  <input id="voorbeeld-text-input-warning-5" class="warning" name="voorbeeld-text-input-warning-5"
+                    placeholder="Voorbeeld invoerveld waarschuwing" type="text"
+                    aria-describedby="voorbeeld-text-input-warning-5-message">
+                </div>
               </div>
             </fieldset>
 
@@ -1847,7 +1964,7 @@ <h3>Lorem ipsum dolor set amet</h3>
 
             <fieldset>
               <legend>Velden met validatie</legend>
-              <div>
+              <div class="notification">
                 <label for="text-form-username-3">Gebruikersnaam</label>
                 <div>
                   <input id="text-form-username-3" name="text-form-username-3" pattern="^[a-zA-Z0-9_.-]*$"
@@ -1860,19 +1977,17 @@ <h3>Lorem ipsum dolor set amet</h3>
                 </div>
               </div>
 
-              <div>
-                <label for="text-form-password-2">Wachtwoord</label>
-
+              <div class="notification">
                 <div>
+                  <label for="text-form-password-2">Wachtwoord</label>
                   <input id="text-form-password-2" name="text-form-password-2"
                     pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" placeholder="wachtwoord"
                     aria-describedby="text-form-password-2-message" type="password">
-
-                  <p class="explanation" id="text-form-password-2-message">
-                    <span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan
-                    minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.
-                  </p>
                 </div>
+                <p class="explanation" id="text-form-password-2-message">
+                  <span>Toelichting:</span> Wachtwoord moet minimaal 8 tekens bevatten waarvan
+                  minimaal 1 hoofdletter, 1 kleineletter en 1 cijfer.
+                </p>
               </div>
             </fieldset>
 
@@ -1985,22 +2100,23 @@ <h3>Lorem ipsum dolor set amet</h3>
                 </div>
               </div>
 
-              <div>
-                <label for="select-multiple">Meerdere opties selecteren</label>
+              <div class="notification">
+                <div class="explanation" role="group" id="select-multiple-message">
+                  <span>Toelichting:</span>
+                  <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
+                    voorbeelden:</p>
+                  <ul>
+                    <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis
+                      de gewenste opties.
+                    </li>
+                    <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
+                      gewenste opties.
+                    </li>
+                  </ul>
+                </div>
+                
                 <div>
-                  <div class="explanation" role="group" id="select-multiple-message">
-                    <span>Toelichting:</span>
-                    <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
-                      voorbeelden:</p>
-                    <ul>
-                      <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis
-                        de gewenste opties.
-                      </li>
-                      <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
-                        gewenste opties.
-                      </li>
-                    </ul>
-                  </div>
+                  <label for="select-multiple">Meerdere opties selecteren</label>
                   <select id="select-multiple" name="select-multiple" multiple
                     aria-describedby="select-multiple-message">
                     <option value="1">Optie 1</option>
@@ -2010,25 +2126,26 @@ <h3>Lorem ipsum dolor set amet</h3>
                 </div>
               </div>
 
-              <div>
-                <label for="select-mulitple-size-3">Meerdere opties selecteren</label>
+              <div class="notification">
+                <div class="explanation" role="group" id="select-multiple-size-3-message">
+                  <span>Toelichting:</span>
+                  <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
+                    voorbeelden:</p>
+                  <ul>
+                    <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis
+                      de gewenste opties.
+                    </li>
+                    <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
+                      gewenste opties.
+                    </li>
+                  </ul>
+                </div>
+
                 <div>
-                  <div class="explanation" role="group" id="select-mulitple-size-3-message">
-                    <span>Toelichting:</span>
-                    <p>Het selecteren van meerdere opties hangt af van uw gebruikte systeem. Enkele
-                      voorbeelden:</p>
-                    <ul>
-                      <li>Windows: Houd de <code>ctrl</code>-knop ingedrukt en selecteer met de muis
-                        de gewenste opties.
-                      </li>
-                      <li>Mac: Houd de <code>cmd</code>-knop ingedrukt en selecteer met de muis de
-                        gewenste opties.
-                      </li>
-                    </ul>
-                  </div>
+                <label for="select-multiple-size-3">Meerdere opties selecteren</label>
 
-                  <select id="select-mulitple-size-3" name="select-mulitple-size-3" multiple size="3"
-                    aria-describedby="select-mulitple-size-3-message">
+                  <select id="select-multiple-size-3" name="select-multiple-size-3" multiple size="3"
+                    aria-describedby="select-multiple-size-3-message">
                     <option value="1">Optie 1</option>
                     <option value="2">Optie 2</option>
                     <option value="3">Optie 3</option>
@@ -2383,102 +2500,119 @@ <h3>Lorem ipsum dolor set amet</h3>
                 ipsum dolor set amet</p>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
-              reguliere toelichting</label>
-            <div>
-              <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
-                name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
-                type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-explanation-1">Voorbeeld invoerveld met
+                reguliere toelichting</label>
+              <div>
+                <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <input id="help-simpel-voorbeeld-text-input-explanation-1" class="explanation"
+                  name="help-simpel-voorbeeld-text-input-explanation-1" placeholder="Voorbeeld invoerveld toelichting"
+                  type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-1-message">
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
-              waarschuwing</label>
-            <div>
-              <p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
-                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
-                name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
-                type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-warning-1">Voorbeeld invoerveld
+                waarschuwing</label>
+              <div>
+                <p class="warning" id="help-simpel-voorbeeld-text-input-warning-1-message">
+                  <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+                </p>
+                <input id="help-simpel-voorbeeld-text-input-warning-1" class="warning"
+                  name="help-simpel-voorbeeld-text-input-warning-1" placeholder="Voorbeeld invoerveld waarschuwing"
+                  type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-1-message">
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
-              toelichting</label>
-            <div>
-              <p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
-                placeholder="Jouw vraag of opmerking" rows="5"
-                aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-tekstveld-2">Voorbeeld tekstveld met reguliere
+                toelichting</label>
+              <div>
+                <p class="explanation" id="help-simpel-voorbeeld-tekstveld-2-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <textarea id="help-simpel-voorbeeld-tekstveld-2" name="help-simpel-voorbeeld-tekstveld-2"
+                  placeholder="Jouw vraag of opmerking" rows="5"
+                  aria-describedby="help-simpel-voorbeeld-tekstveld-2-message"></textarea>
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
-              met ingeklapte toelichting</label>
-            <div>
-              <input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
-                name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
-                placeholder="Voorbeeld invoerveld toelichting" type="text">
-              <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
-                data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-1">Voorbeeld invoerveld
+                met ingeklapte toelichting</label>
+              <div>
+                <input id="help-simpel-voorbeeld-text-input-collapsed-explanation-1" class="explanation"
+                  name="help-simpel-voorbeeld-text-input-collapsed-explanation-1"
+                  placeholder="Voorbeeld invoerveld toelichting" type="text">
+                <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
+                  data-close-label="Sluit toelichting bij het veld: Voorbeeld text input">Lorem ipsum dolor set amet.</p>
+              </div>
             </div>
 
-            <label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
-              toelichting</label>
-            <div>
-              <textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
-                placeholder="Jouw vraag of opmerking" rows="5"
-                aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
-              <p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
+            <div class="notification">
+              <label for="help-simpel-voorbeeld-tekstveld-3">Voorbeeld tekstveld met reguliere
+                toelichting</label>
+              <div>
+                <textarea id="help-simpel-voorbeeld-tekstveld-3" name="help-simpel-voorbeeld-tekstveld-3"
+                  placeholder="Jouw vraag of opmerking" rows="5"
+                  aria-describedby="help-simpel-voorbeeld-tekstveld-3-message"></textarea>
+                <p class="explanation" id="help-simpel-voorbeeld-tekstveld-3-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+              </div>
             </div>
 
-            <label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
-            <div>
-              <p class="explanation" id="select-with-explanation-3-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <select id="select-with-explanation-3" name="select-with-explanation-3"
-                aria-describedby="select-with-explanation-3-message">
-                <option value="1">Optie 1</option>
-                <option value="2">Optie 2</option>
-                <option value="3">Optie 3</option>
-              </select>
+            <div class="notification">
+              <label for="select-with-explanation-3">Voorbeeld select met reguliere toelichting</label>
+              <div>
+                <p class="explanation" id="select-with-explanation-3-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <select id="select-with-explanation-3" name="select-with-explanation-3"
+                  aria-describedby="select-with-explanation-3-message">
+                  <option value="1">Optie 1</option>
+                  <option value="2">Optie 2</option>
+                  <option value="3">Optie 3</option>
+                </select>
+              </div>
             </div>
 
-            <label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
-              toelichting</label>
-            <div>
-              <select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
-                aria-describedby="select-with-collapsed-explanation-1-message">
-                <option value="1">Optie 1</option>
-                <option value="2">Optie 2</option>
-                <option value="3">Optie 3</option>
-              </select>
-              <p class="explanation" id="select-with-collapsed-explanation-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
+            <div class="notification">
+              <label for="select-with-collapsed-explanation-1">Voorbeeld select met ingeklapte
+                toelichting</label>
+              <div>
+                <select id="select-with-collapsed-explanation-1" name="select-with-collapsed-explanation-1"
+                  aria-describedby="select-with-collapsed-explanation-1-message">
+                  <option value="1">Optie 1</option>
+                  <option value="2">Optie 2</option>
+                  <option value="3">Optie 3</option>
+                </select>
+                <p class="explanation" id="select-with-collapsed-explanation-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+              </div>
             </div>
 
+
             <fieldset class="grouped-choice-list">
               <legend>Radio-selectielijst met reguliere toelichting</legend>
-              <p class="explanation" id="help-radio-list-item-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
-              <div>
-                <div class="radio">
-                  <input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
-                    aria-describedby="help-radio-list-item-1-message">
-                  <label for="help-radio-list-item-1">Optie 1</label>
-                </div>
-                <div class="radio">
-                  <input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
-                    aria-describedby="help-radio-list-item-1-message">
-                  <label for="help-radio-list-item-2">Optie 2</label>
+              <div class="notification">
+                <p class="explanation" id="help-radio-list-item-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
+                <div>
+                  <div class="radio">
+                    <input type="radio" id="help-radio-list-item-1" name="radio-option-1" value="value 1"
+                      aria-describedby="help-radio-list-item-1-message">
+                    <label for="help-radio-list-item-1">Optie 1</label>
+                  </div>
+                  <div class="radio">
+                    <input type="radio" id="help-radio-list-item-2" name="radio-option-2" value="value 2"
+                      aria-describedby="help-radio-list-item-1-message">
+                    <label for="help-radio-list-item-2">Optie 2</label>
+                  </div>
                 </div>
               </div>
             </fieldset>
@@ -2486,21 +2620,23 @@ <h3>Lorem ipsum dolor set amet</h3>
 
             <fieldset class="grouped-choice-list">
               <legend>Radio-selectielijst met ingeklapte toelichting</legend>
-              <div>
-                <div class="radio">
-                  <input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
-                    aria-describedby="help-collapsed-radio-list-item-1-message">
-                  <label for="help-collapsed-radio-list-item-1">Optie 1</label>
-                </div>
-                <div class="radio">
-                  <input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
-                    aria-describedby="help-collapsed-radio-list-item-1-message">
-                  <label for="help-collapsed-radio-list-item-2">Optie 2</label>
+              <div class="notification">
+                <div>
+                  <div class="radio">
+                    <input type="radio" id="help-collapsed-radio-list-item-1" name="radio-option-1" value="value 1"
+                      aria-describedby="help-collapsed-radio-list-item-1-message">
+                    <label for="help-collapsed-radio-list-item-1">Optie 1</label>
+                  </div>
+                  <div class="radio">
+                    <input type="radio" id="help-collapsed-radio-list-item-2" name="radio-option-2" value="value 2"
+                      aria-describedby="help-collapsed-radio-list-item-1-message">
+                    <label for="help-collapsed-radio-list-item-2">Optie 2</label>
+                  </div>
                 </div>
+                <p class="explanation" id="help-collapsed-radio-list-item-1-message">
+                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
+                </p>
               </div>
-              <p class="explanation" id="help-collapsed-radio-list-item-1-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet.
-              </p>
             </fieldset>
 
             <fieldset>
@@ -2584,52 +2720,54 @@ <h3>Lorem ipsum dolor set amet</h3>
                 naam. Lorem ipsum dolor set amet.</label>
             </div>
 
-            <div>
-              <label for="help-simpel-voorbeeld-text-input-error-1">Voorbeeld invoerveld
-                foutmelding</label>
+            <div class="notification">
+              
               <div>
+                <label for="help-simpel-voorbeeld-text-input-error-1">Voorbeeld invoerveld
+                  foutmelding</label>
                 <input id="help-simpel-voorbeeld-text-input-error-1" class="error"
                   name="help-simpel-voorbeeld-text-input-error-1" placeholder="Voorbeeld invoerveld foutmelding"
                   type="text" aria-describedby="help-simpel-voorbeeld-text-input-error-1-message" aria-invalid="true">
-                <p class="error" id="help-simpel-voorbeeld-text-input-error-1-message">
-                  <span>Foutmelding:</span> Lorem ipsum dolor set amet
-                </p>
               </div>
+              <p class="error" id="help-simpel-voorbeeld-text-input-error-1-message">
+                <span>Foutmelding:</span> Lorem ipsum dolor set amet
+              </p>
             </div>
 
-            <div>
-              <label for="help-simpel-voorbeeld-text-input-explanation-2">Voorbeeld invoerveld met
-                reguliere toelichting</label>
+            <div class="notification">
               <div>
-                <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-2-message">
-                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
-                </p>
+                <label for="help-simpel-voorbeeld-text-input-explanation-2">Voorbeeld invoerveld met
+                  reguliere toelichting</label>
                 <input id="help-simpel-voorbeeld-text-input-explanation-2" class="explanation"
                   name="help-simpel-voorbeeld-text-input-explanation-2" placeholder="Voorbeeld invoerveld toelichting"
                   type="text" aria-describedby="help-simpel-voorbeeld-text-input-explanation-2-message">
               </div>
+              <p class="explanation" id="help-simpel-voorbeeld-text-input-explanation-2-message">
+                <span>Toelichting:</span> Lorem ipsum dolor set amet.
+              </p>
             </div>
 
-            <div>
-              <label for="help-simpel-voorbeeld-text-input-warning-2">Voorbeeld invoerveld
-                waarschuwing</label>
+            <div class="notification">
+              <p class="warning" id="help-simpel-voorbeeld-text-input-warning-2-message">
+                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+              </p>
+              
               <div>
-                <p class="warning" id="help-simpel-voorbeeld-text-input-warning-2-message">
-                  <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-                </p>
+                <label for="help-simpel-voorbeeld-text-input-warning-2">Voorbeeld invoerveld
+                  waarschuwing</label>
                 <input id="help-simpel-voorbeeld-text-input-warning-2" class="warning"
                   name="help-simpel-voorbeeld-text-input-warning-2" placeholder="Voorbeeld invoerveld waarschuwing"
                   type="text" aria-describedby="help-simpel-voorbeeld-text-input-warning-2-message">
               </div>
             </div>
 
-            <div>
-              <label for="help-simpel-voorbeeld-tekstveld-5">Voorbeeld tekstveld met reguliere
-                toelichting</label>
+            <div class="notification">
+              <p class="explanation" id="help-simpel-voorbeeld-tekstveld-5-message">
+                <span>Toelichting:</span> Lorem ipsum dolor set amet.
+              </p>
               <div>
-                <p class="explanation" id="help-simpel-voorbeeld-tekstveld-5-message">
-                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
-                </p>
+                <label for="help-simpel-voorbeeld-tekstveld-5">Voorbeeld tekstveld met reguliere
+                  toelichting</label>
                 <textarea id="help-simpel-voorbeeld-tekstveld-5" name="help-simpel-voorbeeld-tekstveld-5"
                   placeholder="Jouw vraag of opmerking" rows="5"
                   aria-describedby="help-simpel-voorbeeld-tekstveld-5-message">
@@ -2637,19 +2775,20 @@ <h3>Lorem ipsum dolor set amet</h3>
               </div>
             </div>
 
-            <div>
-              <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-2">Voorbeeld
-                invoerveld met ingeklapte toelichting</label>
+            <div class="notification">
+             
               <div>
+                <label for="help-simpel-voorbeeld-text-input-collapsed-explanation-2">Voorbeeld
+                  invoerveld met ingeklapte toelichting</label>
                 <input id="help-simpel-voorbeeld-text-input-collapsed-explanation-2" class="explanation"
                   name="help-simpel-voorbeeld-text-input-collapsed-explanation-2"
                   placeholder="Voorbeeld invoerveld toelichting" type="text"
                   aria-describedby="help-simpel-voorbeeld-text-input-collapsed-explanation-2-message">
-                <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
+              </div>
+              <p class="explanation" data-open-label="Toelichting bij het veld: Voorbeeld text input"
                   data-close-label="Sluit toelichting bij het veld: Voorbeeld text input"
                   id="help-simpel-voorbeeld-text-input-collapsed-explanation-2-message"><span>Toelichting:</span> Lorem
                   ipsum dolor set amet.</p>
-              </div>
             </div>
 
             <div>
@@ -2667,13 +2806,14 @@ <h3>Lorem ipsum dolor set amet</h3>
               </div>
             </div>
 
-            <div>
-              <label for="select-with-explanation-1">Voorbeeld selectielijst met reguliere
-                toelichting</label>
+            <div class="notification">
+              <p class="explanation" id="select-with-explanation-1-message">
+                <span>Toelichting:</span> Lorem ipsum dolor set amet.
+              </p>
+             
               <div>
-                <p class="explanation" id="select-with-explanation-1-message">
-                  <span>Toelichting:</span> Lorem ipsum dolor set amet.
-                </p>
+                <label for="select-with-explanation-1">Voorbeeld selectielijst met reguliere
+                  toelichting</label>
                 <select id="select-with-explanation-1" name="select-with-explanation-1"
                   aria-describedby="select-with-explanation-1-message">
                   <option value="1">Optie 1</option>
diff --git a/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html b/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html
new file mode 100644
index 00000000..23ae9235
--- /dev/null
+++ b/docs/documentation/components/form-fieldset-horizontal-view-notification-test.html
@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="nl">
+
+    <head>
+        <meta charset="UTF-8" />
+        <title>Notificatie binnen formulier met fieldsets</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link href="../../static/css/main.css" rel="stylesheet" />
+        <link href="../../static/img/favicon.ico" rel="shortcut icon" />
+        <script defer src="../../static/js/manon.js"></script>
+    </head>
+
+    <body id="index" class="documentation">
+        <header>
+            <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
+
+            <nav aria-label="Hoofdnavigatie">
+                <div>
+                    <ul>
+                        <li><a href="../../index.html">Home</a></li>
+                        <li><a href="../components.html">Componenten</a></li>
+                        <li><a href="../documentation.html">Documentatie</a></li>
+                    </ul>
+                </div>
+            </nav>
+
+            <nav class="breadcrumb-bar">
+                <div>
+                    <ul>
+                        <li><a href="../components.html">Componenten</a></li>
+                        <li><a href="./forms.html">Formulieren</a></li>
+                        <li><a href="./form-notification.html">Notificatie binnen formulier met fieldsets</a></li>
+                        <li>
+                            <a href="#" aria-current="page">Tests en voorbeelden</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
+
+        <main id="main-content">
+            <article>
+                <div>
+                    <section id="introduction">
+                        <h1>Notificatie binnen formulier met fieldsets testpagina</h1>
+                        <p>Overzicht van het element in mogelijke structuren om te testen.</p>
+                    </section>
+
+                    <section id="tests">
+                        <h2>Voorbeelden</h2>
+                        <h3>Notificatie onder het invoerveld</h3>
+                        <h4>Visueel voorbeeld foutmelding:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error">Input</label>
+                                <input id="input-error" class="error" value="Lorem ipsum"
+                                    aria-describedby="input-error-message" aria-invalid="true">
+                                <p class="error" id="input-error-message">
+                                    <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                                </p>
+                            </fieldset>
+                            
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error">Input&lt;/label>
+        &lt;input id="input-error" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-message" aria-invalid="true">
+        &lt;p class="error" id="input-error-message">
+            &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+    &lt;/fieldset>
+    
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven het invoerveld</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-explanation">Input</label>
+                                <p class="explanation" id="input-explanation-message">
+                                    <span>Toelichting:</span> Lorem ipsum dolor set amet
+                                </p>
+                                <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                                        aria-describedby="input-explanation-message" aria-invalid="true">
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-explanation">Input&lt;/label>
+        &lt;p class="explanation" id="input-explanation-message">
+            &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+        &lt;input id="input-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="input-explanation-message" aria-invalid="true">
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven checkbox</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <p class="explanation" id="checkbox-explanation">
+                                    <span>Toelichting:</span> Lorem ipsum dolor set amet
+                                </p>
+                                <div class="checkbox">
+                                    <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+                                    <label for="checkbox-explanation">Lorem ipsum</label>
+                                </div>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;p class="explanation" id="checkbox-explanation">
+            &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+        &lt;div class="checkbox">
+            &lt;input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+            &lt;label for="checkbox-explanation">Lorem ipsum&lt;/label>
+        &lt;/div>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven radio-button</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <p class="explanation" id="radio-explanation-message">
+                                <span>Toelichting:</span> Lorem ipsum dolor set amet
+                            </p>
+                            <div class="radio">
+                                <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+                                  aria-describedby="radio-explanation-message">
+                                <label for="radio-explanation">Optie 1</label>
+                              </div>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;p class="explanation" id="radio-explanation-message">
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;div class="radio">
+        &lt;input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        &lt;label for="radio-explanation">Optie 1&lt;/label>
+        &lt;/div>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Link binnen notificatie</h3>
+                        <h4>Visueel voorbeeld waarschuwing:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-warning-link">Input</label>
+                                <input id="input-warning-link" class="warning" value="Lorem ipsum"
+                                    aria-describedby="input-warning-link-message" aria-invalid="true">
+                                <p class="warning" id="input-warning-link-message">
+                                    <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                </p>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-warning-link">Input&lt;/label>
+        &lt;input id="input-warning-link" class="warning" value="Lorem ipsum"
+            aria-describedby="input-warning-link-message" aria-invalid="true">
+        &lt;p class="warning" id="input-warning-link-message">
+            &lt;span>Waarschuwing:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+        &lt;/p>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Bloknotificatie:</h3>
+                        <h4>Visueel voorbeeld:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error-block">Input</label>
+                                <input id="input-error-block" class="error" value="Lorem ipsum"
+                                    aria-describedby="input-error-block-message" aria-invalid="true">
+                                    <div class="error" role="group" aria-label="foutmelding">
+                                        <span>Foutmelding:</span>
+                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+                                        <ul>
+                                        <li>Lorem ipsum</li>
+                                        <li>Lorem ipsum</li>
+                                        </ul>
+                                    </div>
+                                </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error-block">Input&lt;/label>
+        &lt;input id="input-error-block" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-block-message" aria-invalid="true">
+            &lt;div class="error" role="group" aria-label="foutmelding">
+                &lt;span>Foutmelding:&lt;/span>
+                &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.&lt;/p>
+                &lt;ul>
+                &lt;li>Lorem ipsum&lt;/li>
+                &lt;li>Lorem ipsum&lt;/li>
+                &lt;/ul>
+            &lt;/div>
+        &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Span:</h3>
+                        <h4>Visueel voorbeeld:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-confirmation">Input</label>
+                                <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+                                    aria-describedby="input-confirmation-message" aria-invalid="true">
+                                    <span class="confirmation" id="input-confirmation-message">
+                                        <span>Bevestiging:</span> Lorem ipsum dolor set amet
+                                    </span>
+                                <button type="submit">Verzend</button>
+                            </fieldset>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-confirmation">Input&lt;/label>
+        &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+            aria-describedby="input-confirmation-message" aria-invalid="true">
+            &lt;span class="confirmation" id="input-confirmation-message">
+                &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+            &lt;/span>
+        &lt;button type="submit">Verzend&lt;/button>
+    &lt;/fieldset>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Gegroepeerde content met notificatie</h3>
+                        <p><strong>Let op:</strong> Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.</p>
+                        <h4>Visueel voorbeeld gegroepeerde input en label:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <div>
+                                    <label for="input-error-grouped-label">Input</label>
+                                    <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                                        aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+                                </div>
+                                <p class="error" id="input-error-grouped-label-message">
+                                    <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                </p>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;div>
+            &lt;label for="input-error-grouped-label">Input&lt;/label>
+            &lt;input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+        &lt;/div>
+        &lt;p class="error" id="input-error-grouped-label-message">
+            &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+        &lt;/p>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h4>Visueel voorbeeld gegroepeerde input en notificatie:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error-grouped-notification">Input</label>
+                                <div>
+                                    <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                                        aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+                                    <p class="error" id="input-error-grouped-notification-message">
+                                        <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                    </p>
+                                </div>
+                            </fieldset>
+
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error-grouped-notification">Input&lt;/label>
+        &lt;div>
+            &lt;input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+            &lt;p class="error" id="input-error-grouped-notification-message">
+                &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+            &lt;/p>
+        &lt;/div>
+    &lt;/fieldset>
+
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+                    </section>
+
+                </div>
+            </article>
+        </main>
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/docs/documentation/components/form-fieldset-notification-test.html b/docs/documentation/components/form-fieldset-notification-test.html
new file mode 100644
index 00000000..23ae9235
--- /dev/null
+++ b/docs/documentation/components/form-fieldset-notification-test.html
@@ -0,0 +1,376 @@
+<!DOCTYPE html>
+<html lang="nl">
+
+    <head>
+        <meta charset="UTF-8" />
+        <title>Notificatie binnen formulier met fieldsets</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link href="../../static/css/main.css" rel="stylesheet" />
+        <link href="../../static/img/favicon.ico" rel="shortcut icon" />
+        <script defer src="../../static/js/manon.js"></script>
+    </head>
+
+    <body id="index" class="documentation">
+        <header>
+            <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
+
+            <nav aria-label="Hoofdnavigatie">
+                <div>
+                    <ul>
+                        <li><a href="../../index.html">Home</a></li>
+                        <li><a href="../components.html">Componenten</a></li>
+                        <li><a href="../documentation.html">Documentatie</a></li>
+                    </ul>
+                </div>
+            </nav>
+
+            <nav class="breadcrumb-bar">
+                <div>
+                    <ul>
+                        <li><a href="../components.html">Componenten</a></li>
+                        <li><a href="./forms.html">Formulieren</a></li>
+                        <li><a href="./form-notification.html">Notificatie binnen formulier met fieldsets</a></li>
+                        <li>
+                            <a href="#" aria-current="page">Tests en voorbeelden</a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+        </header>
+
+        <main id="main-content">
+            <article>
+                <div>
+                    <section id="introduction">
+                        <h1>Notificatie binnen formulier met fieldsets testpagina</h1>
+                        <p>Overzicht van het element in mogelijke structuren om te testen.</p>
+                    </section>
+
+                    <section id="tests">
+                        <h2>Voorbeelden</h2>
+                        <h3>Notificatie onder het invoerveld</h3>
+                        <h4>Visueel voorbeeld foutmelding:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error">Input</label>
+                                <input id="input-error" class="error" value="Lorem ipsum"
+                                    aria-describedby="input-error-message" aria-invalid="true">
+                                <p class="error" id="input-error-message">
+                                    <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                                </p>
+                            </fieldset>
+                            
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error">Input&lt;/label>
+        &lt;input id="input-error" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-message" aria-invalid="true">
+        &lt;p class="error" id="input-error-message">
+            &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+    &lt;/fieldset>
+    
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven het invoerveld</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-explanation">Input</label>
+                                <p class="explanation" id="input-explanation-message">
+                                    <span>Toelichting:</span> Lorem ipsum dolor set amet
+                                </p>
+                                <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                                        aria-describedby="input-explanation-message" aria-invalid="true">
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-explanation">Input&lt;/label>
+        &lt;p class="explanation" id="input-explanation-message">
+            &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+        &lt;input id="input-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="input-explanation-message" aria-invalid="true">
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven checkbox</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <p class="explanation" id="checkbox-explanation">
+                                    <span>Toelichting:</span> Lorem ipsum dolor set amet
+                                </p>
+                                <div class="checkbox">
+                                    <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+                                    <label for="checkbox-explanation">Lorem ipsum</label>
+                                </div>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;p class="explanation" id="checkbox-explanation">
+            &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/p>
+        &lt;div class="checkbox">
+            &lt;input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+            &lt;label for="checkbox-explanation">Lorem ipsum&lt;/label>
+        &lt;/div>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Notificatie boven radio-button</h3>
+                        <h4>Visueel voorbeeld toelichting:</h4>
+                        <form action="" method="post">
+                            <p class="explanation" id="radio-explanation-message">
+                                <span>Toelichting:</span> Lorem ipsum dolor set amet
+                            </p>
+                            <div class="radio">
+                                <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+                                  aria-describedby="radio-explanation-message">
+                                <label for="radio-explanation">Optie 1</label>
+                              </div>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;p class="explanation" id="radio-explanation-message">
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;div class="radio">
+        &lt;input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        &lt;label for="radio-explanation">Optie 1&lt;/label>
+        &lt;/div>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Link binnen notificatie</h3>
+                        <h4>Visueel voorbeeld waarschuwing:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-warning-link">Input</label>
+                                <input id="input-warning-link" class="warning" value="Lorem ipsum"
+                                    aria-describedby="input-warning-link-message" aria-invalid="true">
+                                <p class="warning" id="input-warning-link-message">
+                                    <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                </p>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-warning-link">Input&lt;/label>
+        &lt;input id="input-warning-link" class="warning" value="Lorem ipsum"
+            aria-describedby="input-warning-link-message" aria-invalid="true">
+        &lt;p class="warning" id="input-warning-link-message">
+            &lt;span>Waarschuwing:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+        &lt;/p>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Bloknotificatie:</h3>
+                        <h4>Visueel voorbeeld:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error-block">Input</label>
+                                <input id="input-error-block" class="error" value="Lorem ipsum"
+                                    aria-describedby="input-error-block-message" aria-invalid="true">
+                                    <div class="error" role="group" aria-label="foutmelding">
+                                        <span>Foutmelding:</span>
+                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+                                        <ul>
+                                        <li>Lorem ipsum</li>
+                                        <li>Lorem ipsum</li>
+                                        </ul>
+                                    </div>
+                                </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error-block">Input&lt;/label>
+        &lt;input id="input-error-block" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-block-message" aria-invalid="true">
+            &lt;div class="error" role="group" aria-label="foutmelding">
+                &lt;span>Foutmelding:&lt;/span>
+                &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.&lt;/p>
+                &lt;ul>
+                &lt;li>Lorem ipsum&lt;/li>
+                &lt;li>Lorem ipsum&lt;/li>
+                &lt;/ul>
+            &lt;/div>
+        &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Span:</h3>
+                        <h4>Visueel voorbeeld:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-confirmation">Input</label>
+                                <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+                                    aria-describedby="input-confirmation-message" aria-invalid="true">
+                                    <span class="confirmation" id="input-confirmation-message">
+                                        <span>Bevestiging:</span> Lorem ipsum dolor set amet
+                                    </span>
+                                <button type="submit">Verzend</button>
+                            </fieldset>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-confirmation">Input&lt;/label>
+        &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+            aria-describedby="input-confirmation-message" aria-invalid="true">
+            &lt;span class="confirmation" id="input-confirmation-message">
+                &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+            &lt;/span>
+        &lt;button type="submit">Verzend&lt;/button>
+    &lt;/fieldset>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h3>Gegroepeerde content met notificatie</h3>
+                        <p><strong>Let op:</strong> Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.</p>
+                        <h4>Visueel voorbeeld gegroepeerde input en label:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <div>
+                                    <label for="input-error-grouped-label">Input</label>
+                                    <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                                        aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+                                </div>
+                                <p class="error" id="input-error-grouped-label-message">
+                                    <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                </p>
+                            </fieldset>
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;div>
+            &lt;label for="input-error-grouped-label">Input&lt;/label>
+            &lt;input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+        &lt;/div>
+        &lt;p class="error" id="input-error-grouped-label-message">
+            &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+        &lt;/p>
+    &lt;/fieldset>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+
+                        <h4>Visueel voorbeeld gegroepeerde input en notificatie:</h4>
+                        <form action="" method="post">
+                            <fieldset>
+                                <legend>Lorem ipsum</legend>
+                                <label for="input-error-grouped-notification">Input</label>
+                                <div>
+                                    <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                                        aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+                                    <p class="error" id="input-error-grouped-notification-message">
+                                        <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                                    </p>
+                                </div>
+                            </fieldset>
+
+                            <button type="submit">Verzend</button>
+                        </form>
+
+                        <p>Html-voorbeeld:</p>
+                        <pre>
+                            <code>
+&lt;form action="" method="post">
+    &lt;fieldset>
+        &lt;legend>Lorem ipsum&lt;/legend>
+        &lt;label for="input-error-grouped-notification">Input&lt;/label>
+        &lt;div>
+            &lt;input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+            &lt;p class="error" id="input-error-grouped-notification-message">
+                &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+            &lt;/p>
+        &lt;/div>
+    &lt;/fieldset>
+
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                            </code>
+                        </pre>
+                    </section>
+
+                </div>
+            </article>
+        </main>
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/docs/documentation/components/form-fieldset-notification.html b/docs/documentation/components/form-fieldset-notification.html
new file mode 100644
index 00000000..57f6cda7
--- /dev/null
+++ b/docs/documentation/components/form-fieldset-notification.html
@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="nl">
+
+<head>
+  <meta charset="UTF-8" />
+  <title>Notificatie binnen een formulier met fieldsets</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="../../static/css/main.css" rel="stylesheet" />
+  <link href="../../static/img/favicon.ico" rel="shortcut icon" />
+  <script defer src="../../static/js/manon.js"></script>
+</head>
+
+<body id="index" class="documentation">
+  <header>
+    <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
+
+    <nav aria-label="Hoofdnavigatie">
+      <div>
+        <ul>
+          <li><a href="../../index.html">Home</a></li>
+          <li><a href="../components.html">Componenten</a></li>
+          <li><a href="../documentation.html">Documentatie</a></li>
+        </ul>
+      </div>
+    </nav>
+
+    <nav class="breadcrumb-bar">
+      <div>
+        <ul>
+          <li><a href="../components.html">Componenten</a></li>
+          <li><a href="./forms.html">Formulieren</a></li>
+          <li>
+            <a href="./form-notification.html" aria-current="page">Notificatie binnen een formulier met fieldsets</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main class="sidemenu" id="main-content" tabindex="-1">
+    <nav data-open-label="Zijbalknavigatie" data-close-label="Sluit zijbalknavigatie" aria-label="Document-navigatie">
+      <ul>
+        <li><a href="./form-notification.html">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>
+    </nav>
+    <article>
+      <div>
+        <section id="introduction">
+          <h1>Notificatie binnen een formulier met fieldsets</h1>
+
+          <h2>Benodigde stappen:</h2>
+          <ol>
+            <li>
+              Voeg de benodigde bestanden toe aan het project. Voor een overzicht van de benodigde
+              en optionele bestanden zie:
+              <a href="#requirements">Bijbehorende bestanden</a>.
+            </li>
+            <li>Voeg de benodigde HTML toe. Voor meer informatie zie <a href="#examples">Voorbeelden</a></li>
+          </ol>
+
+          <h2>Aandachtspunten:</h2>
+          <ul>
+            <li>Let op: visuele feedback op het invoerveld is op zichzelf onvoldoende om toegankelijkheid en een goede
+              gebruikerservaring te waarborgen.</li>
+            <li>Vertel de gebruiker altijd wat de vervolgstappen zijn die zij kunnen nemen om het probleem op te lossen
+              of om zelf verder te kunnen.</li>
+            <li>Voeg de class toe met het type melding op het invoerveld om gebruik te maken van visuele feedback direct
+              op het invoerveld. Voorbeeld: <code>class="error"</code>.</li>
+            <li>Voeg voor screenreader gebruikers <code>aria-invalid="true"</code> toe aan invoervelden met een error.
+              In de HTML-voorbeelden is dit meegenomen.</li>
+            <li>Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker
+              eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe
+              het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn
+              toelichtingsteksten die de gebruiker zelf activeert door middel van de hulpknop. Die teksten worden onder
+              het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker
+              interactie mee heeft zo min mogelijk verspringt.</li>
+            <li>Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt
+                wat de context van de foutmelding is. Dit maakt het begrijpen van de foutmelding toegankelijker.</li>
+            <li>Voor meer informatie over beschikbare notificatie-types en het gebruik zie: <a
+                href="notifications.html">Notificaties</a>.</li>
+          </ul>
+        </section>
+
+        <section id="examples">
+          <h2>Voorbeelden</h2>
+          <p>Het basisvoorbeeld met een invoerveld en een verzendknop.</p>
+
+          <h3>Notificatie op invoerveld</h3>
+          <h4>Visueel voorbeeld foutmelding:</h4>
+          <form action="" method="post">
+            <label for="input-error">Input</label>
+            <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
+            aria-invalid="true">
+            <p class="error" id="input-error-message">
+            <span>Foutmelding:</span> Lorem ipsum dolor set amet
+            </p>
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+    &lt;label for="input-error">Input&lt;/label>
+    &lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
+    &lt;p class="error" id="input-error-message">
+        &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+          <h4>Visueel voorbeeld toelichting:</h4>
+          <form action="" method="post">
+            <label for="input-explanation">Input</label>
+            <p class="explanation" id="input-explanation-message">
+            <span>Toelichting:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                aria-describedby="input-explanation-message" aria-invalid="true">
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+    &lt;label for="input-explanation">Input&lt;/label>
+    &lt;p class="explanation" id="input-explanation-message">
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+          <h4>Visueel voorbeeld waarschuwing:</h4>
+          <form action="" method="post">
+            <label for="input-warning">Input</label>
+            <p class="warning" id="input-warning-message">
+            <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message"
+                aria-invalid="true">
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+    &lt;label for="input-warning">Input&lt;/label>
+    &lt;p class="warning" id="input-warning-message">
+        &lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+          <h4>Visueel voorbeeld bevestiging:</h4>
+          <form action="" method="post">
+            <label for="input-confirmation">Input</label>
+            <p class="confirmation" id="input-confirmation-message">
+            <span>Bevestiging:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+            aria-describedby="input-confirmation-message" aria-invalid="true">
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+    &lt;label for="input-confirmation">Input&lt;/label>
+    &lt;p class="confirmation" id="input-confirmation-message">
+        &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+              </code>
+            </pre>
+
+          <h4>Visueel voorbeeld systeembericht</h4>
+          <form action="" method="post">
+            <label for="input-system">Input</label>
+            <p class="system" id="input-system-message">
+            <span>Systeembericht:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message"
+                aria-invalid="true">
+            <button type="submit">Verzend</button>
+          </form>
+
+          <p>Html-voorbeeld:</p>
+          <pre>
+              <code>
+&lt;form action="" method="post">
+    &lt;label for="input-system">Input&lt;/label>
+    &lt;p class="system" id="input-system-message">
+        &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+    
+              </code>
+            </pre>
+        </section>
+
+        <section id="requirements">
+          <h2>Bijbehorende bestanden</h2>
+          <p>
+            Voor meer informatie over importeren en instellen van componenten. Zie:
+            <a href="../import-styling.html">Componenten gebruiken en styling toevoegen</a>
+          </p>
+
+          <h3>Gerelateerd:</h3>
+          <ul>
+            <li>Voor meer informatie over beschikbare notificatie-types en het gebruik zie: <a
+                href="notifications.html">Notificaties</a>.</li>
+          </ul>
+
+          <h3>Importeer component via NPM</h3>
+
+          <h4>CSS-voorbeeld:</h4>
+          <pre>
+              <code>
+/* Notification base component */
+@use "@minvws/manon/notification";
+
+/* Notification types, import what is needed */
+@use "@minvws/manon/notification-block-element";
+@use "@minvws/manon/notification-paragraph";
+@use "@minvws/manon/notification-table";
+@use "@minvws/manon/notification-error";
+@use "@minvws/manon/notification-warning";
+@use "@minvws/manon/notification-explanation";
+@use "@minvws/manon/notification-confirmation";
+@use "@minvws/manon/notification-system-message";
+              </code>
+            </pre>
+        </section>
+
+        <section id="related">
+          <h2>Gerelateerde pagina's</h2>
+          <a href="./form-fieldset-notification-test.html">Test- en voorbeelden-pagina</a>
+        </section>
+      </div>
+    </article>
+  </main>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/docs/documentation/components/form-notification-test.html b/docs/documentation/components/form-notification-test.html
index 590882eb..c354c7fe 100644
--- a/docs/documentation/components/form-notification-test.html
+++ b/docs/documentation/components/form-notification-test.html
@@ -47,137 +47,224 @@ <h1>Notificatie binnen formulier testpagina</h1>
                 </section>
 
                 <section id="tests">
-                    <h2>Tests</h2>
                     <h2>Voorbeelden</h2>
-                    <p>Het basisvoorbeeld met een invoerveld en een verzendknop.</p>
-
-                    <h3>Notificatie op invoerveld</h3>
+                    <h3>Notificatie onder het invoerveld</h3>
                     <h4>Visueel voorbeeld foutmelding:</h4>
                     <form action="" method="post">
                         <label for="input-error">Input</label>
-                        <div>
-                            <input id="input-error" class="error" value="Lorem ipsum"
-                                aria-describedby="input-error-message" aria-invalid="true">
-                            <p class="error" id="input-error-message">
-                                <span>Foutmelding:</span> Lorem ipsum dolor set amet
-                            </p>
-                        </div>
+                        <input id="input-error" class="error" value="Lorem ipsum"
+                            aria-describedby="input-error-message" aria-invalid="true">
+                        <p class="error" id="input-error-message">
+                            <span>Foutmelding:</span> Lorem ipsum dolor set amet
+                        </p>
                         <button type="submit">Verzend</button>
                     </form>
 
                     <p>Html-voorbeeld:</p>
                     <pre>
-              <code>
+                        <code>
 &lt;form action="" method="post">
-  &lt;label for="input-error">Input&lt;/label>
-  &lt;div>
-    &lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
+    &lt;label for="input-error">Input&lt;/label>
+    &lt;input id="input-error" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-message" aria-invalid="true">
     &lt;p class="error" id="input-error-message">
         &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-  &lt;/div>
-  &lt;button type="submit">Verzend&lt;/button>
+    &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-              </code>
-            </pre>
+                        </code>
+                    </pre>
 
+                    <h3>Notificatie boven het invoerveld</h3>
                     <h4>Visueel voorbeeld toelichting:</h4>
                     <form action="" method="post">
                         <label for="input-explanation">Input</label>
-                        <div>
-                            <p class="explanation" id="input-explanation-message">
-                                <span>Toelichting:</span> Lorem ipsum dolor set amet
-                            </p>
-                            <input id="input-explanation" class="explanation" value="Lorem ipsum"
+                        <p class="explanation" id="input-explanation-message">
+                            <span>Toelichting:</span> Lorem ipsum dolor set amet
+                        </p>
+                        <input id="input-explanation" class="explanation" value="Lorem ipsum"
                                 aria-describedby="input-explanation-message" aria-invalid="true">
-                        </div>
                         <button type="submit">Verzend</button>
                     </form>
 
                     <p>Html-voorbeeld:</p>
                     <pre>
-              <code>
+                        <code>
 &lt;form action="" method="post">
-  &lt;label for="input-explanation">Input&lt;/label>
-  &lt;div>
+    &lt;label for="input-explanation">Input&lt;/label>
     &lt;p class="explanation" id="input-explanation-message">
-      &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;input id="input-explanation" class="explanation" value="Lorem ipsum"
+            aria-describedby="input-explanation-message" aria-invalid="true">
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                        </code>
+                    </pre>
+
+                    <h3>Notificatie boven checkbox</h3>
+                    <h4>Visueel voorbeeld toelichting:</h4>
+                    <form action="" method="post">
+                        <p class="explanation" id="checkbox-explanation">
+                            <span>Toelichting:</span> Lorem ipsum dolor set amet
+                        </p>
+                        <div class="checkbox">
+                            <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+                            <label for="checkbox-explanation">Lorem ipsum</label>
+                          </div>
+                        <button type="submit">Verzend</button>
+                    </form>
+
+                    <p>Html-voorbeeld:</p>
+                    <pre>
+                        <code>
+&lt;form action="" method="post">
+    &lt;p class="explanation" id="checkbox-explanation">
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-    &lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
-  &lt;/div>
-  &lt;button type="submit">Verzend&lt;/button>
+    &lt;div class="checkbox">
+        &lt;input type="checkbox" id="checkbox-explanation" name="standaard-checkbox">
+        &lt;label for="checkbox-explanation">Lorem ipsun&lt;/label>
+        &lt;/div>
+    &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-              </code>
-            </pre>
+                        </code>
+                    </pre>
+
+                    <h3>Notificatie boven radio-button</h3>
+                    <h4>Visueel voorbeeld toelichting:</h4>
+                    <form action="" method="post">
+                        <p class="explanation" id="radio-explanation-message">
+                            <span>Toelichting:</span> Lorem ipsum dolor set amet
+                        </p>
+                        <div class="radio">
+                            <input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+                              aria-describedby="radio-explanation-message">
+                            <label for="radio-explanation">Optie 1</label>
+                          </div>
+                        <button type="submit">Verzend</button>
+                    </form>
+
+                    <p>Html-voorbeeld:</p>
+                    <pre>
+                        <code>
+&lt;form action="" method="post">
+    &lt;p class="explanation" id="radio-explanation-message">
+        &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+    &lt;/p>
+    &lt;div class="radio">
+        &lt;input type="radio" id="radio-explanation" name="radio-option-2" value="value 1"
+            aria-describedby="radio-explanation-message">
+        &lt;label for="radio-explanation">Optie 1&lt;/label>
+        &lt;/div>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                        </code>
+                    </pre>
 
+                    <h3>Link binnen notificatie</h3>
                     <h4>Visueel voorbeeld waarschuwing:</h4>
                     <form action="" method="post">
-                        <label for="input-warning">Input</label>
-                        <div>
-                            <p class="warning" id="input-warning-message">
-                                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-                            </p>
-                            <input id="input-warning" class="warning" value="Lorem ipsum"
-                                aria-describedby="input-warning-message" aria-invalid="true">
-                        </div>
+                        <label for="input-warning-link">Input</label>
+                        <input id="input-warning-link" class="warning" value="Lorem ipsum"
+                            aria-describedby="input-warning-link-message" aria-invalid="true">
+                        <p class="warning" id="input-warning-link-message">
+                            <span>Waarschuwing:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                        </p>
                         <button type="submit">Verzend</button>
                     </form>
 
                     <p>Html-voorbeeld:</p>
                     <pre>
-              <code>
+                        <code>
 &lt;form action="" method="post">
-  &lt;label for="input-warning">Input&lt;/label>
-  &lt;div>
-    &lt;p class="warning" id="input-warning-message">
-      &lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
+    &lt;label for="input-warning-link">Input&lt;/label>
+    &lt;input id="input-warning-link" class="warning" value="Lorem ipsum"
+        aria-describedby="input-warning-link-message" aria-invalid="true">
+    &lt;p class="warning" id="input-warning-link-message">
+        &lt;span>Waarschuwing:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
     &lt;/p>
-    &lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
-  &lt;/div>
-  &lt;button type="submit">Verzend&lt;/button>
+    &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-              </code>
-            </pre>
+                        </code>
+                    </pre>
 
-                    <h4>Visueel voorbeeld bevestiging:</h4>
+                    <h3>Bloknotificatie:</h3>
+                    <h4>Visueel voorbeeld:</h4>
+                    <form action="" method="post">
+                        <label for="input-error-block">Input</label>
+                        <input id="input-error-block" class="error" value="Lorem ipsum"
+                            aria-describedby="input-error-block-message" aria-invalid="true">
+                            <div class="error" role="group" aria-label="foutmelding">
+                                <span>Foutmelding:</span>
+                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.</p>
+                                <ul>
+                                  <li>Lorem ipsum</li>
+                                  <li>Lorem ipsum</li>
+                                </ul>
+                              </div>
+                        <button type="submit">Verzend</button>
+                    </form>
+
+                    <p>Html-voorbeeld:</p>
+                    <pre>
+                        <code>
+&lt;form action="" method="post">
+    &lt;label for="input-error-block">Input&lt;/label>
+    &lt;input id="input-error-block" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-block-message" aria-invalid="true">
+        &lt;div class="error" role="group" aria-label="foutmelding">
+            &lt;span>Foutmelding:&lt;/span>
+            &lt;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.&lt;/p>
+            &lt;ul>
+                &lt;li>Lorem ipsum&lt;/li>
+                &lt;li>Lorem ipsum&lt;/li>
+            &lt;/ul>
+            &lt;/div>
+    &lt;button type="submit">Verzend&lt;/button>
+&lt;/form>
+                        </code>
+                    </pre>
+
+                    <h3>Span:</h3>
+                    <h4>Visueel voorbeeld:</h4>
                     <form action="" method="post">
                         <label for="input-confirmation">Input</label>
-                        <div>
-                            <p class="confirmation" id="input-confirmation-message">
+                        <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+                            aria-describedby="input-confirmation-message" aria-invalid="true">
+                            <span class="confirmation" id="input-confirmation-message">
                                 <span>Bevestiging:</span> Lorem ipsum dolor set amet
-                            </p>
-                            <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
-                                aria-describedby="input-confirmation-message" aria-invalid="true">
-                        </div>
+                            </span>
                         <button type="submit">Verzend</button>
                     </form>
 
                     <p>Html-voorbeeld:</p>
                     <pre>
-              <code>
+                        <code>
 &lt;form action="" method="post">
-  &lt;label for="input-confirmation">Input&lt;/label>
-  &lt;div>
-    &lt;p class="confirmation" id="input-confirmation-message">
-        &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
-    &lt;/p>
-      &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
-  &lt;/div>
-  &lt;button type="submit">Verzend&lt;/button>
+    &lt;label for="input-confirmation">Input&lt;/label>
+    &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+        aria-describedby="input-confirmation-message" aria-invalid="true">
+        &lt;span class="confirmation" id="input-confirmation-message">
+            &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+        &lt;/span>
+    &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-              </code>
-            </pre>
+                        </code>
+                    </pre>
 
-                    <h4>Visueel voorbeeld systeembericht</h4>
+                    <h3>Gegroepeerde content met notificatie</h3>
+                    <p><strong>Let op:</strong> Deze opbouw is niet nodig. Dit is enkel een test om te controleren of het visueel goed blijft gaan.</p>
+                    <h4>Visueel voorbeeld gegroepeerde input en label:</h4>
                     <form action="" method="post">
-                        <label for="input-system">Input</label>
                         <div>
-                            <p class="system" id="input-system-message">
-                                <span>Systeembericht:</span> Lorem ipsum dolor set amet
-                            </p>
-                            <input id="input-system" class="system" value="Lorem ipsum"
-                                aria-describedby="input-system-message" aria-invalid="true">
+                            <label for="input-error-grouped-label">Input</label>
+                            <input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+                                aria-describedby="input-error-grouped-label-message" aria-invalid="true">
                         </div>
+                        <p class="error" id="input-error-grouped-label-message">
+                            <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
+                        </p>
                         <button type="submit">Verzend</button>
                     </form>
 
@@ -185,49 +272,50 @@ <h4>Visueel voorbeeld systeembericht</h4>
                     <pre>
                         <code>
 &lt;form action="" method="post">
-  &lt;label for="input-system">Input&lt;/label>
-  &lt;div>
-    &lt;p class="system" id="input-system-message">
-        &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
+    &lt;div>
+        &lt;label for="input-error-grouped-label">Input&lt;/label>
+        &lt;input id="input-error-grouped-label" class="error" value="Lorem ipsum"
+            aria-describedby="input-error-grouped-label-message" aria-invalid="true">
+    &lt;/div>
+    &lt;p class="error" id="input-error-grouped-label-message">
+        &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
     &lt;/p>
-    &lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
-  &lt;/div>
-  &lt;button type="submit">Verzend&lt;/button>
+    &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-    
                         </code>
                     </pre>
 
-                    <h3>Link binnen notificatie</h3>
-                    <h4>Visueel voorbeeld foutmelding:</h4>
+                    <h4>Visueel voorbeeld gegroepeerde input en notificatie:</h4>
                     <form action="" method="post">
-                        <label for="input-error">Input</label>
+                            <label for="input-error-grouped-notification">Input</label>
                         <div>
-                            <input id="input-error" class="error" value="Lorem ipsum"
-                                aria-describedby="input-error-message" aria-invalid="true">
-                            <p class="error" id="input-error-message">
+                            <input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+                                aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+                            <p class="error" id="input-error-grouped-notification-message">
                                 <span>Foutmelding:</span> Lorem <a href="ipsum dolor">ipsum dolor</a> set amet
                             </p>
                         </div>
+
                         <button type="submit">Verzend</button>
                     </form>
 
                     <p>Html-voorbeeld:</p>
                     <pre>
-              <code>
+                        <code>
 &lt;form action="" method="post">
-    &lt;label for="input-error">Input&lt;/label>
-    &lt;div>
-        &lt;input id="input-error" class="error" value="Lorem ipsum"
-            aria-describedby="input-error-message" aria-invalid="true">
-        &lt;p class="error" id="input-error-message">
-            &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
-        &lt;/p>
-    &lt;/div>
-    &lt;button type="submit">Verzend&lt;/button>
+    &lt;label for="input-error-grouped-notification">Input&lt;/label>
+&lt;div>
+    &lt;input id="input-error-grouped-notification" class="error" value="Lorem ipsum"
+        aria-describedby="input-error-grouped-notification-message" aria-invalid="true">
+    &lt;p class="error" id="input-error-grouped-notification-message">
+        &lt;span>Foutmelding:&lt;/span> Lorem &lt;a href="ipsum dolor">ipsum dolor&lt;/a> set amet
+    &lt;/p>
+&lt;/div>
+
+&lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
-              </code>
-            </pre>
+                        </code>
+                    </pre>
                 </section>
 
             </div>
diff --git a/docs/documentation/components/form-notification.html b/docs/documentation/components/form-notification.html
index 9337dd46..31a1bcb3 100644
--- a/docs/documentation/components/form-notification.html
+++ b/docs/documentation/components/form-notification.html
@@ -74,11 +74,11 @@ <h2>Aandachtspunten:</h2>
             <li>Plaats toelichting met betrekking tot het invullen van velden boven het invoerveld, zodat de gebruiker
               eerst de toelichtig leest en daarna het bijbehorende invoerveld tegenkomt. Hierdoor weet de gebruiker hoe
               het invoerveld ingevuld dient te worden voordat deze gepresenteerd wordt. Uitzondering hierop zijn
-              toelichtingsteksten die de gerbruiker zelf activeert door middel van de hulpknop. Die teksten worden onder
+              toelichtingsteksten die de gebruiker zelf activeert door middel van de hulpknop. Die teksten worden onder
               het gekozen invoerveld geplaatst zodat de structuur van het formulier en het element waar de gebruiker
               interactie mee heeft zo min mogelijk verspringt.</li>
             <li>Plaats foutmeldingen altijd onder het invoerveld. Dit zorgt ervoor dat de gebruiker eerst te zien krijgt
-              wat de context van de foutmelding is wat het begrijpen van de foutmelding toegankelijker maakt.</li>
+              wat de context van de foutmelding is. Dit maakt het begrijpen van de foutmelding toegankelijker.</li>
             <li>Voor meer informatie over beschikbare notificatie-types en het gebruik zie: <a
                 href="notifications.html">Notificaties</a>.</li>
           </ul>
@@ -92,13 +92,11 @@ <h3>Notificatie op invoerveld</h3>
           <h4>Visueel voorbeeld foutmelding:</h4>
           <form action="" method="post">
             <label for="input-error">Input</label>
-            <div>
-              <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
-                aria-invalid="true">
-              <p class="error" id="input-error-message">
-                <span>Foutmelding:</span> Lorem ipsum dolor set amet
-              </p>
-            </div>
+            <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message"
+              aria-invalid="true">
+            <p class="error" id="input-error-message">
+              <span>Foutmelding:</span> Lorem ipsum dolor set amet
+            </p>
             <button type="submit">Verzend</button>
           </form>
 
@@ -107,12 +105,10 @@ <h4>Visueel voorbeeld foutmelding:</h4>
               <code>
 &lt;form action="" method="post">
   &lt;label for="input-error">Input&lt;/label>
-  &lt;div>
     &lt;input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
     &lt;p class="error" id="input-error-message">
         &lt;span>Foutmelding:&lt;/span> Lorem ipsum dolor set amet
     &lt;/p>
-  &lt;/div>
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
               </code>
@@ -121,13 +117,11 @@ <h4>Visueel voorbeeld foutmelding:</h4>
           <h4>Visueel voorbeeld toelichting:</h4>
           <form action="" method="post">
             <label for="input-explanation">Input</label>
-            <div>
-              <p class="explanation" id="input-explanation-message">
-                <span>Toelichting:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="input-explanation" class="explanation" value="Lorem ipsum"
-                aria-describedby="input-explanation-message" aria-invalid="true">
-            </div>
+            <p class="explanation" id="input-explanation-message">
+              <span>Toelichting:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-explanation" class="explanation" value="Lorem ipsum"
+              aria-describedby="input-explanation-message" aria-invalid="true">
             <button type="submit">Verzend</button>
           </form>
 
@@ -136,12 +130,10 @@ <h4>Visueel voorbeeld toelichting:</h4>
               <code>
 &lt;form action="" method="post">
   &lt;label for="input-explanation">Input&lt;/label>
-  &lt;div>
-    &lt;p class="explanation" id="input-explanation-message">
-      &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
-    &lt;/p>
-    &lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
-  &lt;/div>
+  &lt;p class="explanation" id="input-explanation-message">
+    &lt;span>Toelichting:&lt;/span> Lorem ipsum dolor set amet
+  &lt;/p>
+  &lt;input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message" aria-invalid="true">
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
               </code>
@@ -150,13 +142,11 @@ <h4>Visueel voorbeeld toelichting:</h4>
           <h4>Visueel voorbeeld waarschuwing:</h4>
           <form action="" method="post">
             <label for="input-warning">Input</label>
-            <div>
-              <p class="warning" id="input-warning-message">
-                <span>Waarschuwing:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message"
-                aria-invalid="true">
-            </div>
+            <p class="warning" id="input-warning-message">
+              <span>Waarschuwing:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message"
+              aria-invalid="true">
             <button type="submit">Verzend</button>
           </form>
 
@@ -165,12 +155,10 @@ <h4>Visueel voorbeeld waarschuwing:</h4>
               <code>
 &lt;form action="" method="post">
   &lt;label for="input-warning">Input&lt;/label>
-  &lt;div>
-    &lt;p class="warning" id="input-warning-message">
-      &lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
-    &lt;/p>
-    &lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
-  &lt;/div>
+  &lt;p class="warning" id="input-warning-message">
+    &lt;span>Waarschuwing:&lt;/span> Lorem ipsum dolor set amet
+  &lt;/p>
+  &lt;input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message" aria-invalid="true">
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
               </code>
@@ -179,13 +167,11 @@ <h4>Visueel voorbeeld waarschuwing:</h4>
           <h4>Visueel voorbeeld bevestiging:</h4>
           <form action="" method="post">
             <label for="input-confirmation">Input</label>
-            <div>
-              <p class="confirmation" id="input-confirmation-message">
-                <span>Bevestiging:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
-                aria-describedby="input-confirmation-message" aria-invalid="true">
-            </div>
+            <p class="confirmation" id="input-confirmation-message">
+              <span>Bevestiging:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-confirmation" class="confirmation" value="Lorem ipsum"
+              aria-describedby="input-confirmation-message" aria-invalid="true">
             <button type="submit">Verzend</button>
           </form>
 
@@ -194,12 +180,10 @@ <h4>Visueel voorbeeld bevestiging:</h4>
               <code>
 &lt;form action="" method="post">
   &lt;label for="input-confirmation">Input&lt;/label>
-  &lt;div>
-    &lt;p class="confirmation" id="input-confirmation-message">
-        &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
-    &lt;/p>
-      &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
-  &lt;/div>
+  &lt;p class="confirmation" id="input-confirmation-message">
+      &lt;span>Bevestiging:&lt;/span> Lorem ipsum dolor set amet
+  &lt;/p>
+  &lt;input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message" aria-invalid="true">
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
               </code>
@@ -208,13 +192,11 @@ <h4>Visueel voorbeeld bevestiging:</h4>
           <h4>Visueel voorbeeld systeembericht</h4>
           <form action="" method="post">
             <label for="input-system">Input</label>
-            <div>
-              <p class="system" id="input-system-message">
-                <span>Systeembericht:</span> Lorem ipsum dolor set amet
-              </p>
-              <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message"
+            <p class="system" id="input-system-message">
+              <span>Systeembericht:</span> Lorem ipsum dolor set amet
+            </p>
+            <input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message"
                 aria-invalid="true">
-            </div>
             <button type="submit">Verzend</button>
           </form>
 
@@ -223,12 +205,10 @@ <h4>Visueel voorbeeld systeembericht</h4>
               <code>
 &lt;form action="" method="post">
   &lt;label for="input-system">Input&lt;/label>
-  &lt;div>
-    &lt;p class="system" id="input-system-message">
-        &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
-    &lt;/p>
-    &lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
-  &lt;/div>
+  &lt;p class="system" id="input-system-message">
+      &lt;span>Systeembericht:&lt;/span> Lorem ipsum dolor set amet
+  &lt;/p>
+  &lt;input id="input-system" class="system" value="Lorem ipsum" aria-describedby="input-system-message" aria-invalid="true">
   &lt;button type="submit">Verzend&lt;/button>
 &lt;/form>
     
diff --git a/docs/documentation/components/forms.html b/docs/documentation/components/forms.html
index c8234775..6a639a09 100644
--- a/docs/documentation/components/forms.html
+++ b/docs/documentation/components/forms.html
@@ -45,82 +45,117 @@ <h1>Formulieren</h1>
           <section id="available-types">
             <h2>Beschikbare weergaven</h2>
             <div class="column-3">
-              <nav aria-labelledby="form-types-title" id="form-types">
-                <h3 id="form-types-title">Formulierelementen</h3>
+              <nav aria-labelledby="form-base-title" id="form-base">
+                <h3 id="form-base-title">Formulier</h3>
                 <ul>
-                  <li>
-                    <a href="./form-input-range.html">Bereik - <code>range</code></a>
-                  </li>
-                  <li>
-                    <a href="./form-input-file.html">Bestand - <code>file</code></a>
-                  </li>
-                  <li><a href="./form-input-date.html">Datum</a></li>
-                  <li><a href="./form-input-email.html">Email</a></li>
-                  <li>
-                    <a href="./form-input.html">Invoerveld - <code>input</code></a>
-                  </li>
-                  <li>
-                    Kleurselector
+                  <li><a href="./form-base.html">Basisweergave</a></li>
+                  <li>Componenten: 
                     <ul>
                       <li>
-                        <a href="./form-input-color.html">Kleurselector</a>
+                        <a href="./form-input-range.html">Bereik - <code>range</code></a>
+                      </li>
+                      <li>
+                        <a href="./form-input-file.html">Bestand - <code>file</code></a>
                       </li>
+                      <li><a href="./form-input-date.html">Datum</a></li>
+                      <li><a href="./form-input-email.html">Email</a></li>
                       <li>
-                        <a href="./form-input-color-filled.html">Kleurselector volledig gevuld</a>
+                        <a href="./form-input.html">Invoerveld - <code>input</code></a>
+                      </li>
+                      <li>
+                        Kleurselector
+                        <ul>
+                          <li>
+                            <a href="./form-input-color.html">Kleurselector</a>
+                          </li>
+                          <li>
+                            <a href="./form-input-color-filled.html">Kleurselector volledig gevuld</a>
+                          </li>
+                        </ul>
+                      </li>
+                      <li><a href="./form-notification.html">Notificaties</a></li>
+                      <li><a href="./form-input-radio.html">Radio-selecteerknop - <code>radio</code></a></li>
+                      <li><a href="./form-input-password.html">Wachtwoord</a></li>
+                      <li><a href="./checkbox.html">Selectievak - <code>checkbox</code></a></li>
+                      <li>
+                        <a href="./form-input-textarea.html">Tekstveld - <code>textarea</code></a>
+                      </li>
+                      <li>
+                        <a href="./form-select.html">Selectielijst - <code>select</code></a>
                       </li>
                     </ul>
                   </li>
-                  <li><a href="./form-notification.html">Notificatie</a></li>
-                  <li><a href="./form-input-radio.html">Radio-selecteerknop - <code>radio</code></a></li>
-                  <li><a href="./form-input-password.html">Wachtwoord</a></li>
-                  <li><a href="./checkbox.html">Selectievak - <code>checkbox</code></a></li>
-                  <li>
-                    <a href="./form-input-textarea.html">Tekstveld - <code>textarea</code></a>
-                  </li>
-                  <li>
-                    <a href="./form-select.html">Selectielijst - <code>select</code></a>
-                  </li>
                 </ul>
               </nav>
 
               <nav aria-labelledby="form-fieldset-components-title" id="form-fieldset-components">
-                <h3 id="form-fieldset-components-title">Fieldset</h3>
+                <h3 id="form-fieldset-components-title">Formulier met fieldset</h3>
 
                 <ul>
                   <li><a href="./form-fieldset.html">Fieldset</a></li>
                   <li><a href="./form-fieldset-invisible.html">Onzichtbare fieldset</a></li>
                   <li><a href="./fieldset-radio.html">Fieldset radio-selecteerknop - <code>radio</code></a></li>
                   <li><a href="./fieldset-checkbox.html">Fieldset selectievak - <code>checkbox</code></a></li>
+                  <li><a href="./form-fieldset-notification.html">Notificaties</a></li>
                 </ul>
               </nav>
 
-              <nav aria-labelledby="form-layouts-title" id="form-layouts">
-                <h3 id="form-layouts-title">Weergaven</h3>
+              <nav aria-labelledby="form-communication-title" id="form-communication">
+                <h3 id="form-communication-title">Berichten en meldingen</h3>
+                <ul>
+                  <li><a href="./form-required.html">Verplichte velden</a></li>
+                  <li><a href="./form-help.html">Hulpteksten</a></li>
+                </ul>
+              </nav>
+
+              <nav aria-labelledby="form-horizontal-title" id="form-horizontal">
+                <h3 id="form-horizontal-title">Horizontaal formulier</h3>
                 <ul>
-                  <li><a href="./form-base.html">Basisweergave</a></li>
                   <li>
-                    <a href="./form-accent-color.html">Accentkleur op formulierelementen</a>
+                    <a href="./form-horizontal-view.html">Horizontaal uitgelijnd formulier</a>
+                  </li>
+                  <li>Componenten:
+                    <ul>
+                      <li><a href="./form-base.html">Notificaties</a></li>
+                    </ul>
                   </li>
+                </ul>
+              </nav>
+              
+              <nav aria-labelledby="form-combined-fields-title" id="form-combined-fields">
+                <h3 id="form-combined-fields-title">Gecombineerde formuliervelden</h3>
+                <ul>
                   <li>
                     <a href="./form-combined-fields.html">Gecombineerde formuliervelden</a>
                   </li>
+                </ul>
+              </nav>
+              
+              <nav aria-labelledby="form-columns-title" id="form-columns">
+                <h3 id="form-columns-title">Kolommen binnen formulieren</h3>
+                <ul>
                   <li>
                     <a href="./form-columns.html">Weergave in kolommen</a>
                   </li>
-                  <li>
-                    <a href="./form-horizontal-view.html">Horizontaal uitgelijnd formulier</a>
-                  </li>
+                </ul>
+              </nav>
+              
+              <nav aria-labelledby="form-inline-title" id="form-inline">
+                <h3 id="form-inline-title">Ontzichtbaar formulier</h3>
+                <ul>
                   <li><a href="./form-inline.html">"inline"-formulier</a></li>
                 </ul>
               </nav>
 
-              <nav id="form-communication">
-                <h3>Berichten en meldingen</h3>
+              <nav aria-labelledby="form-general-title" id="form-general">
+                <h3 id="form-general-title">Overkoepelende componenten</h3>
                 <ul>
-                  <li><a href="./form-required.html">Verplichte velden</a></li>
-                  <li><a href="./form-help.html">Hulpteksten</a></li>
+                  <li>
+                    <a href="./form-accent-color.html">Accentkleur op formulierelementen</a>
+                  </li>
                 </ul>
               </nav>
+              
             </div>
           </section>
         </div>
diff --git a/manon/form-fieldset-variables.scss b/manon/form-fieldset-variables.scss
index b37e94a3..41d94884 100644
--- a/manon/form-fieldset-variables.scss
+++ b/manon/form-fieldset-variables.scss
@@ -2,10 +2,20 @@
 /*----------------- form-fieldset-variables.scss ----------------*/
 /*---------------------------------------------------------------*/
 :root {
+  --form-fieldset-margin: 0;
+
   /* Fields within the fieldset */
-  --form-fieldset-fields-margin-top: var(--application-base-gap, 1rem);
+  --form-fieldset-fields-gap: var(--application-base-gap, 1rem);
+
+  /*  Spacing between notifications and fields */
+  --form-fieldset-notification-before-gap: 0;
+  --form-fieldset-notification-after-gap: 0;
+
+  /* For combined fields and messages */
+  --form-fieldset-field-after-notification-border-width: 0 1px 1px 1px;
+  --form-fieldset-notification-after-field-border-width: 0 1px 1px 1px;
 
   /* Legend */
   --form-fieldset-legend-font-weight: var(--headings-font-weight, bold);
   --form-fieldset-legend-margin-bottom: var(--application-base-gap, 1rem);
-}
+}
\ No newline at end of file
diff --git a/manon/form-fieldset.scss b/manon/form-fieldset.scss
index 932a20c7..eb2149f7 100644
--- a/manon/form-fieldset.scss
+++ b/manon/form-fieldset.scss
@@ -23,6 +23,7 @@ main article form,
 main div form,
 form {
   >fieldset {
+    margin: var(--form-fieldset-margin);
 
     legend {
       font-weight: var(--form-fieldset-legend-font-weight);
@@ -46,6 +47,42 @@ form {
     }
 
     /* Notifications */
+
+    /*  The option to connect the input fields and notifications */
+    /* Message above input */
+    .error,
+    .warning,
+    .confirmation,
+    .explanation,
+    .system {
+      margin-bottom: 0;
+
+      +input,
+      +select,
+      +textarea {
+        margin: 0;
+        margin-top: var(--form-fieldset-notification-before-gap);
+        border-width: var(--form-fieldset-field-after-notification-border-width);
+      }
+
+    }
+
+    /* Message below input */
+    input,
+    select,
+    textarea {
+
+      +.error,
+      +.warning,
+      +.confirmation,
+      +.explanation,
+      +.system {
+        margin: 0;
+        margin-top: var(--form-fieldset-notification-after-gap);
+        border-width: var(--form-fieldset-notification-after-field-border-width);
+      }
+    }
+
     >div {
 
       &.error,
@@ -63,7 +100,7 @@ form {
     /* Fieldsets within fieldsets ignore the "*" all selector */
     >*,
     >fieldset {
-      margin-bottom: var(--form-fieldset-fields-margin-top);
+      margin-bottom: var(--form-fieldset-fields-gap);
 
       &:last-child {
         margin-bottom: 0;
diff --git a/manon/form-horizontal-view-fieldset.scss b/manon/form-horizontal-view-fieldset.scss
index 7010da55..d5de531c 100644
--- a/manon/form-horizontal-view-fieldset.scss
+++ b/manon/form-horizontal-view-fieldset.scss
@@ -21,9 +21,30 @@ For more information on the bug see: https://github.com/philipwalton/flexbugs#9-
 and: https://bugs.chromium.org/p/chromium/issues/detail?id=262679 */
 
 form.horizontal-view {
-  $breakpoint: 24rem;
+  $breakpoint: 32rem;
 
   >fieldset {
+
+    %input-styling {
+      @media (min-width: $breakpoint) {
+        width: var(--input-column);
+        /* resetting gap as it can not be used within fieldsets */
+        gap: 0;
+        /* float objects to move inputs into place even when there is no label */
+        float: right;
+      }
+    }
+
+    %label-styling {
+      margin-top: var(--form-horizontal-view-fieldset-label-margin-top);
+
+      @media (min-width: $breakpoint) {
+        float: left;
+        width: var(--label-column);
+        padding-right: var(--form-horizontal-view-gap);
+      }
+    }
+
     >div {
       display: block;
       /* resetting gap as it can not be used within fieldsets */
@@ -31,25 +52,43 @@ form.horizontal-view {
       /* Adds margin instead of gap */
       margin-bottom: var(--form-base-gap);
 
+      >* {
+        @extend %input-styling;
+      }
 
-      @media (min-width: $breakpoint) {
-        >* {
-          width: var(--input-column);
-          /* resetting gap as it can not be used within fieldsets */
-          gap: 0;
-          /* float objects to move inputs into place even when there is no label */
-          float: right;
-        }
+      label {
+        @extend %label-styling;
+      }
 
+
+      @media (min-width: $breakpoint) {
         >div {
           margin-bottom: 0;
         }
+      }
 
-        label {
-          float: left;
-          width: var(--label-column);
-          padding-right: var(--form-horizontal-view-gap);
-          margin-top: var(--form-horizontal-view-fieldset-label-margin-top);
+      &.notification {
+
+        >div {
+          width: 100%;
+
+          >* {
+            @extend %input-styling;
+          }
+
+          label {
+            @extend %label-styling;
+          }
+
+          /* Block Notifications */
+          &.error,
+          &.warning,
+          &.explanation,
+          &.confirmation,
+          &.system {
+            max-width: var(--input-column);
+            margin-left: auto;
+          }
         }
       }
     }
diff --git a/manon/form-horizontal-view.scss b/manon/form-horizontal-view.scss
index 0a6f27eb..47e40adc 100644
--- a/manon/form-horizontal-view.scss
+++ b/manon/form-horizontal-view.scss
@@ -6,6 +6,32 @@
 form.horizontal-view {
   $breakpoint: 24rem !default;
 
+  /* Form rows */
+  %form-row-styling {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: var(--form-horizontal-view-justify-content);
+    flex-wrap: wrap;
+    gap: var(--form-horizontal-view-group-gap) var(--form-horizontal-view-group-vertical-gap);
+    margin: 0;
+  }
+
+  /* Input */
+  %input-styling {
+    @media (min-width: $breakpoint) {
+      max-width: var(--input-column);
+    }
+  }
+
+  /* Label */
+  %label-styling {
+    @media (min-width: $breakpoint) {
+      width: 100%;
+      max-width: var(--form-horizontal-view-label-max-width);
+    }
+  }
+
   flex-direction: column;
   gap: var(--form-horizontal-view-gap);
   flex-wrap: wrap;
@@ -20,13 +46,21 @@ form.horizontal-view {
 
   >div,
   >section {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: var(--form-horizontal-view-justify-content);
-    flex-wrap: wrap;
-    gap: var(--form-horizontal-view-group-gap) var(--form-horizontal-view-group-vertical-gap);
-    margin: 0;
+    @extend %form-row-styling;
+
+    >* {
+      flex-grow: 1;
+      box-sizing: border-box;
+    }
+
+    input[type="color"] {
+      max-width: var(--form-input-color-max-width);
+      @extend %input-styling;
+    }
+
+    label {
+      @extend %label-styling;
+    }
 
     &.checkbox {
       gap: var(--form-checkbox-margin-right);
@@ -97,38 +131,86 @@ form.horizontal-view {
       }
     }
 
+    >button,
+    >a.button,
+    >input[type="button"],
+    >input[type="submit"],
+    >input[type="reset"] {
+      flex-grow: 0;
+    }
+
     /* Notifications */
-    &.error,
-    &.warning,
-    &.explanation,
-    &.confirmation,
-    &.system {
-      flex-direction: var(--form-horizontal-view-notification-block-element-flex-direction);
-      justify-content: var(--form-horizontal-view-notification-block-element-justify-content);
-      align-items: var(--form-horizontal-view-notification-block-element-align-items);
-      gap: var(--form-horizontal-view-notification-block-element-gap);
+    %notification-styling {
       margin: 0;
+      max-width: var(--input-column);
+      margin-left: auto;
 
       >* {
         max-width: 100%;
       }
+
+      +div {
+        @extend %form-row-styling;
+
+        input,
+        select,
+        textarea {
+          @extend %input-styling;
+        }
+
+        label {
+          @extend %label-styling;
+        }
+      }
     }
 
-    input[type="color"] {
-      max-width: var(--form-input-color-max-width);
+    &.notification {
+      flex-wrap: wrap;
+
+      >div {
+        max-width: 100%;
+        @extend %form-row-styling;
+
+        /* Block Notifications */
+        &.error,
+        &.warning,
+        &.explanation,
+        &.confirmation,
+        &.system {
+          @extend %notification-styling;
+          flex-direction: var(--form-horizontal-view-notification-block-element-flex-direction);
+          justify-content: var(--form-horizontal-view-notification-block-element-justify-content);
+          align-items: var(--form-horizontal-view-notification-block-element-align-items);
+          gap: var(--form-horizontal-view-notification-block-element-gap);
+        }
+      }
     }
 
-    >* {
-      flex-grow: 1;
-      box-sizing: border-box;
+    input,
+    .textarea,
+    .select {
+
+      &.error,
+      &.warning,
+      &.explanation,
+      &.confirmation,
+      &.system {
+        margin-left: unset;
+        width: 100%;
+      }
     }
 
-    >button,
-    >a.button,
-    >input[type="button"],
-    >input[type="submit"],
-    >input[type="reset"] {
-      flex-grow: 0;
+    /* Notifications */
+    .error,
+    .warning,
+    .explanation,
+    .confirmation,
+    .system {
+      @extend %notification-styling;
+      flex-direction: var(--form-horizontal-view-notification-flex-direction);
+      justify-content: var(--form-horizontal-view-notification-justify-content);
+      align-items: var(--form-horizontal-view-notification-align-items);
+      gap: var(--form-horizontal-view-notification-gap);
     }
 
     @media (min-width: $breakpoint) {
@@ -137,11 +219,6 @@ form.horizontal-view {
       >* {
         max-width: var(--input-column);
       }
-
-      label {
-        width: 100%;
-        max-width: var(--form-horizontal-view-label-max-width);
-      }
     }
   }
 
diff --git a/manon/notification-block-element.scss b/manon/notification-block-element.scss
index 196ae022..513027a9 100644
--- a/manon/notification-block-element.scss
+++ b/manon/notification-block-element.scss
@@ -5,13 +5,13 @@
 
 div,
 section {
-  &.notification,
+
   &.error,
   &.warning,
   &.confirmation,
   &.explanation,
   &.system {
-  	display: flex;
+    display: flex;
     flex-direction: var(--notification-block-element-flex-direction);
     justify-content: var(--notification-block-element-justify-content);
     align-items: var(--notification-block-element-align-items);
@@ -27,4 +27,4 @@ section {
     position: var(--notification-block-element-position);
     color: var(--notification-block-element-text-color);
   }
-}
+}
\ No newline at end of file
diff --git a/manon/notification-form-variables.scss b/manon/notification-form-variables.scss
index 18552a22..90834853 100644
--- a/manon/notification-form-variables.scss
+++ b/manon/notification-form-variables.scss
@@ -27,9 +27,14 @@
     --notification-form-fields-confirmation-border-color: var(--confirmation-border-color);
     --notification-form-fields-system-border-color: var(--system-border-color);
 
+    /* For combined fields and messages */
+    --notification-field-after-notification-border-width: 0 1px 1px 1px;
+    --notification-after-field-border-width: 0 1px 1px 1px;
+
     /* Space between fields and notifications */
     /* Please note that the default spacing is --form-base-gap */
-    --notification-form-fields-gap: calc(var(--form-group-gap) * -1);
+    --notification-form-fields-gap: calc(var(--form-base-gap) * -1);
+    --notification-form-group-gap: calc(var(--form-group-gap) * -1);
 
     /* Fields notification icon */
     --notification-form-fields-icon-font-family: var(--icon-font-family);
@@ -40,17 +45,17 @@
     --notification-form-fields-icon-margin-right: 0.5rem;
 
     /* Fields notification error icon */
-    --notification-form-fields-error-icon: var(--notification-error-icon-content);
+    --notification-form-fields-error-icon: none;
 
     /* Fields notification warning icon */
-    --notification-form-fields-warning-icon: var(--notification-warning-icon-content);
+    --notification-form-fields-warning-icon: none;
 
     /* Fields notification explanation icon */
-    --notification-form-fields-explanation-icon: var(--notification-explanation-icon-content);
+    --notification-form-fields-explanation-icon: none;
 
     /* Fields notification confirmation icon */
-    --notification-form-fields-confirmation-icon: var(--notification-confirmation-icon-content);
+    --notification-form-fields-confirmation-icon: none;
 
     /* Fields notification system icon */
-    --notification-form-fields-system-icon: var(--notification-system-icon-content);
+    --notification-form-fields-system-icon: none;
 }
\ No newline at end of file
diff --git a/manon/notification-form.scss b/manon/notification-form.scss
index 6102fb75..35f41426 100644
--- a/manon/notification-form.scss
+++ b/manon/notification-form.scss
@@ -5,7 +5,106 @@
 
 form {
 
-    div.notification,
+    /* Fields with notifications */
+    textarea,
+    select,
+    input {
+
+        &.error,
+        &.explanation,
+        &.warning,
+        &.confirmation,
+        &.system {
+            border-width: var(--notification-form-fields-border-width);
+            border-style: var(--notification-form-fields-border-style);
+        }
+
+        &.error {
+            border-color: var(--notification-form-fields-error-border-color);
+        }
+
+        &.explanation {
+            border-color: var(--notification-form-fields-explanation-border-color);
+        }
+
+        &.warning {
+            border-color: var(--notification-form-fields-warning-border-color);
+        }
+
+        &.confirmation {
+            border-color: var(--notification-form-fields-confirmation-border-color);
+        }
+
+        &.system {
+            border-color: var(--notification-form-fields-system-border-color);
+        }
+    }
+
+    /* Icons */
+    .error,
+    .explanation,
+    .warning,
+    .confirmation,
+    .system {
+        &:before {
+            font-family: var(--notification-form-fields-icon-font-family);
+            font-size: var(--notification-form-fields-icon-font-size);
+            padding-right: var(--notification-form-fields-icon-padding-right);
+            padding-left: var(--notification-form-fields-icon-padding-left);
+            color: var(--notification-form-fields-icon-text-color);
+            margin-right: var(--notification-form-fields-icon-margin-right);
+        }
+
+        &.error:before {
+            content: var(--notification-form-fields-error-icon);
+        }
+
+        &.warning:before {
+            content: var(--notification-form-fields-warning-icon);
+        }
+
+        &.explanation:before {
+            content: var(--notification-form-fields-explanation-icon);
+        }
+
+        &.confirmation:before {
+            content: var(--notification-form-fields-confirmation-icon);
+        }
+    }
+
+    /*  The option to connect the input fields and notifications */
+    /* Message above input */
+    .error,
+    .warning,
+    .confirmation,
+    .explanation,
+    .system {
+
+        +input,
+        +select,
+        +textarea {
+            margin-top: var(--notification-form-fields-gap);
+            border-width: var(--notification-field-after-notification-border-width);
+        }
+
+    }
+
+    /* Message below input */
+    input,
+    select,
+    textarea {
+
+        +.error,
+        +.warning,
+        +.confirmation,
+        +.explanation,
+        +.system {
+            margin-top: var(--notification-form-fields-gap);
+            border-width: var(--notification-after-field-border-width);
+        }
+    }
+
+    /* Block notification */
     div.error,
     div.warning,
     div.confirmation,
@@ -16,8 +115,11 @@ form {
         padding-right: var(--notification-form-block-padding-right);
         padding-bottom: var(--notification-form-block-padding-bottom);
         padding-left: var(--notification-form-block-padding-left);
-    
-        > span:first-of-type {
+        flex-direction: column;
+        align-items: flex-start;
+
+
+        >span:first-of-type {
             font-weight: var(--notification-form-span-font-weight);
         }
 
@@ -34,79 +136,31 @@ form {
         }
     }
 
-    > div {
-        p,
-        span {
-            /* Message types that come after fields */
-            &.error {
-                margin-top: var(--notification-form-fields-gap);
-            }
+    >div {
 
-             /* Message types that come before fields */
-            &.warning,
-            &.confirmation,
-            &.system,
-            &.explanation {
-                margin-bottom: var(--notification-form-fields-gap);
-            }
+        .error,
+        .warning,
+        .confirmation,
+        .explanation,
+        .system {
 
-            &:before {
-                font-family: var(--notification-form-fields-icon-font-family);
-                font-size: var(--notification-form-fields-icon-font-size);
-                padding-right: var(--notification-form-fields-icon-padding-right);
-                padding-left: var(--notification-form-fields-icon-padding-left);
-                color: var(--notification-form-fields-icon-text-color);
-                margin-right: var(--notification-form-fields-icon-margin-right);
+            +input,
+            +textarea {
+                margin-top: var(--notification-form-group-gap);
             }
 
-            &.error:before {
-                content: var(--notification-form-fields-error-icon);
-            }
-            
-            &.warning:before {
-                content: var(--notification-form-fields-warning-icon);
-            }
-            
-            &.explanation:before {
-                content: var(--notification-form-fields-explanation-icon);
-            }
-            
-            &.confirmation:before {
-                content: var(--notification-form-fields-confirmation-icon);
-            }
         }
-    }
 
-    textarea,
-    select,
-    input {
-        &.error,
-        &.explanation,
-        &.warning,
-        &.confirmation,
-        &.system {
-            border-width: var(--notification-form-fields-border-width);
-            border-style: var(--notification-form-fields-border-style);
-        }
+        input,
+        textarea {
 
-        &.error{
-            border-color: var(--notification-form-fields-error-border-color);
-        }
-
-        &.explanation{
-            border-color: var(--notification-form-fields-explanation-border-color);
-        }
-
-        &.warning{
-            border-color: var(--notification-form-fields-warning-border-color);
-        }
-
-        &.confirmation{
-            border-color: var(--notification-form-fields-confirmation-border-color);
-        }
-
-        &.system {
-            border-color: var(--notification-form-fields-system-border-color);
+            +.error,
+            +.warning,
+            +.confirmation,
+            +.explanation,
+            +.system {
+                margin-top: var(--notification-form-group-gap);
+            }
         }
     }
-}
+}
\ No newline at end of file
diff --git a/manon/notification.scss b/manon/notification.scss
index 45d086dc..f15a65fa 100644
--- a/manon/notification.scss
+++ b/manon/notification.scss
@@ -35,10 +35,6 @@
   }
 }
 
-.notification {
-  @include notification;
-}
-
 /* Icon */
 p,
 span,