diff --git a/src/implementations/twig/components/notification/README.md b/src/implementations/twig/components/notification/README.md
index c6184d249b0..cb2d9eeec3f 100644
--- a/src/implementations/twig/components/notification/README.md
+++ b/src/implementations/twig/components/notification/README.md
@@ -12,6 +12,8 @@ npm install --save @ecl/twig-component-notification
 - **"icon"** (object of type "icon") (default: {})
 - **"sr_icon"** (string) (default: ''): additional label for the icon; for screen readers
 - **"title"** (string) (default: '')
+- **"description"** (string) (default: '')
+- **"links"** (array) (default: [])
 - **"close"** (object of type "button") (default: {}): close button (optional)
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
diff --git a/src/implementations/twig/components/notification/__snapshots__/notification.test.js.snap b/src/implementations/twig/components/notification/__snapshots__/notification.test.js.snap
index a9ae86e6cbb..65f0d522ce6 100644
--- a/src/implementations/twig/components/notification/__snapshots__/notification.test.js.snap
+++ b/src/implementations/twig/components/notification/__snapshots__/notification.test.js.snap
@@ -125,6 +125,26 @@ exports[`EC Notification Info renders correctly 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -192,6 +212,26 @@ exports[`EC Notification Info renders correctly with extra attributes 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -257,6 +297,26 @@ exports[`EC Notification Info renders correctly with extra class names 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -317,6 +377,26 @@ exports[`EC Notification Info renders correctly without description 1`] = `
       >
         Information notification
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -377,6 +457,26 @@ exports[`EC Notification Info renders correctly without title 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -640,6 +740,26 @@ exports[`EU Notification Info renders correctly 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -707,6 +827,26 @@ exports[`EU Notification Info renders correctly with extra attributes 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -772,6 +912,26 @@ exports[`EU Notification Info renders correctly with extra class names 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -832,6 +992,26 @@ exports[`EU Notification Info renders correctly without description 1`] = `
       >
         Information notification
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
@@ -892,6 +1072,26 @@ exports[`EU Notification Info renders correctly without title 1`] = `
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
       </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Lorem ipsum
+        </a>
+      </div>
+      <div
+        class="ecl-notification__link"
+      >
+        <a
+          class="ecl-link"
+          href="/example"
+        >
+          Nullam accumsan semper lorem
+        </a>
+      </div>
     </div>
   </div>
 </jest>
diff --git a/src/implementations/twig/components/notification/notification.html.twig b/src/implementations/twig/components/notification/notification.html.twig
index b6dbac990aa..8490c46608d 100644
--- a/src/implementations/twig/components/notification/notification.html.twig
+++ b/src/implementations/twig/components/notification/notification.html.twig
@@ -6,6 +6,8 @@
   - "icon" (object of type "icon") (default: {})
   - "sr_icon" (string) (default: ''): additional label for the icon; for screen readers
   - "title" (string) (default: '')
+  - "description" (string) (default: '')
+  - "links" (array): An array of ECL links objects
   - "close" (object of type "button") (default: {}): close button (optional)
   - "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the select
   - "extra_attributes" (optional) (array) (default: []) Extra attributes for select
@@ -23,6 +25,7 @@
 {% set _sr_icon = sr_icon|default('') %}
 {% set _title = title|default('') %}
 {% set _close = close|default({}) %}
+{% set _links = links|default([]) %}
 {% set _description = description|default('') %}
 {% set _css_class = 'ecl-notification' %}
 {% set _extra_attributes = 'data-ecl-auto-init="Notification"' %}
@@ -67,23 +70,29 @@
     extra_classes: 'ecl-notification__icon',
   } only %}
   <div class="ecl-notification__content">
-    {% if _close is not empty %}
-      {% include '@ecl/button/button.html.twig' with _close|merge({
-        type: 'button',
-        variant: 'tertiary',
-        extra_classes: 'ecl-notification__close',
-        extra_attributes: [{
-          name: 'data-ecl-notification-close',
-        }],
-      }) only %}
-    {% endif %}
-
-    {% if _title is not empty %}
-      <div class="ecl-notification__title">{{ _title }}</div>
-    {% endif %}
-    {% if _description is not empty %}
-      <div class="ecl-notification__description">{{ _description }}</div>
-    {% endif %}  
+  {% if _close is not empty %}
+    {% include '@ecl/button/button.html.twig' with _close|merge({
+      type: 'button',
+      variant: 'tertiary',
+      extra_classes: 'ecl-notification__close',
+      extra_attributes: [{
+        name: 'data-ecl-notification-close',
+      }],
+    }) only %}
+  {% endif %}
+  {% if _title is not empty %}
+    <div class="ecl-notification__title">{{ _title }}</div>
+  {% endif %}
+  {% if _description is not empty %}
+    <div class="ecl-notification__description">{{ _description }}</div>
+  {% endif %}  
+  {% if _links is not empty and _links is iterable %}
+    {% for _link in _links %}
+    <div class="ecl-notification__link">
+      {% include '@ecl/link/link.html.twig' with _link only %}
+    </div>
+    {% endfor %}
+  {% endif %}
   </div>
 </div>
 
diff --git a/src/implementations/twig/components/notification/notification.story.js b/src/implementations/twig/components/notification/notification.story.js
index b07a7bfb48a..08f9b7ceb2a 100644
--- a/src/implementations/twig/components/notification/notification.story.js
+++ b/src/implementations/twig/components/notification/notification.story.js
@@ -21,11 +21,13 @@ const dataInfo = system === 'eu' ? dataInfoEu : dataInfoEc;
 const dataSuccess = system === 'eu' ? dataSuccessEu : dataSuccessEc;
 const dataError = system === 'eu' ? dataErrorEu : dataErrorEc;
 const dataWarning = system === 'eu' ? dataWarningEu : dataWarningEc;
+const dataLinks = [...dataInfo.links];
 
 const getArgs = (data) => ({
   show_close: true,
   show_title: true,
   title: data.title,
+  show_links: true,
   description: data.description,
 });
 
@@ -46,6 +48,14 @@ const getArgTypes = () => ({
       category: 'Optional',
     },
   },
+  show_links: {
+    name: 'links',
+    type: { name: 'boolean' },
+    description: 'Show the notification links',
+    table: {
+      category: 'Optional',
+    },
+  },
   title: {
     name: 'title',
     type: { name: 'string' },
@@ -80,6 +90,12 @@ const prepareData = (data, args) => {
     delete clone.close;
   }
 
+  if (args.show_links) {
+    clone.links = dataLinks;
+  } else {
+    clone.links = [];
+  }
+
   // Other controls
   if (clone.title) {
     clone.title = args.title;
diff --git a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
index fca56ddcf80..8bf5ba173ef 100644
--- a/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
+++ b/src/implementations/twig/components/site-header/__snapshots__/site-header.test.js.snap
@@ -995,15 +995,56 @@ exports[`Site Header EC renders correctly 1`] = `
             <div
               class="ecl-notification__content"
             >
+              <button
+                class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+                data-ecl-notification-close=""
+                type="button"
+              >
+                <span
+                  class="ecl-button__container"
+                >
+                  <span
+                    class="ecl-button__label"
+                    data-ecl-label="true"
+                  >
+                    Close
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-button__icon"
+                    data-ecl-icon=""
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#close"
+                    />
+                  </svg>
+                </span>
+              </button>
               <div
-                class="ecl-notification__title"
+                class="ecl-notification__description"
               >
-                Information notification
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.
               </div>
               <div
-                class="ecl-notification__description"
+                class="ecl-notification__link"
               >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Lorem ipsum
+                </a>
+              </div>
+              <div
+                class="ecl-notification__link"
+              >
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Nullam accumsan semper lorem
+                </a>
               </div>
             </div>
           </div>
@@ -2077,15 +2118,56 @@ exports[`Site Header EC renders correctly when logged in 1`] = `
             <div
               class="ecl-notification__content"
             >
+              <button
+                class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+                data-ecl-notification-close=""
+                type="button"
+              >
+                <span
+                  class="ecl-button__container"
+                >
+                  <span
+                    class="ecl-button__label"
+                    data-ecl-label="true"
+                  >
+                    Close
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-button__icon"
+                    data-ecl-icon=""
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#close"
+                    />
+                  </svg>
+                </span>
+              </button>
               <div
-                class="ecl-notification__title"
+                class="ecl-notification__description"
               >
-                Information notification
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.
               </div>
               <div
-                class="ecl-notification__description"
+                class="ecl-notification__link"
               >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Lorem ipsum
+                </a>
+              </div>
+              <div
+                class="ecl-notification__link"
+              >
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Nullam accumsan semper lorem
+                </a>
               </div>
             </div>
           </div>
@@ -3139,15 +3221,56 @@ exports[`Site Header EC renders correctly with extra attributes 1`] = `
             <div
               class="ecl-notification__content"
             >
+              <button
+                class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+                data-ecl-notification-close=""
+                type="button"
+              >
+                <span
+                  class="ecl-button__container"
+                >
+                  <span
+                    class="ecl-button__label"
+                    data-ecl-label="true"
+                  >
+                    Close
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-button__icon"
+                    data-ecl-icon=""
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#close"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <div
+                class="ecl-notification__description"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.
+              </div>
               <div
-                class="ecl-notification__title"
+                class="ecl-notification__link"
               >
-                Information notification
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Lorem ipsum
+                </a>
               </div>
               <div
-                class="ecl-notification__description"
+                class="ecl-notification__link"
               >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Nullam accumsan semper lorem
+                </a>
               </div>
             </div>
           </div>
@@ -4199,15 +4322,56 @@ exports[`Site Header EC renders correctly with extra class names 1`] = `
             <div
               class="ecl-notification__content"
             >
+              <button
+                class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+                data-ecl-notification-close=""
+                type="button"
+              >
+                <span
+                  class="ecl-button__container"
+                >
+                  <span
+                    class="ecl-button__label"
+                    data-ecl-label="true"
+                  >
+                    Close
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-button__icon"
+                    data-ecl-icon=""
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#close"
+                    />
+                  </svg>
+                </span>
+              </button>
               <div
-                class="ecl-notification__title"
+                class="ecl-notification__description"
               >
-                Information notification
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.
               </div>
               <div
-                class="ecl-notification__description"
+                class="ecl-notification__link"
+              >
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Lorem ipsum
+                </a>
+              </div>
+              <div
+                class="ecl-notification__link"
               >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Nullam accumsan semper lorem
+                </a>
               </div>
             </div>
           </div>
@@ -5259,15 +5423,56 @@ exports[`Site Header EU renders correctly 1`] = `
             <div
               class="ecl-notification__content"
             >
+              <button
+                class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only"
+                data-ecl-notification-close=""
+                type="button"
+              >
+                <span
+                  class="ecl-button__container"
+                >
+                  <span
+                    class="ecl-button__label"
+                    data-ecl-label="true"
+                  >
+                    Close
+                  </span>
+                  <svg
+                    aria-hidden="true"
+                    class="ecl-icon ecl-icon--m ecl-button__icon"
+                    data-ecl-icon=""
+                    focusable="false"
+                  >
+                    <use
+                      xlink:href="/icons.svg#close"
+                    />
+                  </svg>
+                </span>
+              </button>
               <div
-                class="ecl-notification__title"
+                class="ecl-notification__description"
               >
-                Information notification
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.
               </div>
               <div
-                class="ecl-notification__description"
+                class="ecl-notification__link"
               >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Lorem ipsum
+                </a>
+              </div>
+              <div
+                class="ecl-notification__link"
+              >
+                <a
+                  class="ecl-link"
+                  href="/example"
+                >
+                  Nullam accumsan semper lorem
+                </a>
               </div>
             </div>
           </div>
diff --git a/src/implementations/twig/components/site-header/ec-site-header.story.js b/src/implementations/twig/components/site-header/ec-site-header.story.js
index 11cba0b88d8..08ae41e33a8 100644
--- a/src/implementations/twig/components/site-header/ec-site-header.story.js
+++ b/src/implementations/twig/components/site-header/ec-site-header.story.js
@@ -16,6 +16,7 @@ const dataFull = { ...dataFullEC };
 const clonedDataFull = { ...dataFull };
 const enMenu = { ...enDataMenu };
 const enMegaMenu = { ...enDataMegaMenu };
+const closeButton = { ...dataFull.notification.close };
 
 // Core
 const dataCore = JSON.parse(JSON.stringify(dataFull));
@@ -41,6 +42,7 @@ const getArgs = (data) => {
     show_language_selector: true,
     show_search: true,
     show_notification: false,
+    show_notification_close: true,
   };
 
   if (data.login_box) {
@@ -115,6 +117,15 @@ const getArgTypes = (data) => {
         category: 'Optional',
       },
     };
+    argTypes.show_notification_close = {
+      name: 'notification close button',
+      type: { name: 'boolean' },
+      description: 'Show the notification close button',
+      table: {
+        category: 'Optional',
+      },
+      if: { arg: 'show_notification' },
+    };
   }
   if (data.banner_top) {
     argTypes.show_banner_top = {
@@ -294,6 +305,11 @@ const prepareData = (data, args) => {
     delete data.notification;
   } else {
     data.notification = clonedDataFull.notification;
+    if (!args.show_notification_close) {
+      delete clonedDataFull.notification.close;
+    } else {
+      clonedDataFull.notification.close = closeButton;
+    }
   }
 
   correctPaths(data);
diff --git a/src/implementations/twig/components/site-header/eu-site-header.story.js b/src/implementations/twig/components/site-header/eu-site-header.story.js
index 97fa2bf95ff..9f4216771ae 100644
--- a/src/implementations/twig/components/site-header/eu-site-header.story.js
+++ b/src/implementations/twig/components/site-header/eu-site-header.story.js
@@ -16,6 +16,7 @@ const dataFull = { ...dataFullEU };
 const clonedDataFull = { ...dataFull };
 const enMenu = { ...enDataMenu };
 const enMegaMenu = { ...enDataMegaMenu };
+const closeButton = { ...dataFull.notification.close };
 
 // Core
 const dataCore = JSON.parse(JSON.stringify(dataFull));
@@ -34,6 +35,7 @@ const getArgs = (data) => {
     show_language_selector: true,
     show_search: true,
     show_notification: false,
+    show_notification_close: true,
     logo_size: 'medium',
   };
 
@@ -109,6 +111,15 @@ const getArgTypes = (data) => {
         category: 'Optional',
       },
     };
+    argTypes.show_notification_close = {
+      name: 'notification close button',
+      type: { name: 'boolean' },
+      description: 'Show the notification close button',
+      table: {
+        category: 'Optional',
+      },
+      if: { arg: 'show_notification' },
+    };
   }
   if (data.has_menu) {
     argTypes.show_menu = {
@@ -282,6 +293,11 @@ const prepareData = (data, args) => {
     delete data.notification;
   } else {
     data.notification = clonedDataFull.notification;
+    if (!args.show_notification_close) {
+      delete clonedDataFull.notification.close;
+    } else {
+      clonedDataFull.notification.close = closeButton;
+    }
   }
 
   data.logged = args.logged;
diff --git a/src/implementations/vanilla/components/notification/notification-print.scss b/src/implementations/vanilla/components/notification/notification-print.scss
index ae2be95bf09..5b75e835a1f 100644
--- a/src/implementations/vanilla/components/notification/notification-print.scss
+++ b/src/implementations/vanilla/components/notification/notification-print.scss
@@ -41,6 +41,10 @@ $notification-print: null !default;
   max-width: var(--max-w);
 }
 
+.ecl-notification__link {
+  grid-column-start: 1;
+}
+
 .ecl-notification__description {
   grid-column-start: 1;
   margin: 0;
diff --git a/src/implementations/vanilla/components/notification/notification.scss b/src/implementations/vanilla/components/notification/notification.scss
index 3d802c4cff1..a779cd280a0 100644
--- a/src/implementations/vanilla/components/notification/notification.scss
+++ b/src/implementations/vanilla/components/notification/notification.scss
@@ -18,10 +18,10 @@ $notification: null !default;
   display: flex;
   font: map.get($notification, 'font');
   margin: 0;
-  padding-bottom: map.get($notification, 'padding');
-  padding-inline-start: map.get($notification, 'padding-start');
-  padding-inline-end: map.get($notification, 'padding-end');
-  padding-top: map.get($notification, 'padding');
+  padding-bottom: map.get($notification, 'padding-mobile');
+  padding-inline-start: map.get($notification, 'padding-start-mobile');
+  padding-inline-end: map.get($notification, 'padding-end-mobile');
+  padding-top: map.get($notification, 'padding-mobile');
   position: relative;
 }
 
@@ -46,10 +46,14 @@ $notification: null !default;
 
 .ecl-notification__description {
   grid-column-start: 1;
-  margin: 0 0 var(--s-xs);
+  margin: 0;
   max-width: var(--max-w);
 }
 
+.ecl-notification__link {
+  grid-column-start: 1;
+}
+
 .ecl-notification__close {
   align-self: self-start;
   color: map.get($notification, 'close-color');
@@ -67,6 +71,17 @@ $notification: null !default;
 
 /* stylelint-disable-next-line order/order */
 @include breakpoints.up('m') {
+  .ecl-notification {
+    padding-bottom: map.get($notification, 'padding');
+    padding-inline-end: map.get($notification, 'padding-end');
+    padding-inline-start: map.get($notification, 'padding-start');
+    padding-top: map.get($notification, 'padding');
+  }
+
+  .ecl-notification__icon {
+    margin-inline-end: var(--s-m);
+  }
+
   .ecl-notification__description {
     margin-bottom: 0;
     padding-bottom: 0;
@@ -110,11 +125,28 @@ $notification: null !default;
   .ecl-notification__icon-background {
     background: map.get($notification, 'warning', 'icon-background-color');
     height: map.get($notification, 'warning', 'icon-background-height');
-    left: map.get($notification, 'warning', 'icon-background-left');
+    left: map.get($notification, 'warning', 'icon-background-left-mobile');
     position: absolute;
     width: map.get($notification, 'warning', 'icon-background-width');
-    top: map.get($notification, 'warning', 'icon-background-top');
+    top: map.get($notification, 'warning', 'icon-background-top-mobile');
     z-index: 1;
+
+    &:dir(rtl) {
+      left: auto;
+      right: map.get($notification, 'warning', 'icon-background-left-mobile');
+    }
+  }
+}
+
+@include breakpoints.up('m') {
+  .ecl-notification--warning .ecl-notification__icon-background {
+    left: map.get($notification, 'warning', 'icon-background-left');
+    top: map.get($notification, 'warning', 'icon-background-top');
+
+    &:dir(rtl) {
+      left: auto;
+      right: map.get($notification, 'warning', 'icon-background-left');
+    }
   }
 }
 
diff --git a/src/specs/components/notification/demo/data--error-eu.js b/src/specs/components/notification/demo/data--error-eu.js
index 258d4301f83..57adcd8fcd8 100644
--- a/src/specs/components/notification/demo/data--error-eu.js
+++ b/src/specs/components/notification/demo/data--error-eu.js
@@ -4,7 +4,7 @@ module.exports = {
   icon: {
     path: '/icons.svg',
     name: 'error',
-    size: 'm',
+    size: 'l',
   },
   sr_icon: 'Error',
   title: 'Error notification',
diff --git a/src/specs/components/notification/demo/data--info-ec.js b/src/specs/components/notification/demo/data--info-ec.js
index 237e8c82822..59f4972012e 100644
--- a/src/specs/components/notification/demo/data--info-ec.js
+++ b/src/specs/components/notification/demo/data--info-ec.js
@@ -6,6 +6,20 @@ module.exports = {
     name: 'information',
     size: 'l',
   },
+  links: [
+    {
+      link: {
+        label: 'Lorem ipsum',
+        path: '/example',
+      },
+    },
+    {
+      link: {
+        label: 'Nullam accumsan semper lorem',
+        path: '/example',
+      },
+    },
+  ],
   sr_icon: 'Information',
   title: 'Information notification',
   description:
diff --git a/src/specs/components/notification/demo/data--info-eu.js b/src/specs/components/notification/demo/data--info-eu.js
index c974371172b..59f4972012e 100644
--- a/src/specs/components/notification/demo/data--info-eu.js
+++ b/src/specs/components/notification/demo/data--info-eu.js
@@ -4,8 +4,22 @@ module.exports = {
   icon: {
     path: '/icons.svg',
     name: 'information',
-    size: 'm',
+    size: 'l',
   },
+  links: [
+    {
+      link: {
+        label: 'Lorem ipsum',
+        path: '/example',
+      },
+    },
+    {
+      link: {
+        label: 'Nullam accumsan semper lorem',
+        path: '/example',
+      },
+    },
+  ],
   sr_icon: 'Information',
   title: 'Information notification',
   description:
diff --git a/src/specs/components/notification/demo/data--success-eu.js b/src/specs/components/notification/demo/data--success-eu.js
index 66c9bd9ff84..c05cb4fed81 100644
--- a/src/specs/components/notification/demo/data--success-eu.js
+++ b/src/specs/components/notification/demo/data--success-eu.js
@@ -4,7 +4,7 @@ module.exports = {
   icon: {
     path: '/icons.svg',
     name: 'check-filled',
-    size: 'm',
+    size: 'l',
   },
   sr_icon: 'Success',
   title: 'Success notification',
diff --git a/src/specs/components/notification/demo/data--warning-eu.js b/src/specs/components/notification/demo/data--warning-eu.js
index 4e134ae270b..2e9781947e9 100644
--- a/src/specs/components/notification/demo/data--warning-eu.js
+++ b/src/specs/components/notification/demo/data--warning-eu.js
@@ -4,7 +4,7 @@ module.exports = {
   icon: {
     path: '/icons.svg',
     name: 'warning',
-    size: 'm',
+    size: 'l',
   },
   sr_icon: 'Warning',
   title: 'Warning notification',
diff --git a/src/specs/components/site-header/demo/data--ec.js b/src/specs/components/site-header/demo/data--ec.js
index 88509f569fc..5f2a8735067 100644
--- a/src/specs/components/site-header/demo/data--ec.js
+++ b/src/specs/components/site-header/demo/data--ec.js
@@ -264,8 +264,30 @@ module.exports = {
       name: 'information',
       size: 'l',
     },
-    title: 'Information notification',
+    close: {
+      label: 'Close',
+      icon: {
+        path: '/icons.svg',
+        name: 'close',
+        size: 'm',
+      },
+      hide_label: true,
+    },
+    links: [
+      {
+        link: {
+          label: 'Lorem ipsum',
+          path: '/example',
+        },
+      },
+      {
+        link: {
+          label: 'Nullam accumsan semper lorem',
+          path: '/example',
+        },
+      },
+    ],
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.',
   },
 };
diff --git a/src/specs/components/site-header/demo/data--eu.js b/src/specs/components/site-header/demo/data--eu.js
index 6ce3e8b9eee..d6ad522b6e9 100644
--- a/src/specs/components/site-header/demo/data--eu.js
+++ b/src/specs/components/site-header/demo/data--eu.js
@@ -263,9 +263,31 @@ module.exports = {
       name: 'information',
       size: 'l',
     },
-    title: 'Information notification',
+    close: {
+      label: 'Close',
+      icon: {
+        path: '/icons.svg',
+        name: 'close',
+        size: 'm',
+      },
+      hide_label: true,
+    },
+    links: [
+      {
+        link: {
+          label: 'Lorem ipsum',
+          path: '/example',
+        },
+      },
+      {
+        link: {
+          label: 'Nullam accumsan semper lorem',
+          path: '/example',
+        },
+      },
+    ],
     description:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem.',
   },
   icon_path: '/icons.svg',
 };
diff --git a/src/themes/ec/variables/_notification.scss b/src/themes/ec/variables/_notification.scss
index d4a7dc04e73..13c0dafe5a7 100644
--- a/src/themes/ec/variables/_notification.scss
+++ b/src/themes/ec/variables/_notification.scss
@@ -3,16 +3,21 @@
 
 $notification: (
   radius: 0,
-  padding: var(--s-xl),
+  padding: var(--s-l),
+  padding-mobile: var(--s-m),
   padding-end: var(--s-xl),
-  padding-start: var(--s-3xl),
+  padding-end-mobile: var(--s-m),
+  padding-start: var(--s-l),
+  padding-start-mobile: var(--s-s),
   border-width: 1px,
   font: var(--f-m),
   color: var(--c-d),
   title-font: var(--f-l),
   title-font-weight: map.get($font-weight, 'regular'),
-  title-spacing: var(--s-s),
+  title-spacing: 0,
   close-color: var(--c-d),
+  close-offset-top-mobile: calc(var(--s-m) - var(--s-xl)),
+  close-offset-end-mobile: calc(var(--s-m) - var(--s-xl)),
   close-offset-top: calc(var(--s-m) - var(--s-xl)),
   close-offset-end: calc(var(--s-m) - var(--s-xl)),
   info: (
@@ -32,9 +37,12 @@ $notification: (
     icon-background-color: var(--c-d),
     icon-background-height: var(--s-m),
     icon-background-width: var(--s-xs),
-    icon-background-top: calc(var(--s-xl) + var(--s-s)),
+    icon-background-top-mobile: calc(var(--s-m) + var(--s-s)),
+    icon-background-top: calc(var(--s-l) + var(--s-s)),
+    icon-background-left-mobile:
+      calc(var(--s-s) + (map.get($icon, 'l') / 2) - var(--s-2xs)),
     icon-background-left:
-      calc(var(--s-3xl) + (map.get($icon, 'l') / 2) - var(--s-2xs)),
+      calc(var(--s-l) + (map.get($icon, 'l') / 2) - var(--s-2xs)),
   ),
   error: (
     background: var(--c-n-20),
diff --git a/src/themes/eu/variables/_notification.scss b/src/themes/eu/variables/_notification.scss
index 57121928296..0730e51e514 100644
--- a/src/themes/eu/variables/_notification.scss
+++ b/src/themes/eu/variables/_notification.scss
@@ -4,17 +4,20 @@
 $notification: (
   radius: 4px,
   padding: var(--s-l),
-  padding-end: var(--s-xs),
+  padding-mobile: var(--s-m),
+  padding-end: var(--s-2xl),
   padding-start: var(--s-l),
+  padding-end-mobile: var(--s-xl),
+  padding-start-mobile: var(--s-s),
   border-width: 1px,
   font: var(--f-p-m),
-  color: var(--c-d-80),
-  title-font: var(--f-p-m),
-  title-font-weight: map.get($font-weight, 'bold'),
-  title-spacing: var(--s-xs),
+  color: var(--c-d),
+  title-font: var(--f-p-l),
+  title-font-weight: map.get($font-weight, 'normal'),
+  title-spacing: 0,
   close-color: var(--c-d),
-  close-offset-top: calc(var(--s-s) - var(--s-l)),
-  close-offset-end: calc(var(--s-s) - var(--s-xs)),
+  close-offset-top: calc(var(--s-m) - var(--s-l)),
+  close-offset-end: calc(-1 * var(--s-l)),
   info: (
     background: var(--c-in-5),
     color: var(--c-in),
@@ -30,11 +33,14 @@ $notification: (
     color: var(--c-wa),
     border-color: var(--c-wa),
     icon-background-color: var(--c-d),
-    icon-background-height: var(--s-s),
+    icon-background-height: var(--s-m),
     icon-background-width: var(--s-2xs),
-    icon-background-top: calc(var(--s-l) + var(--s-xs) + 1px),
+    icon-background-top: calc(var(--s-l) + var(--s-xs) + 2px),
+    icon-background-top-mobile: calc(var(--s-m) + var(--s-s)),
+    icon-background-left-mobile:
+      calc(var(--s-s) + (map.get($icon, 'l') / 2) - 2px),
     icon-background-left:
-      calc(var(--s-l) + (map.get($icon, 'm') / 2) - var(--s-2xs) + 1px),
+      calc(var(--s-l) + (map.get($icon, 'l') / 2) - var(--s-2xs) + 1px),
   ),
   error: (
     background: var(--c-er-5),