From 15342d93e9e9895bacd9cb13d9078645866c78ed Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 23 Jul 2025 19:35:58 +0000
Subject: [PATCH 1/3] Initial plan


From a23f47901b9d679bbd320945edf4ffafb551b174 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 23 Jul 2025 19:57:19 +0000
Subject: [PATCH 2/3] Implement Callout 2.0 with emphasis levels, backward
 compatibility, and comprehensive testing

Co-authored-by: bdfranck <1479091+bdfranck@users.noreply.github.com>
---
 .../src/lib/components/callout/callout.ts     |   3 +
 libs/common/src/lib/common.ts                 |   1 +
 .../src/lib/callout/callout.spec.tsx          |  39 +++++++
 .../src/lib/callout/callout.tsx               |   5 +
 .../src/components/callout/Callout.spec.ts    | 109 +++++++++++++++++-
 .../src/components/callout/Callout.svelte     |  88 +++++++++++++-
 .../src/components/callout/doc.md             |  33 +++++-
 7 files changed, 272 insertions(+), 6 deletions(-)

diff --git a/libs/angular-components/src/lib/components/callout/callout.ts b/libs/angular-components/src/lib/components/callout/callout.ts
index d6f4e3eac..e4b5f349f 100644
--- a/libs/angular-components/src/lib/components/callout/callout.ts
+++ b/libs/angular-components/src/lib/components/callout/callout.ts
@@ -2,6 +2,7 @@ import {
   GoabCalloutAriaLive,
   GoabCalloutSize,
   GoabCalloutType,
+  GoabCalloutEmphasis,
   GoabCalloutIconTheme,
 } from "@abgov/ui-components-common";
 import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from "@angular/core";
@@ -15,6 +16,7 @@ import { GoabBaseComponent } from "../base.component";
       [attr.type]="type"
       [attr.heading]="heading"
       [attr.size]="size"
+      [attr.emphasis]="emphasis"
       [attr.maxwidth]="maxWidth"
       [attr.arialive]="ariaLive"
       [attr.icontheme]="iconTheme"
@@ -33,6 +35,7 @@ export class GoabCallout extends GoabBaseComponent {
   @Input() type?: GoabCalloutType = "information";
   @Input() heading?: string = "";
   @Input() size?: GoabCalloutSize = "large";
+  @Input() emphasis?: GoabCalloutEmphasis = "medium";
   @Input() maxWidth?: string;
   @Input() ariaLive?: GoabCalloutAriaLive = "off";
   @Input() iconTheme?: GoabCalloutIconTheme = "outline";
diff --git a/libs/common/src/lib/common.ts b/libs/common/src/lib/common.ts
index a7f46a113..b8610d408 100644
--- a/libs/common/src/lib/common.ts
+++ b/libs/common/src/lib/common.ts
@@ -127,6 +127,7 @@ export type GoabCalloutType =
   | "emergency"
   | "event";
 export type GoabCalloutSize = "medium" | "large";
+export type GoabCalloutEmphasis = "high" | "medium" | "low";
 export type GoabCalloutAriaLive = "off" | "polite" | "assertive";
 export type GoabCalloutIconTheme = "outline" | "filled";
 
diff --git a/libs/react-components/src/lib/callout/callout.spec.tsx b/libs/react-components/src/lib/callout/callout.spec.tsx
index fe83ffa22..7c324cb76 100644
--- a/libs/react-components/src/lib/callout/callout.spec.tsx
+++ b/libs/react-components/src/lib/callout/callout.spec.tsx
@@ -60,4 +60,43 @@ describe("Callout", () => {
       expect(el?.getAttribute("arialive")).toBe(expected);
     });
   });
+
+  test("Callout shall render with different emphasis levels", async () => {
+    const testCases = [
+      { emphasis: "high", expected: "high" },
+      { emphasis: "medium", expected: "medium" },
+      { emphasis: "low", expected: "low" },
+      { emphasis: undefined, expected: "medium" }, // default
+    ];
+
+    testCases.forEach(({ emphasis, expected }) => {
+      const result = render(
+        <GoabCallout
+          type="information"
+          emphasis={emphasis as "high" | "medium" | "low" | undefined}
+        >
+          Test content
+        </GoabCallout>,
+      );
+
+      const el = result.container.querySelector("goa-callout");
+      expect(el?.getAttribute("emphasis")).toBe(expected);
+    });
+  });
+
+  test("Callout shall maintain backward compatibility with size prop", async () => {
+    const result = render(
+      <GoabCallout
+        type="information"
+        size="medium"
+        emphasis="high"
+      >
+        Test content
+      </GoabCallout>,
+    );
+
+    const el = result.container.querySelector("goa-callout");
+    expect(el?.getAttribute("size")).toBe("medium");
+    expect(el?.getAttribute("emphasis")).toBe("high");
+  });
 });
diff --git a/libs/react-components/src/lib/callout/callout.tsx b/libs/react-components/src/lib/callout/callout.tsx
index ef05e84d2..deb7c9a98 100644
--- a/libs/react-components/src/lib/callout/callout.tsx
+++ b/libs/react-components/src/lib/callout/callout.tsx
@@ -2,6 +2,7 @@ import {
   GoabCalloutAriaLive,
   GoabCalloutSize,
   GoabCalloutType,
+  GoabCalloutEmphasis,
   GoabCalloutIconTheme,
   Margins,
 } from "@abgov/ui-components-common";
@@ -10,6 +11,7 @@ interface WCProps extends Margins {
   heading?: string;
   type?: GoabCalloutType;
   size?: GoabCalloutSize;
+  emphasis?: GoabCalloutEmphasis;
   arialive?: GoabCalloutAriaLive;
   maxwidth?: string;
   icontheme?: GoabCalloutIconTheme;
@@ -29,6 +31,7 @@ export interface GoabCalloutProps extends Margins {
   heading?: string;
   type?: GoabCalloutType;
   size?: GoabCalloutSize;
+  emphasis?: GoabCalloutEmphasis;
   iconTheme?: GoabCalloutIconTheme;
   maxWidth?: string;
   testId?: string;
@@ -41,6 +44,7 @@ export const GoabCallout = ({
   type = "information",
   iconTheme = "outline",
   size = "large",
+  emphasis = "medium",
   maxWidth,
   testId,
   ariaLive = "off",
@@ -55,6 +59,7 @@ export const GoabCallout = ({
       heading={heading}
       type={type}
       size={size}
+      emphasis={emphasis}
       maxwidth={maxWidth}
       arialive={ariaLive}
       icontheme={iconTheme}
diff --git a/libs/web-components/src/components/callout/Callout.spec.ts b/libs/web-components/src/components/callout/Callout.spec.ts
index b76ff30a6..39621173f 100644
--- a/libs/web-components/src/components/callout/Callout.spec.ts
+++ b/libs/web-components/src/components/callout/Callout.spec.ts
@@ -1,7 +1,7 @@
 import { render, waitFor } from "@testing-library/svelte";
 import GoACallout from "./Callout.svelte";
 import GoACalloutWrapper from "./CalloutWrapper.test.svelte";
-import { it, describe } from "vitest";
+import { it, describe, vi } from "vitest";
 
 describe("GoACalloutComponent", () => {
   it("should render - emergency", async () => {
@@ -213,4 +213,111 @@ describe("GoACalloutComponent", () => {
       expect(callout).toHaveAttribute("aria-live", "");
     });
   });
+
+  describe("emphasis levels", () => {
+    it("should have default emphasis of medium", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "information",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).toHaveClass("emphasis-medium");
+    });
+
+    it("should render with high emphasis", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "emergency",
+        emphasis: "high",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).toHaveClass("emphasis-high");
+      expect(callout).toHaveClass("emergency");
+    });
+
+    it("should render with medium emphasis", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "important",
+        emphasis: "medium",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).toHaveClass("emphasis-medium");
+      expect(callout).toHaveClass("important");
+    });
+
+    it("should render with low emphasis", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "success",
+        emphasis: "low",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).toHaveClass("emphasis-low");
+      expect(callout).toHaveClass("success");
+    });
+
+    it("should add no-heading class when heading is not provided", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "information",
+        emphasis: "low",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).toHaveClass("no-heading");
+    });
+
+    it("should not add no-heading class when heading is provided", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "information",
+        emphasis: "low",
+        heading: "Test Heading",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+
+      expect(callout).not.toHaveClass("no-heading");
+    });
+
+    it("should apply emphasis classes to icon and content", async () => {
+      const baseElement = render(GoACallout, {
+        testid: "callout-test",
+        type: "important", 
+        emphasis: "high",
+        heading: "Test",
+      });
+      const callout = await baseElement.findByTestId("callout-test");
+      const icon = callout.querySelector(".icon");
+      const content = callout.querySelector(".content");
+      const heading = content.querySelector("h3");
+
+      expect(icon).toHaveClass("emphasis-high");
+      expect(content).toHaveClass("emphasis-high");
+      expect(heading).toHaveClass("emphasis-high");
+    });
+  });
+
+  describe("deprecation warnings", () => {
+    it("should warn when event type is used", async () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      
+      render(GoACallout, {
+        testid: "callout-test",
+        type: "event",
+      });
+
+      await waitFor(() => {
+        expect(consoleSpy).toHaveBeenCalledWith(
+          "Callout type 'event' is deprecated and will be removed in a future version. Please use a different type."
+        );
+      });
+
+      consoleSpy.mockRestore();
+    });
+  });
 });
diff --git a/libs/web-components/src/components/callout/Callout.svelte b/libs/web-components/src/components/callout/Callout.svelte
index 8784830b7..6cb91be6b 100644
--- a/libs/web-components/src/components/callout/Callout.svelte
+++ b/libs/web-components/src/components/callout/Callout.svelte
@@ -19,6 +19,11 @@
     "medium",
     "large",
   ]);
+  const [CalloutEmphasis, validateCalloutEmphasis] = typeValidator("Callout emphasis", [
+    "high",
+    "medium", 
+    "low",
+  ]);
   const [AriaLive, validateAriaLive] = typeValidator("Aria live", [
     "off",
     "assertive",
@@ -28,6 +33,7 @@
   // Types
   type CalloutType = (typeof Types)[number];
   type CalloutSize = (typeof CalloutSizes)[number];
+  type CalloutEmphasisType = (typeof CalloutEmphasis)[number];
   type AriaLiveType = (typeof AriaLive)[number];
 
   // margin
@@ -38,6 +44,7 @@
 
   export let size: CalloutSize = "large";
   export let type: CalloutType;
+  export let emphasis: CalloutEmphasisType = "medium";
   export let heading: string = "";
   export let maxwidth: string = "none";
   export let testid: string = "";
@@ -68,10 +75,14 @@
 
   onMount(() => {
     validateCalloutSize(size);
+    validateCalloutEmphasis(emphasis);
     validateAriaLive(arialive);
 
     setTimeout(() => {
       validateType(type);
+      if (type === "event") {
+        console.warn("Callout type 'event' is deprecated and will be removed in a future version. Please use a different type.");
+      }
       iconSize = isMediumCallout ? "small" : "medium";
     });
   });
@@ -85,21 +96,22 @@
     ${calculateMargin(mt, mr, mb, ml)};
     max-width: ${maxwidth};
   `}
-  class="notification {type}"
+  class="notification {type} emphasis-{emphasis}"
   class:medium={isMediumCallout}
+  class:no-heading={!heading}
   data-testid={testid}
   aria-live={arialive}
 >
-  <span class="icon {type}">
+  <span class="icon {type} emphasis-{emphasis}">
     <goa-icon
       type={iconType}
       size={iconSize}
       theme={icontheme}
     />
   </span>
-  <span class="content {type}">
+  <span class="content {type} emphasis-{emphasis}">
     {#if heading}
-      <h3 class:medium={isMediumCallout}>{heading}</h3>
+      <h3 class:medium={isMediumCallout} class="emphasis-{emphasis}">{heading}</h3>
     {/if}
     <slot />
   </span>
@@ -205,6 +217,74 @@
   .notification.emergency {
     border-color: var(--goa-callout-emergency-border-color);
   }
+  
+  /* Emphasis level styles */
+  .notification.emphasis-high {
+    border-width: var(--goa-callout-high-border-width, var(--goa-callout-l-border-width));
+    font: var(--goa-callout-high-text-size, var(--goa-callout-l-text-size));
+  }
+  
+  .notification.emphasis-medium {
+    border-width: var(--goa-callout-medium-border-width, var(--goa-callout-l-border-width));
+    font: var(--goa-callout-medium-text-size, var(--goa-callout-l-text-size));
+  }
+  
+  .notification.emphasis-low {
+    border-width: var(--goa-callout-low-border-width, var(--goa-callout-l-border-width));
+    font: var(--goa-callout-low-text-size, var(--goa-callout-l-text-size));
+  }
+  
+  /* High emphasis styles */
+  .notification.emphasis-high .icon {
+    padding: var(--goa-callout-high-statusbar-padding, var(--goa-callout-l-statusbar-padding));
+  }
+  
+  .notification.emphasis-high .content {
+    padding: var(--goa-callout-high-content-padding, var(--goa-callout-l-content-padding));
+  }
+  
+  .notification.emphasis-high h3 {
+    font: var(--goa-callout-high-heading-size, var(--goa-callout-l-heading-size));
+    margin-bottom: var(--goa-callout-high-content-gap, var(--goa-callout-l-content-gap));
+  }
+  
+  /* Medium emphasis styles */
+  .notification.emphasis-medium .icon {
+    padding: var(--goa-callout-medium-statusbar-padding, var(--goa-callout-l-statusbar-padding));
+  }
+  
+  .notification.emphasis-medium .content {
+    padding: var(--goa-callout-medium-content-padding, var(--goa-callout-l-content-padding));
+  }
+  
+  .notification.emphasis-medium h3 {
+    font: var(--goa-callout-medium-heading-size, var(--goa-callout-l-heading-size));
+    margin-bottom: var(--goa-callout-medium-content-gap, var(--goa-callout-l-content-gap));
+  }
+  
+  /* Low emphasis styles */
+  .notification.emphasis-low .icon {
+    padding: var(--goa-callout-low-statusbar-padding, var(--goa-callout-l-statusbar-padding));
+  }
+  
+  .notification.emphasis-low .content {
+    padding: var(--goa-callout-low-content-padding, var(--goa-callout-l-content-padding));
+  }
+  
+  .notification.emphasis-low h3 {
+    font: var(--goa-callout-low-heading-size, var(--goa-callout-l-heading-size));
+    margin-bottom: var(--goa-callout-low-content-gap, var(--goa-callout-l-content-gap));
+  }
+  
+  /* Low emphasis without heading adjustment */
+  .notification.emphasis-low.no-heading .content {
+    padding: var(--goa-callout-low-content-padding-no-heading, var(--goa-callout-low-content-padding, var(--goa-callout-l-content-padding)));
+  }
+  
+  .notification.emphasis-low.no-heading .icon {
+    padding: var(--goa-callout-low-statusbar-padding-no-heading, var(--goa-callout-low-statusbar-padding, var(--goa-callout-l-statusbar-padding)));
+  }
+  
   /*Medium callout style*/
   .notification.medium {
     font: var(--goa-callout-m-text-size);
diff --git a/libs/web-components/src/components/callout/doc.md b/libs/web-components/src/components/callout/doc.md
index 26635b5d6..7a65932fd 100644
--- a/libs/web-components/src/components/callout/doc.md
+++ b/libs/web-components/src/components/callout/doc.md
@@ -2,13 +2,44 @@
 
 Callouts communicate important changes or facts within the body layout through a strong visual emphasis, so that users take notice and read the information.
 
+## Emphasis Levels
+
+The `emphasis` prop controls the visual prominence and layout spacing of the callout:
+
+- **high**: Maximum visual prominence with larger padding and stronger styling
+- **medium** (default): Balanced visual prominence suitable for most use cases  
+- **low**: Minimal visual emphasis with compact spacing, especially when no heading is provided
+
 Use it like this:
 
 ```html
-<goa-callout type="emergency" heading="Emergency callout">
+<!-- High emphasis for critical information -->
+<goa-callout type="emergency" emphasis="high" heading="Critical Update">
+  This requires immediate attention from all users.
+</goa-callout>
+
+<!-- Medium emphasis for standard callouts (default) -->
+<goa-callout type="information" emphasis="medium" heading="Information">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </goa-callout>
 
+<!-- Low emphasis for subtle notifications -->
+<goa-callout type="success" emphasis="low" heading="Task Complete">
+  Your action was completed successfully.
+</goa-callout>
+
+<!-- Low emphasis without heading adjusts layout automatically -->
+<goa-callout type="information" emphasis="low">
+  Brief informational message with compact spacing.
+</goa-callout>
+```
+
+## Legacy Size Property
+
+The `size` property is still supported for backward compatibility but is deprecated:
+
+```html
+<!-- Legacy usage - still functional but not recommended -->
 <goa-callout type="emergency" heading="Emergency callout" size="medium">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 </goa-callout>

From 2e4ed46bbe1f0ba323ae8b74230ffb92062e1560 Mon Sep 17 00:00:00 2001
From: Thomas Jeffery <thomaswjeffery@gmail.com>
Date: Thu, 24 Jul 2025 15:54:30 -0600
Subject: [PATCH 3/3] styling update 2.0 process test with Callout component

---
 .../src/assets/css/variables.css              | 106 +++-
 .../src/components/callout/Callout.svelte     | 485 ++++++++++++------
 2 files changed, 447 insertions(+), 144 deletions(-)

diff --git a/libs/web-components/src/assets/css/variables.css b/libs/web-components/src/assets/css/variables.css
index dc58af565..fbfdc883c 100644
--- a/libs/web-components/src/assets/css/variables.css
+++ b/libs/web-components/src/assets/css/variables.css
@@ -8,4 +8,108 @@
 	--shadow-3: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
 	--shadow-4: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
 	--shadow-5: 0 20px 40px rgba(0, 0, 0, 0.2);
-}
\ No newline at end of file
+
+	/* TEMPORARY: New callout design tokens for testing - these will come from @abgov/design-tokens after release */
+
+	/* Emphasis level padding tokens */
+	--goa-callout-h-content-padding: 16px 20px 20px 20px;
+	--goa-callout-h-content-padding-mobile: 12px 16px 16px 16px;
+	--goa-callout-h-statusbar-padding: 12px 12px 12px 18px;
+	--goa-callout-h-statusbar-padding-mobile: 12px 16px;
+
+	--goa-callout-m-content-padding: 16px 20px 20px 20px;
+	--goa-callout-m-content-padding-mobile: 12px 16px 16px 16px;
+	--goa-callout-m-statusbar-padding: 12px 12px 12px 18px;
+	--goa-callout-m-statusbar-padding-mobile: 12px 16px;
+
+	--goa-callout-l-content-padding: 4px 20px 20px 20px !important;
+	--goa-callout-l-content-padding-mobile: 0px 16px 16px 16px;
+	--goa-callout-l-statusbar-padding: 12px 12px 12px 18px;
+	--goa-callout-l-statusbar-padding-mobile: 12px 16px;
+
+	--goa-callout-l-no-heading-padding: 16px 20px 16px 20px;
+	--goa-callout-l-no-heading-padding-mobile: 16px;
+
+	/* Border colors by type and emphasis */
+	--goa-callout-info-border-color-h: #98D4EE;
+	--goa-callout-info-border-color-m: #E1DEDD;
+	--goa-callout-info-border-color-l: #98D4EE;
+
+	--goa-callout-important-border-color-h: #FDE3A1;
+	--goa-callout-important-border-color-m: #E1DEDD;
+	--goa-callout-important-border-color-l: #FDE3A1;
+
+	--goa-callout-success-border-color-h: #CCEAE1;
+	--goa-callout-success-border-color-m: #E1DEDD;
+	--goa-callout-success-border-color-l: #CCEAE1;
+
+	--goa-callout-emergency-border-color-h: #F4C8C5;
+	--goa-callout-emergency-border-color-m: #E1DEDD;
+	--goa-callout-emergency-border-color-l: #F4C8C5;
+
+	/* Statusbar background colors */
+	--goa-callout-info-color-bg-statusbar-h: #0077AD;
+	--goa-callout-info-color-bg-statusbar-m: #CBEAF7;
+	--goa-callout-info-color-bg-statusbar-l: #EBF8FF;
+
+	--goa-callout-important-color-bg-statusbar-h: #FFB800;
+	--goa-callout-important-color-bg-statusbar-m: #FFF1CC;
+	--goa-callout-important-color-bg-statusbar-l: #FFF6E5;
+
+	--goa-callout-success-color-bg-statusbar-h: #006F4C;
+	--goa-callout-success-color-bg-statusbar-m: #D8F7E6;
+	--goa-callout-success-color-bg-statusbar-l: #EDFCF0;
+
+	--goa-callout-emergency-color-bg-statusbar-h: #DA291C;
+	--goa-callout-emergency-color-bg-statusbar-m: #FDDED9;
+	--goa-callout-emergency-color-bg-statusbar-l: #FFF6F6;
+
+	/* Content background colors */
+	--goa-callout-info-color-bg-content-h: #EBF8FF;
+	--goa-callout-info-color-bg-content-m: #ffffff;
+	--goa-callout-info-color-bg-content-l: #EBF8FF;
+
+	--goa-callout-important-color-bg-content-h: #FFF6E5;
+	--goa-callout-important-color-bg-content-m: #ffffff;
+	--goa-callout-important-color-bg-content-l: #FFF6E5;
+
+	--goa-callout-success-color-bg-content-h: #EDFCF0;
+	--goa-callout-success-color-bg-content-m: #ffffff;
+	--goa-callout-success-color-bg-content-l: #EDFCF0;
+
+	--goa-callout-emergency-color-bg-content-h: #FFF6F6;
+	--goa-callout-emergency-color-bg-content-m: #ffffff;
+	--goa-callout-emergency-color-bg-content-l: #FFF6F6;
+
+	/* Icon colors by type and emphasis */
+	--goa-callout-info-icon-color-h: #ffffff;
+	--goa-callout-info-icon-color-m: #0077AD;
+	--goa-callout-info-icon-color-l: #0077AD;
+
+	--goa-callout-important-icon-color-h: #333333;
+	--goa-callout-important-icon-color-m: #CC9300;
+	--goa-callout-important-icon-color-l: #CC9300;
+
+	--goa-callout-success-icon-color-h: #ffffff;
+	--goa-callout-success-icon-color-m: #006F4C;
+	--goa-callout-success-icon-color-l: #006F4C;
+
+	--goa-callout-emergency-icon-color-h: #ffffff;
+	--goa-callout-emergency-icon-color-m: #DA291C;
+	--goa-callout-emergency-icon-color-l: #DA291C;
+
+	/* Typography tokens - with stronger overrides */
+	--goa-callout-heading-typography: var(--goa-typography-heading-s) !important;
+	--goa-callout-content-typography: var(--goa-typography-body-m) !important;
+
+	/* Text colors for headings - high emphasis uses light text on dark backgrounds */
+	--goa-color-text-light: #ffffff;
+
+	/* Border radius - override the existing none value */
+	--goa-callout-border-radius: 12px !important;
+	
+	/* Medium size compatibility tokens (deprecated size prop) */
+	--goa-callout-m-text-size: var(--goa-typography-body-s);
+	--goa-callout-m-border-width: var(--goa-border-width-s);
+	--goa-callout-m-heading-size: var(--goa-typography-heading-xs);
+}
diff --git a/libs/web-components/src/components/callout/Callout.svelte b/libs/web-components/src/components/callout/Callout.svelte
index 6cb91be6b..97216e206 100644
--- a/libs/web-components/src/components/callout/Callout.svelte
+++ b/libs/web-components/src/components/callout/Callout.svelte
@@ -21,7 +21,7 @@
   ]);
   const [CalloutEmphasis, validateCalloutEmphasis] = typeValidator("Callout emphasis", [
     "high",
-    "medium", 
+    "medium",
     "low",
   ]);
   const [AriaLive, validateAriaLive] = typeValidator("Aria live", [
@@ -73,6 +73,10 @@
               ? "calendar"
               : "";
 
+  $: actualIconTheme = emphasis === "high" ? icontheme : "filled";
+
+  $: iconSize = isMediumCallout ? "small" : "medium";
+
   onMount(() => {
     validateCalloutSize(size);
     validateCalloutEmphasis(emphasis);
@@ -83,7 +87,6 @@
       if (type === "event") {
         console.warn("Callout type 'event' is deprecated and will be removed in a future version. Please use a different type.");
       }
-      iconSize = isMediumCallout ? "small" : "medium";
     });
   });
 </script>
@@ -102,19 +105,49 @@
   data-testid={testid}
   aria-live={arialive}
 >
-  <span class="icon {type} emphasis-{emphasis}">
-    <goa-icon
-      type={iconType}
-      size={iconSize}
-      theme={icontheme}
-    />
-  </span>
-  <span class="content {type} emphasis-{emphasis}">
-    {#if heading}
-      <h3 class:medium={isMediumCallout} class="emphasis-{emphasis}">{heading}</h3>
-    {/if}
-    <slot />
-  </span>
+  {#if emphasis === "high" || emphasis === "medium"}
+    <!-- High/Medium: Full-width statusbar on top with icon + heading -->
+    <div class="statusbar {type} emphasis-{emphasis}">
+      <goa-icon
+        type={iconType}
+        size={iconSize}
+        theme={actualIconTheme}
+      />
+      {#if heading}
+        <h3 class="heading emphasis-{emphasis}">{heading}</h3>
+      {/if}
+    </div>
+    <div class="content {type} emphasis-{emphasis}">
+      <slot />
+    </div>
+  {:else if emphasis === "low" && !heading}
+    <!-- Low emphasis without heading: Icon + content in flex-row -->
+    <div class="low-no-heading-container">
+      <goa-icon
+        type={iconType}
+        size={iconSize}
+        theme={actualIconTheme}
+      />
+      <div class="content {type} emphasis-{emphasis}">
+        <slot />
+      </div>
+    </div>
+  {:else}
+    <!-- Low emphasis with heading: Same structure as high/medium -->
+    <div class="statusbar {type} emphasis-{emphasis}">
+      <goa-icon
+        type={iconType}
+        size={iconSize}
+        theme={actualIconTheme}
+      />
+      {#if heading}
+        <h3 class="heading emphasis-{emphasis}">{heading}</h3>
+      {/if}
+    </div>
+    <div class="content {type} emphasis-{emphasis}">
+      <slot />
+    </div>
+  {/if}
 </div>
 
 <!-- Style -->
@@ -123,182 +156,348 @@
     box-sizing: border-box;
     font-family: var(--goa-font-family-sans);
   }
+
   .notification {
     display: flex;
-    align-items: stretch;
+    flex-direction: column;
     overflow: hidden;
-    font: var(--goa-callout-l-text-size);
-    border: var(--goa-callout-l-border-width) solid;
+    border: var(--goa-border-width-s) solid;
     border-radius: var(--goa-callout-border-radius);
   }
 
-  h3 {
-    font: var(--goa-callout-l-heading-size);
-    margin-top: var(--goa-space-none);
-    margin-bottom: var(--goa-callout-l-content-gap);
+  /* High, Medium, and Low emphasis: Full-width statusbar on top */
+  .notification.emphasis-high,
+  .notification.emphasis-medium,
+  .notification.emphasis-low {
+    display: flex;
+    flex-direction: column;
   }
 
-  .icon.information {
-    background-color: var(--goa-callout-info-color-bg-statusbar);
+  .statusbar {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--goa-space-xs);
+    padding: var(--goa-callout-h-statusbar-padding); /* Default to high emphasis padding */
   }
 
-  .icon.information > * {
-    fill: var(--fill-color, var(--goa-callout-info-icon-color));
-    color: var(--fill-color, var(--goa-callout-info-icon-color));
+  /* Adjust text alignment to match icon baseline */
+  .statusbar .heading {
+    margin-top: -3px;
   }
-  .icon.important > * {
-    fill: var(--fill-color, var(--goa-callout-warning-icon-color));
-    color: var(--fill-color, var(--goa-callout-warning-icon-color));
+
+  .heading {
+    font: var(--goa-callout-heading-typography);
+    margin: 0;
   }
-  .icon.success > * {
-    fill: var(--fill-color, var(--goa-callout-success-icon-color));
-    color: var(--fill-color, var(--goa-callout-success-icon-color));
+
+  .content {
+    padding: var(--goa-callout-h-content-padding); /* Default to high emphasis padding */
   }
-  .icon.emergency > * {
-    fill: var(--fill-color, var(--goa-callout-emergency-icon-color));
-    color: var(--fill-color, var(--goa-callout-emergency-icon-color));
+
+  /* Low emphasis content: Reduced top padding */
+  .notification.emphasis-low .content {
+    padding: var(--goa-callout-l-content-padding) !important;
   }
-  .icon.event > * {
-    fill: var(--fill-color, var(--goa-callout-event-icon-color));
-    color: var(--fill-color, var(--goa-callout-event-icon-color));
+
+  /* Background colors for entire low emphasis callouts */
+  .notification.information.emphasis-low {
+    background-color: var(--goa-callout-info-color-bg-content-l);
   }
 
-  .icon.emergency {
-    background-color: var(--goa-color-emergency-default);
+  .notification.important.emphasis-low {
+    background-color: var(--goa-callout-important-color-bg-content-l);
   }
-  .icon.important {
-    background-color: var(--goa-callout-warning-color-bg-statusbar);
+
+  .notification.success.emphasis-low {
+    background-color: var(--goa-callout-success-color-bg-content-l);
   }
-  .icon.information {
-    background-color: var(--goa-color-info-default);
+
+  .notification.emergency.emphasis-low {
+    background-color: var(--goa-callout-emergency-color-bg-content-l);
   }
-  .icon.event {
-    background-color: var(--goa-color-info-default);
+
+  .notification.event.emphasis-low {
+    background-color: var(--goa-callout-info-color-bg-content-l);
   }
-  .icon.success {
-    background-color: var(--goa-callout-success-color-bg-statusbar);
+
+
+  /* Low emphasis without heading: Horizontal layout */
+  .low-no-heading-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 8px;
+    padding: var(--goa-callout-l-no-heading-padding);
   }
-  .icon.emergency {
-    background-color: var(--goa-callout-emergency-color-bg-statusbar);
+
+  /* Adjust content text alignment in no-heading layout */
+  .low-no-heading-container .content {
+    margin-top: -3px;
   }
 
-  .icon {
-    text-align: center;
-    padding: var(--goa-callout-l-statusbar-padding);
+  /* Remove padding from content inside no-heading container */
+  .notification.emphasis-low.no-heading .low-no-heading-container .content {
+    padding: 0 !important;
   }
 
-  .content.information {
-    background-color: var(--goa-callout-info-color-bg-content);
+  /* Background colors for low emphasis no-heading containers */
+  .notification.information.emphasis-low.no-heading .low-no-heading-container {
+    background-color: var(--goa-callout-info-color-bg-content-l);
   }
-  .content.important {
-    background-color: var(--goa-callout-warning-color-bg-content);
+
+  .notification.important.emphasis-low.no-heading .low-no-heading-container {
+    background-color: var(--goa-callout-important-color-bg-content-l);
   }
-  .content.success {
-    background-color: var(--goa-callout-success-color-bg-content);
+
+  .notification.success.emphasis-low.no-heading .low-no-heading-container {
+    background-color: var(--goa-callout-success-color-bg-content-l);
   }
-  .content.emergency {
-    background-color: var(--goa-callout-emergency-color-bg-content);
+
+  .notification.emergency.emphasis-low.no-heading .low-no-heading-container {
+    background-color: var(--goa-callout-emergency-color-bg-content-l);
   }
-  .content {
-    flex: 1 1 auto;
-    background-color: var(--goa-color-greyscale-100);
-    padding: var(--goa-callout-l-content-padding);
+
+  .notification.event.emphasis-low.no-heading .low-no-heading-container {
+    background-color: var(--goa-callout-info-color-bg-content-l);
   }
 
-  .notification.information {
-    border-color: var(--goa-callout-info-border-color);
+  /* Border colors by type and emphasis */
+  .notification.information.emphasis-high { border-color: var(--goa-callout-info-border-color-h); }
+  .notification.information.emphasis-medium { border-color: var(--goa-callout-info-border-color-m); }
+  .notification.information.emphasis-low { border-color: var(--goa-callout-info-border-color-l); }
+
+  .notification.important.emphasis-high { border-color: var(--goa-callout-important-border-color-h); }
+  .notification.important.emphasis-medium { border-color: var(--goa-callout-important-border-color-m); }
+  .notification.important.emphasis-low { border-color: var(--goa-callout-important-border-color-l); }
+
+  .notification.success.emphasis-high { border-color: var(--goa-callout-success-border-color-h); }
+  .notification.success.emphasis-medium { border-color: var(--goa-callout-success-border-color-m); }
+  .notification.success.emphasis-low { border-color: var(--goa-callout-success-border-color-l); }
+
+  .notification.emergency.emphasis-high { border-color: var(--goa-callout-emergency-border-color-h); }
+  .notification.emergency.emphasis-medium { border-color: var(--goa-callout-emergency-border-color-m); }
+  .notification.emergency.emphasis-low { border-color: var(--goa-callout-emergency-border-color-l); }
+
+  /* Statusbar background colors */
+  .statusbar.information.emphasis-high { background-color: var(--goa-callout-info-color-bg-statusbar-h); }
+  .statusbar.information.emphasis-medium { background-color: var(--goa-callout-info-color-bg-statusbar-m); }
+  .statusbar.information.emphasis-low { background-color: var(--goa-callout-info-color-bg-statusbar-l); }
+
+  .statusbar.important.emphasis-high { background-color: var(--goa-callout-important-color-bg-statusbar-h); }
+  .statusbar.important.emphasis-medium { background-color: var(--goa-callout-important-color-bg-statusbar-m); }
+  .statusbar.important.emphasis-low { background-color: var(--goa-callout-important-color-bg-statusbar-l); }
+
+  .statusbar.success.emphasis-high { background-color: var(--goa-callout-success-color-bg-statusbar-h); }
+  .statusbar.success.emphasis-medium { background-color: var(--goa-callout-success-color-bg-statusbar-m); }
+  .statusbar.success.emphasis-low { background-color: var(--goa-callout-success-color-bg-statusbar-l); }
+
+  .statusbar.emergency.emphasis-high { background-color: var(--goa-callout-emergency-color-bg-statusbar-h); }
+  .statusbar.emergency.emphasis-medium { background-color: var(--goa-callout-emergency-color-bg-statusbar-m); }
+  .statusbar.emergency.emphasis-low { background-color: var(--goa-callout-emergency-color-bg-statusbar-l); }
+
+  /* Content background colors */
+  .content.information.emphasis-high { background-color: var(--goa-callout-info-color-bg-content-h); }
+  .content.information.emphasis-medium { background-color: var(--goa-callout-info-color-bg-content-m); }
+  .content.information.emphasis-low { background-color: var(--goa-callout-info-color-bg-content-l); }
+
+  .content.important.emphasis-high { background-color: var(--goa-callout-important-color-bg-content-h); }
+  .content.important.emphasis-medium { background-color: var(--goa-callout-important-color-bg-content-m); }
+  .content.important.emphasis-low { background-color: var(--goa-callout-important-color-bg-content-l); }
+
+  .content.success.emphasis-high { background-color: var(--goa-callout-success-color-bg-content-h); }
+  .content.success.emphasis-medium { background-color: var(--goa-callout-success-color-bg-content-m); }
+  .content.success.emphasis-low { background-color: var(--goa-callout-success-color-bg-content-l); }
+
+  .content.emergency.emphasis-high { background-color: var(--goa-callout-emergency-color-bg-content-h); }
+  .content.emergency.emphasis-medium { background-color: var(--goa-callout-emergency-color-bg-content-m); }
+  .content.emergency.emphasis-low { background-color: var(--goa-callout-emergency-color-bg-content-l); }
+
+  /* Icon colors using proper design tokens */
+  .statusbar.information.emphasis-high > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-h);
+    color: var(--goa-callout-info-icon-color-h);
   }
-  .notification.important {
-    border-color: var(--goa-callout-warning-border-color);
+
+  .statusbar.success.emphasis-high > goa-icon {
+    --fill-color: var(--goa-callout-success-icon-color-h);
+    color: var(--goa-callout-success-icon-color-h);
   }
-  .notification.success {
-    border-color: var(--goa-callout-success-border-color);
+
+  .statusbar.emergency.emphasis-high > goa-icon {
+    --fill-color: var(--goa-callout-emergency-icon-color-h);
+    color: var(--goa-callout-emergency-icon-color-h);
   }
-  .notification.emergency {
-    border-color: var(--goa-callout-emergency-border-color);
+
+  .statusbar.important.emphasis-high > goa-icon {
+    --fill-color: var(--goa-callout-important-icon-color-h);
+    color: var(--goa-callout-important-icon-color-h);
   }
-  
-  /* Emphasis level styles */
-  .notification.emphasis-high {
-    border-width: var(--goa-callout-high-border-width, var(--goa-callout-l-border-width));
-    font: var(--goa-callout-high-text-size, var(--goa-callout-l-text-size));
+
+  /* Heading text colors for high emphasis */
+  .statusbar.information.emphasis-high .heading,
+  .statusbar.success.emphasis-high .heading,
+  .statusbar.emergency.emphasis-high .heading,
+  .statusbar.event.emphasis-high .heading {
+    color: var(--goa-color-text-light);
   }
-  
-  .notification.emphasis-medium {
-    border-width: var(--goa-callout-medium-border-width, var(--goa-callout-l-border-width));
-    font: var(--goa-callout-medium-text-size, var(--goa-callout-l-text-size));
+
+  /* Medium and low emphasis icons use proper design tokens */
+  .statusbar.information.emphasis-medium > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-m);
+    color: var(--goa-callout-info-icon-color-m);
   }
-  
-  .notification.emphasis-low {
-    border-width: var(--goa-callout-low-border-width, var(--goa-callout-l-border-width));
-    font: var(--goa-callout-low-text-size, var(--goa-callout-l-text-size));
-  }
-  
-  /* High emphasis styles */
-  .notification.emphasis-high .icon {
-    padding: var(--goa-callout-high-statusbar-padding, var(--goa-callout-l-statusbar-padding));
-  }
-  
-  .notification.emphasis-high .content {
-    padding: var(--goa-callout-high-content-padding, var(--goa-callout-l-content-padding));
-  }
-  
-  .notification.emphasis-high h3 {
-    font: var(--goa-callout-high-heading-size, var(--goa-callout-l-heading-size));
-    margin-bottom: var(--goa-callout-high-content-gap, var(--goa-callout-l-content-gap));
-  }
-  
-  /* Medium emphasis styles */
-  .notification.emphasis-medium .icon {
-    padding: var(--goa-callout-medium-statusbar-padding, var(--goa-callout-l-statusbar-padding));
-  }
-  
-  .notification.emphasis-medium .content {
-    padding: var(--goa-callout-medium-content-padding, var(--goa-callout-l-content-padding));
-  }
-  
-  .notification.emphasis-medium h3 {
-    font: var(--goa-callout-medium-heading-size, var(--goa-callout-l-heading-size));
-    margin-bottom: var(--goa-callout-medium-content-gap, var(--goa-callout-l-content-gap));
-  }
-  
-  /* Low emphasis styles */
-  .notification.emphasis-low .icon {
-    padding: var(--goa-callout-low-statusbar-padding, var(--goa-callout-l-statusbar-padding));
-  }
-  
-  .notification.emphasis-low .content {
-    padding: var(--goa-callout-low-content-padding, var(--goa-callout-l-content-padding));
+
+  .statusbar.information.emphasis-low > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-l);
+    color: var(--goa-callout-info-icon-color-l);
+  }
+
+  .statusbar.important.emphasis-medium > goa-icon {
+    --fill-color: var(--goa-callout-important-icon-color-m);
+    color: var(--goa-callout-important-icon-color-m);
+  }
+
+  .statusbar.important.emphasis-low > goa-icon {
+    --fill-color: var(--goa-callout-important-icon-color-l);
+    color: var(--goa-callout-important-icon-color-l);
+  }
+
+  .statusbar.success.emphasis-medium > goa-icon {
+    --fill-color: var(--goa-callout-success-icon-color-m);
+    color: var(--goa-callout-success-icon-color-m);
+  }
+
+  .statusbar.success.emphasis-low > goa-icon {
+    --fill-color: var(--goa-callout-success-icon-color-l);
+    color: var(--goa-callout-success-icon-color-l);
+  }
+
+  .statusbar.emergency.emphasis-medium > goa-icon {
+    --fill-color: var(--goa-callout-emergency-icon-color-m);
+    color: var(--goa-callout-emergency-icon-color-m);
   }
-  
-  .notification.emphasis-low h3 {
-    font: var(--goa-callout-low-heading-size, var(--goa-callout-l-heading-size));
-    margin-bottom: var(--goa-callout-low-content-gap, var(--goa-callout-l-content-gap));
+
+  .statusbar.emergency.emphasis-low > goa-icon {
+    --fill-color: var(--goa-callout-emergency-icon-color-l);
+    color: var(--goa-callout-emergency-icon-color-l);
+  }
+
+  /* Low emphasis no-heading icon styling - use proper design tokens */
+  .notification.information.emphasis-low.no-heading .low-no-heading-container > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-l);
+    color: var(--goa-callout-info-icon-color-l);
   }
-  
-  /* Low emphasis without heading adjustment */
-  .notification.emphasis-low.no-heading .content {
-    padding: var(--goa-callout-low-content-padding-no-heading, var(--goa-callout-low-content-padding, var(--goa-callout-l-content-padding)));
+
+  .notification.important.emphasis-low.no-heading .low-no-heading-container > goa-icon {
+    --fill-color: var(--goa-callout-important-icon-color-l);
+    color: var(--goa-callout-important-icon-color-l);
   }
-  
-  .notification.emphasis-low.no-heading .icon {
-    padding: var(--goa-callout-low-statusbar-padding-no-heading, var(--goa-callout-low-statusbar-padding, var(--goa-callout-l-statusbar-padding)));
+
+  .notification.success.emphasis-low.no-heading .low-no-heading-container > goa-icon {
+    --fill-color: var(--goa-callout-success-icon-color-l);
+    color: var(--goa-callout-success-icon-color-l);
   }
-  
-  /*Medium callout style*/
+
+  .notification.emergency.emphasis-low.no-heading .low-no-heading-container > goa-icon {
+    --fill-color: var(--goa-callout-emergency-icon-color-l);
+    color: var(--goa-callout-emergency-icon-color-l);
+  }
+
+  /* Event type (deprecated) - use same colors as information type */
+  .notification.event.emphasis-high { border-color: var(--goa-callout-info-border-color-h); }
+  .notification.event.emphasis-medium { border-color: var(--goa-callout-info-border-color-m); }
+  .notification.event.emphasis-low { border-color: var(--goa-callout-info-border-color-l); }
+
+  .statusbar.event.emphasis-high { background-color: var(--goa-callout-info-color-bg-statusbar-h); }
+  .statusbar.event.emphasis-medium { background-color: var(--goa-callout-info-color-bg-statusbar-m); }
+  .statusbar.event.emphasis-low { background-color: var(--goa-callout-info-color-bg-statusbar-l); }
+
+  .content.event.emphasis-high { background-color: var(--goa-callout-info-color-bg-content-h); }
+  .content.event.emphasis-medium { background-color: var(--goa-callout-info-color-bg-content-m); }
+  .content.event.emphasis-low { background-color: var(--goa-callout-info-color-bg-content-l); }
+
+  /* Event type icon colors - same as information type */
+  .statusbar.event.emphasis-high > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-h);
+    color: var(--goa-callout-info-icon-color-h);
+  }
+  .statusbar.event.emphasis-medium > goa-icon,
+  .statusbar.event.emphasis-low > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-m);
+    color: var(--goa-callout-info-icon-color-m);
+  }
+
+  /* Event type no-heading icon styling */
+  .notification.event.emphasis-low.no-heading .low-no-heading-container > goa-icon {
+    --fill-color: var(--goa-callout-info-icon-color-l);
+    color: var(--goa-callout-info-icon-color-l);
+  }
+
+  /*Medium size callout compatibility (deprecated size prop)*/
   .notification.medium {
     font: var(--goa-callout-m-text-size);
     border-width: var(--goa-callout-m-border-width);
   }
-  h3.medium {
-    font: var(--goa-callout-m-heading-size);
-    margin-bottom: var(--goa-callout-m-content-gap);
-  }
   .notification.medium .content {
     padding: var(--goa-callout-m-content-padding);
-    margin-top: calc(-1 * var(--goa-space-3xs));
   }
-  .notification.medium .icon {
+  .notification.medium .statusbar {
     padding: var(--goa-callout-m-statusbar-padding);
   }
+  .notification.medium .heading {
+    font: var(--goa-callout-m-heading-size);
+  }
+
+  /* Mobile viewport specific adjustments (max-width: 623px) */
+  @media (max-width: 623px) {
+    /* Borders should show on mobile - same as large viewport */
+    .notification {
+      border: var(--goa-border-width-s) solid !important;
+    }
+
+    /* Border colors for mobile - use proper design tokens */
+    .notification.information.emphasis-high { border-color: var(--goa-callout-info-border-color-h) !important; }
+    .notification.information.emphasis-medium { border-color: var(--goa-callout-info-border-color-m) !important; }
+    .notification.information.emphasis-low { border-color: var(--goa-callout-info-border-color-l) !important; }
+
+    .notification.important.emphasis-high { border-color: var(--goa-callout-important-border-color-h) !important; }
+    .notification.important.emphasis-medium { border-color: var(--goa-callout-important-border-color-m) !important; }
+    .notification.important.emphasis-low { border-color: var(--goa-callout-important-border-color-l) !important; }
+
+    .notification.success.emphasis-high { border-color: var(--goa-callout-success-border-color-h) !important; }
+    .notification.success.emphasis-medium { border-color: var(--goa-callout-success-border-color-m) !important; }
+    .notification.success.emphasis-low { border-color: var(--goa-callout-success-border-color-l) !important; }
+
+    .notification.emergency.emphasis-high { border-color: var(--goa-callout-emergency-border-color-h) !important; }
+    .notification.emergency.emphasis-medium { border-color: var(--goa-callout-emergency-border-color-m) !important; }
+    .notification.emergency.emphasis-low { border-color: var(--goa-callout-emergency-border-color-l) !important; }
+
+    .notification.event.emphasis-high { border-color: var(--goa-callout-info-border-color-h) !important; }
+    .notification.event.emphasis-medium { border-color: var(--goa-callout-info-border-color-m) !important; }
+    .notification.event.emphasis-low { border-color: var(--goa-callout-info-border-color-l) !important; }
+
+    /* Use mobile-specific design tokens for padding */
+    .statusbar {
+      padding: var(--goa-callout-h-statusbar-padding-mobile) !important;
+    }
+
+    /* Content padding using mobile-specific tokens */
+    .notification.emphasis-high .content {
+      padding: var(--goa-callout-h-content-padding-mobile) !important;
+    }
+
+    .notification.emphasis-medium .content {
+      padding: var(--goa-callout-m-content-padding-mobile) !important;
+    }
+
+    .notification.emphasis-low .content {
+      padding: var(--goa-callout-l-content-padding-mobile) !important;
+    }
+
+    /* Mobile no-heading layout adjustments */
+    .notification.emphasis-low.no-heading .low-no-heading-container {
+      padding: var(--goa-callout-l-no-heading-padding-mobile) !important;
+    }
+  }
 </style>