diff --git a/cypress/apps/nuxt-app/app.vue b/cypress/apps/nuxt-app/app.vue
index 6bef60bd5..e6b9c075d 100644
--- a/cypress/apps/nuxt-app/app.vue
+++ b/cypress/apps/nuxt-app/app.vue
@@ -4,7 +4,7 @@
 <template>
   <div>
    <!-- <Masthead></Masthead>
-    <Mainnav></Mainnav>
+  
     <Subnav></Subnav>
     <Drawer></Drawer>
     <Button></Button>
@@ -15,6 +15,8 @@
     <Select></Select>
     <Combobox></Combobox>
     <Skeleton></Skeleton>
+      <!-- <Mainnav></Mainnav> -->
+    <SystemBanner></SystemBanner>
     <!-- <Card></Card>
     <Table></Table>
     <DescriptionList></DescriptionList> -->
diff --git a/cypress/apps/nuxt-app/components/SystemBanner.vue b/cypress/apps/nuxt-app/components/SystemBanner.vue
new file mode 100644
index 000000000..d3879b79a
--- /dev/null
+++ b/cypress/apps/nuxt-app/components/SystemBanner.vue
@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import "@govtechsg/sgds-web-component/components/SystemBanner/index.js"
+import "@govtechsg/sgds-web-component/components/Link/index.js"
+import "@govtechsg/sgds-web-component/components/Button/index.js"
+</script>
+
+<template>
+<sgds-system-banner show="">
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus.
+    </div>
+    <sgds-link size="sm" variant="light" slot="action"><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a></sgds-link>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+    <sgds-button href="#" slot="action" size="sm" tone="fixed-light" variant="outline">
+      Action button
+      <sgds-icon name="arrow-right" slot="rightIcon" size="md"></sgds-icon>
+    </sgds-button>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+    <sgds-link size="sm" variant="light" slot="action"><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+</template>
diff --git a/playground/SystemBanner.html b/playground/SystemBanner.html
new file mode 100644
index 000000000..fa4eb43d4
--- /dev/null
+++ b/playground/SystemBanner.html
@@ -0,0 +1,301 @@
+<script type="module" src="../src/index.ts"></script>
+<link href="../src/themes/day.css" rel="stylesheet" type="text/css" />
+<link href="../src/themes/night.css" rel="stylesheet" type="text/css" />
+<link href="../src/css/sgds.css" rel="stylesheet" type="text/css" />
+
+<h3> long message only</h3>
+<sgds-system-banner show>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with close button</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with close button and icon only</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+      <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with close button , action link and icon</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with action link and icon only </h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with action link, icon and pagination </h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with pagination only</h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with pagination and close button</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+
+
+
+<h3> short message only</h3>
+<sgds-system-banner show>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> short message with close button</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> short message with close button and icon only</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+      <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> short message with close button , action link and icon</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> short message with action link and icon only </h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<h3> short message with action link, icon and pagination </h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. 
+    </div>
+     <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> short message with pagination only</h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. 
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> long message with pagination and close button</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3>  short message mix with pagination only</h3>
+<sgds-system-banner show >
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus. 
+    </div>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+<h3> mix long and short message with pagination, action link and  close button</h3>
+<sgds-system-banner show dismissible>
+  <sgds-system-banner-item>
+    <div>
+     1 Etiam suscipit nisi eget porta cursus.
+    </div>
+    <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+       1 Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus  Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+      <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"  size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>
+<br/>
+
+<div class="another-container">another container</div>
+<script>
+    const banner = document.querySelector('sgds-system-banner');
+    banner.addEventListener("sgds-hide", () => {
+        console.log("Banner is hidden");
+        const anotherContainer = document.querySelector('.another-container');
+        anotherContainer.classList.add('no-banner');
+    })
+</script>
diff --git a/scripts/generateStories.mjs b/scripts/generateStories.mjs
index 1c5158066..27d5000d3 100644
--- a/scripts/generateStories.mjs
+++ b/scripts/generateStories.mjs
@@ -50,7 +50,7 @@ for (const [key, value] of Object.entries(groupedComponents)) {
 
   // Only add in the ArgType table when there is at least one attribute
   const ArgsType = value.map(component =>
-    component.attributes
+    component.attributes || component.slots || component.events
       ? `### ${component.tagName}
 <ArgTypes of="${component.tagName}"/>\n
   `
diff --git a/src/base/button.css b/src/base/button.css
index e04573ef5..4c8b0f242 100644
--- a/src/base/button.css
+++ b/src/base/button.css
@@ -129,7 +129,7 @@
   height: var(--sgds-dimension-40);
 }
 :host([size="xs"]) .btn {
-  font-size: var(--sgds-font-size-1);
+  font-size: var(--sgds-font-size-0);
   line-height: var(--sgds-line-height-16);
   padding: var(--sgds-padding-none) var(--sgds-padding-sm);
   min-width: var(--sgds-dimension-64);
diff --git a/src/components/SystemBanner/index.ts b/src/components/SystemBanner/index.ts
new file mode 100644
index 000000000..1485e54f1
--- /dev/null
+++ b/src/components/SystemBanner/index.ts
@@ -0,0 +1,11 @@
+import { SgdsSystemBanner } from "./sgds-system-banner";
+import SgdsSystemBannerItem from "./sgds-system-banner-item";
+
+customElements.define("sgds-system-banner", SgdsSystemBanner);
+customElements.define("sgds-system-banner-item", SgdsSystemBannerItem);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sgds-system-banner": SgdsSystemBanner;
+  }
+}
diff --git a/src/components/SystemBanner/sgds-system-banner-item.ts b/src/components/SystemBanner/sgds-system-banner-item.ts
new file mode 100644
index 000000000..ff7a5c586
--- /dev/null
+++ b/src/components/SystemBanner/sgds-system-banner-item.ts
@@ -0,0 +1,85 @@
+import { html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import SgdsElement from "../../base/sgds-element";
+import alertBannerItemStyles from "./system-banner-item.css";
+import { HasSlotController } from "../../utils/slot";
+import { SystemBannerChildCountContext } from "./system-banner-context";
+import { consume } from "@lit/context";
+
+/**
+ * @slot icon - The slot to pass in an icon element.
+ * @slot action - The slot to pass in an action element such as a button or link
+ * @slot default - The slot to pass in the message content of the banner item. Text will be clamped at 2 lines in desktop view and 5 lines in mobile view
+ *
+ * @event sgds-show-more - The event emitted when user clicks on "show more" in the banner text message
+ */
+export class SgdsSystemBannerItem extends SgdsElement {
+  static styles = [...SgdsElement.styles, alertBannerItemStyles];
+  /** Used only for SSR to indicate the presence of the `action` slot. */
+  @property({ type: Boolean }) hasActionSlot = false;
+
+  @state() private clamped = false;
+
+  @consume({ context: SystemBannerChildCountContext, subscribe: true })
+  @state()
+  private siblingsCount = 0;
+
+  private readonly hasSlotController = new HasSlotController(this, "action");
+
+  private _resizeObserver: ResizeObserver;
+  async firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    await this.updateComplete;
+    this._clampCheck();
+
+    // Watch resizing for dynamic layout changes
+    this._resizeObserver = new ResizeObserver(() => this._clampCheck());
+    this._resizeObserver.observe(this.shadowRoot.querySelector(".message"));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) this._resizeObserver.disconnect();
+  }
+  updated() {
+    if (!this.hasActionSlot) this.hasActionSlot = this.hasSlotController.test("action");
+  }
+  private _clampCheck() {
+    const textEl = this.shadowRoot.querySelector(".message");
+    requestAnimationFrame(() => {
+      this.clamped = textEl.scrollHeight > textEl.clientHeight;
+    });
+  }
+
+  private _handleShowMoreClick() {
+    this.emit("sgds-show-more");
+  }
+  render() {
+    return html`
+      <div class="banner-item">
+        <slot name="icon"></slot>
+        <div class="banner-item__message_and__action">
+          <div class="clamped-container">
+            <div class=${classMap({ message: true, truncated: this.clamped })}>
+              <slot></slot>
+            </div>
+            ${this.clamped
+              ? html`<span class="show-more"
+                  >...<a class="show-more__link" @click="${this._handleShowMoreClick}">show more</a></span
+                >`
+              : nothing}
+          </div>
+          ${this.hasActionSlot || this.siblingsCount > 1
+            ? html`
+                <div class="action">
+                  <slot name="action"></slot>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+export default SgdsSystemBannerItem;
diff --git a/src/components/SystemBanner/sgds-system-banner.ts b/src/components/SystemBanner/sgds-system-banner.ts
new file mode 100644
index 000000000..e21104713
--- /dev/null
+++ b/src/components/SystemBanner/sgds-system-banner.ts
@@ -0,0 +1,216 @@
+import { html, nothing, PropertyValueMap } from "lit";
+import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import SgdsElement from "../../base/sgds-element";
+import SgdsCloseButton from "../../internals/CloseButton/sgds-close-button";
+import { animateTo } from "../../utils/animate";
+import { getAnimation, setDefaultAnimation } from "../../utils/animation-registry";
+import { watch } from "../../utils/watch";
+import SgdsIcon from "../Icon/sgds-icon";
+import SgdsIconButton from "../IconButton/sgds-icon-button";
+import alertBannerStyles from "./system-banner.css";
+import SgdsSystemBannerItem from "./sgds-system-banner-item";
+import { SystemBannerChildCountContext } from "./system-banner-context";
+import { provide } from "@lit/context";
+
+/**
+ * @summary The system banner component for displaying important messages to users at the application level.
+ * Each banner can contain up to 5 banner items that cycle automatically every 5 seconds. Pagination appears when there are multiple items, allowing users to navigate between them. The banner can also be made dismissible with a close button.
+ * `sgds-system-banner-item` is the subcomponent for `sgds-system-banner`. Each banner item represents a message in the system banner.
+ *
+ * @slot default - The slot to pass in `sgds-system-banner-item`
+ *
+ * @event sgds-show - Emitted when the banner has start to appear on screen
+ * @event sgds-hide - Emitted when the banner is disappearing from the screen
+ */
+export class SgdsSystemBanner extends SgdsElement {
+  static styles = [...SgdsElement.styles, alertBannerStyles];
+  /**@internal */
+  static dependencies = {
+    "sgds-close-button": SgdsCloseButton,
+    "sgds-icon": SgdsIcon,
+    "sgds-icon-button": SgdsIconButton
+  };
+  /** Controls the appearance of the alert  */
+  @property({ type: Boolean, reflect: true }) show = false;
+
+  /** Enables a close button that allows the user to dismiss the alert. */
+  @property({ type: Boolean, reflect: true }) dismissible = false;
+
+  /** Closes the alert  */
+  public close() {
+    this.show = false;
+  }
+  @queryAssignedElements({ flatten: true })
+  private bannerItem: SgdsSystemBannerItem[];
+
+  @query(".banner")
+  private banner: HTMLDivElement;
+
+  @provide({ context: SystemBannerChildCountContext })
+  @state()
+  private childCount: number;
+
+  @state() private _intervalId = null;
+
+  private _intervalTime = 5000;
+
+  @state() private _currentIndex = 0;
+
+  protected firstUpdated(changedProperties: PropertyValueMap<this>): void {
+    super.firstUpdated(changedProperties);
+    this.childCount = this.bannerItem.length;
+    if (!this.show) {
+      this.banner.classList.add("d-none");
+    } else {
+      this.childCount > 1 && this._startAutoCycle();
+      this.addEventListener("mouseenter", this._pauseAutoCycle.bind(this));
+      this.addEventListener("mouseleave", this._resumeAutoCycle.bind(this));
+
+      this.addEventListener("focus", this._pauseAutoCycle.bind(this));
+      this.addEventListener("blur", this._resumeAutoCycle.bind(this));
+    }
+    this._updateActiveItem();
+
+    if (this.childCount > 5) {
+      console.warn("It is not recommended to have more than 5 <sgds-system-banner-item> elements.");
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopAutoCycle();
+  }
+
+  /**@internal */
+  @watch("show", { waitUntilFirstUpdate: true })
+  async _handleShowChange() {
+    if (this.show) {
+      this.childCount > 1 && this._startAutoCycle();
+      this.emit("sgds-show");
+      this.banner.classList.remove("d-none");
+    } else {
+      this._stopAutoCycle();
+      this.emit("sgds-hide");
+      this.banner.classList.add("d-none");
+    }
+  }
+
+  private _updateActiveItem() {
+    const items = this.bannerItem;
+    items.forEach((item, i) => {
+      if (i === this._currentIndex) {
+        item.setAttribute("active", "");
+      } else {
+        item.removeAttribute("active");
+      }
+    });
+  }
+  private _next() {
+    const items = this.bannerItem;
+    this._currentIndex = (this._currentIndex + 1) % items.length;
+    this._updateActiveItem();
+    this._animateItem(items[this._currentIndex], "next");
+    this._resetAutoCycle();
+  }
+
+  private _prev() {
+    const items = this.bannerItem;
+    this._currentIndex = (this._currentIndex - 1 + items.length) % items.length;
+    this._updateActiveItem();
+    this._animateItem(items[this._currentIndex], "prev");
+    this._resetAutoCycle();
+  }
+  private async _animateItem(item: SgdsSystemBannerItem, direction: "next" | "prev") {
+    // Cancel any existing animations before starting a new one
+    item.getAnimations().forEach(a => a.cancel());
+    // Start the slide-down animation
+    const bannerLoopMessage = getAnimation(this, `banner.item.${direction}`);
+    await animateTo(item, bannerLoopMessage.keyframes, bannerLoopMessage.options);
+  }
+  private _startAutoCycle() {
+    this._stopAutoCycle(); // avoid duplicates
+    this._intervalId = setInterval(() => this._next(), this._intervalTime);
+  }
+
+  private _stopAutoCycle() {
+    if (this._intervalId) {
+      clearInterval(this._intervalId);
+      this._intervalId = null;
+    }
+  }
+  private _resetAutoCycle() {
+    this._stopAutoCycle();
+    this._startAutoCycle();
+  }
+  private _pauseAutoCycle(): void {
+    this._stopAutoCycle();
+  }
+
+  private _resumeAutoCycle(): void {
+    if (this.show && this.childCount > 1) {
+      this._startAutoCycle();
+    }
+  }
+  render() {
+    return html`
+      <div
+        class="${classMap({
+          banner: true
+        })}"
+        role="alert"
+        aria-hidden=${this.show ? "false" : "true"}
+      >
+        <div class="content">
+          <slot id="loop-slot"></slot>
+        </div>
+        ${this.childCount > 1
+          ? html` <div class="pagination">
+              <sgds-icon-button
+                name="chevron-left"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                @click=${this._prev}
+              ></sgds-icon-button>
+              <span>${this._currentIndex + 1}/${this.childCount}</span>
+              <sgds-icon-button
+                name="chevron-right"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                @click=${this._next}
+              ></sgds-icon-button>
+            </div>`
+          : nothing}
+        ${this.dismissible
+          ? html`
+              <sgds-close-button aria-label="close the alert" @click=${this.close} variant="light"></sgds-close-button>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+export default SgdsSystemBanner;
+
+setDefaultAnimation("banner.item.next", {
+  keyframes: [
+    { opacity: 0, transform: "translateY(-100%)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  options: {
+    duration: 500,
+    easing: "cubic-bezier(0.45,0.05,0.55,0.95)"
+  }
+});
+setDefaultAnimation("banner.item.prev", {
+  keyframes: [
+    { opacity: 0, transform: "translateY(100%)" },
+    { opacity: 1, transform: "translateY(0)" }
+  ],
+  options: {
+    duration: 500,
+    easing: "cubic-bezier(0.45,0.05,0.55,0.95)"
+  }
+});
diff --git a/src/components/SystemBanner/system-banner-context.ts b/src/components/SystemBanner/system-banner-context.ts
new file mode 100644
index 000000000..820faa2f0
--- /dev/null
+++ b/src/components/SystemBanner/system-banner-context.ts
@@ -0,0 +1,3 @@
+import { createContext } from "@lit/context";
+
+export const SystemBannerChildCountContext = createContext<boolean>("system-banner-children-count-context");
diff --git a/src/components/SystemBanner/system-banner-item.css b/src/components/SystemBanner/system-banner-item.css
new file mode 100644
index 000000000..5b59d7018
--- /dev/null
+++ b/src/components/SystemBanner/system-banner-item.css
@@ -0,0 +1,100 @@
+:host {
+  display: block;
+  width: inherit;
+  font-size: var(--sgds-font-size-1, 14px);
+  font-style: normal;
+  font-weight: var(--sgds-font-weight-regular, 400);
+  line-height: var(--sgds-line-height-20, 20px); /* 142.857% */
+  letter-spacing: var(--sgds-letter-spacing-normal, 0);
+}
+
+.banner-item {
+  display: flex;
+  gap: var(--sgds-gap-sm);
+  color: var(--sgds-color-fixed-light);
+  padding: var(--sgds-padding-2-xs) 0;
+}
+
+.message {
+  display: -webkit-box;
+  line-clamp: 5;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  word-break: break-all;
+  max-height: calc(5 * var(--sgds-line-height-20, 20px)); /* 5 lines */
+}
+
+.message.truncated::after {
+  content: "";
+  text-align: right;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10ch;
+  height: var(--sgds-line-height-20, 20px);
+  background-color: var(--sgds-surface-fixed-dark);
+}
+
+.clamped-container {
+  position: relative;
+  display: inline-block;
+  max-width: var(--sgds-dimension-872);
+}
+
+.show-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  white-space: nowrap;
+}
+
+.show-more__link {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.action {
+  display: flex;
+  gap: var(--sgds-gap-2-xs, 4px);
+  align-items: center;
+  margin-top: 6px;
+  white-space: nowrap;
+  /** even if no action is slotted, the container needs a height in mobile **/
+  min-height: var(--sgds-line-height-20);
+}
+slot[name="action"]::slotted(a) {
+  text-decoration: none !important;
+  color: var(--sgds-color-fixed-light) !important;
+  font-size: var(--sgds-font-size-1, 14px) !important;
+}
+
+.banner-item__message_and__action {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sgds-gap-xs);
+  flex: 1 0 0;
+  /* padding-right prevents overlap of long message with close button */
+  padding-right: var(--sgds-padding-2-xl);
+
+}
+/* DESKTOP */
+@media (min-width: 512px) {
+  .banner-item__message_and__action {
+    flex-direction: row;
+    gap: calc(var(--sgds-gap-sm) + var(--sgds-padding-2-xl));
+    padding-right: unset;
+  }
+  .action {
+    margin-top: 0;
+    margin-left: auto;
+  }
+  .message {
+    display: -webkit-box;
+    line-clamp: 2;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    word-break: break-all;
+    max-height: calc(2 * var(--sgds-line-height-20, 20px)); /* 3 lines */
+  }
+}
diff --git a/src/components/SystemBanner/system-banner.css b/src/components/SystemBanner/system-banner.css
new file mode 100644
index 000000000..1c447432b
--- /dev/null
+++ b/src/components/SystemBanner/system-banner.css
@@ -0,0 +1,58 @@
+.banner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--sgds-gap-xl);
+  background-color: var(--sgds-surface-fixed-dark);
+  min-height: var(--sgds-dimension-64);
+  color: var(--sgds-color-fixed-light);
+  padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl);
+  position: relative;
+}
+.content {
+  flex: 1;
+  overflow: hidden;
+  width: 100%;
+}
+
+::slotted(sgds-system-banner-item) {
+  display: none;
+  opacity: 0;
+  flex: 0 0 100%;
+}
+
+::slotted(sgds-system-banner-item[active]) {
+  display: block;
+  opacity: 1;
+}
+
+.pagination {
+  display: flex;
+  gap: var(--sgds-gap-2-xs);
+  font-size: var(--sgds-font-size-0);
+  align-items: center;
+  font-weight: var(--sgds-font-weight-regular, 400);
+  line-height: var(--sgds-line-height-16, 16px); /* 133.333% */
+  letter-spacing: var(--sgds-letter-spacing-normal, 0);
+  position: absolute;
+  bottom: 12px;
+  right: 20px;
+}
+
+.d-none {
+  display: none;
+}
+sgds-close-button {
+  position: absolute;
+  right: 20px;
+  top: 10px;
+}
+
+@media (min-width: 512px) {
+  sgds-close-button {
+    position: static;
+  }
+  .pagination {
+    position: static;
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index c51db65c4..60fec27ea 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -50,6 +50,7 @@ export * from "./Stepper/sgds-stepper";
 export * from "./Subnav/sgds-subnav";
 export * from "./Subnav/sgds-subnav-item";
 export * from "./Switch/sgds-switch";
+export * from "./SystemBanner/sgds-system-banner";
 export * from "./Tab/sgds-tab";
 export * from "./Tab/sgds-tab-group";
 export * from "./Tab/sgds-tab-panel";
diff --git a/src/index.ts b/src/index.ts
index 3c97af662..56c753b3f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,8 +29,9 @@ import "./components/Radio";
 import "./components/Sidenav";
 import "./components/Skeleton";
 import "./components/Spinner";
-import "./components/Switch";
 import "./components/Stepper";
+import "./components/Switch";
+import "./components/SystemBanner";
 import "./components/Tab";
 import "./components/Table";
 import "./components/Textarea";
diff --git a/stories/templates/Link/additional.stories.js b/stories/templates/Link/additional.stories.js
index e03fe5a57..8b4bb35bf 100644
--- a/stories/templates/Link/additional.stories.js
+++ b/stories/templates/Link/additional.stories.js
@@ -1,10 +1,22 @@
 import { html } from "lit-html";
 import { ifDefined } from "lit/directives/if-defined.js";
 
+const VariantTemplate = () => {
+  const variants = ["Primary", "Danger", "Neutral", "Light", "Dark"];
+  return html`
+    ${variants.map(
+      variant => html`
+        <sgds-link variant="${variant}">
+          <a href="#">${variant} link</a>
+        </sgds-link>
+      `
+    )}
+  `;
+};
 export const Variants = {
-  render: Template.bind({}),
+  render: VariantTemplate.bind({}),
   name: "Variant",
-  args: { ...args, variant: "danger" },
+  args: { ...args },
   parameters: {},
   tags: ["!dev"]
 };
diff --git a/stories/templates/SystemBanner/additional.mdx b/stories/templates/SystemBanner/additional.mdx
new file mode 100644
index 000000000..097f89ce2
--- /dev/null
+++ b/stories/templates/SystemBanner/additional.mdx
@@ -0,0 +1,23 @@
+## Dismissible
+
+The dismissible prop adds a close button to the system banner to allow the component to be removed from the DOM when no longer needed.
+When the close button is clicked, it updates the `show` state of the system banner to false.
+
+<Canvas of={SystemBannerStories.Dismissible}>
+  <Story of={SystemBannerStories.Dismissible} />
+</Canvas>
+
+## Two-line clamped and show more
+
+The two-line clamped feature limits the content of the system banner to two lines to achieve a consistency in the banner's height. It is a responsive feature that ensures the banner looks good on all screen sizes.
+If the content exceeds two lines, it will be truncated with an ellipsis and a show more link appears.
+
+When the show more link is clicked, it emits a custom event called `sgds-show-more`
+You can hook onto the click event of the show more link to perform your side effect action. It could be an opening of a modal
+or a redirect to another page.
+
+In this example, the show more link opens a modal with the full message about the banner content.
+
+<Canvas of={SystemBannerStories.ShowMore}>
+  <Story of={SystemBannerStories.ShowMore} />
+</Canvas>
diff --git a/stories/templates/SystemBanner/additional.stories.js b/stories/templates/SystemBanner/additional.stories.js
new file mode 100644
index 000000000..686138502
--- /dev/null
+++ b/stories/templates/SystemBanner/additional.stories.js
@@ -0,0 +1,54 @@
+import { html } from "lit-html";
+
+const ShowMoreHookTemplate = args => {
+  return html`
+    <sgds-system-banner show id="system-banner__show-more-example" dismissible>
+      <sgds-system-banner-item>
+        <div>
+          <strong>Etiam suscipit nisi eget porta cursus.</strong> Ut sit amet felis aliquet, pellentesque mi at,
+          vulputate nunc. Vivamus ac facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula
+          arcu. Aenean quis leo gravida, congue sapien eu, rhoncus ac libero scelerisque tellus maximus accumsan a
+          vehicula arcu. Aenean quis leo gravida, congue sapien eu, rhoncus
+        </div>
+        <sgds-link size="sm" variant="light" slot="action"
+          ><a href="#">Action link<sgds-icon name="arrow-right"></sgds-icon></a
+        ></sgds-link>
+      </sgds-system-banner-item>
+    </sgds-system-banner>
+    <sgds-modal>
+      <div>
+        <strong>Etiam suscipit nisi eget porta cursus.</strong> Ut sit amet felis aliquet, pellentesque mi at, vulputate
+        nunc. Vivamus ac facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu.
+        Aenean quis leo gravida, congue sapien eu, rhoncus ac libero scelerisque tellus maximus accumsan a vehicula
+        arcu. Aenean quis leo gravida, congue sapien eu, rhoncus
+      </div>
+    </sgds-modal>
+
+    <script>
+      const banner = document.querySelector("#system-banner__show-more-example");
+      const modal = document.querySelector("sgds-modal");
+      banner.addEventListener("sgds-show-more", () => {
+        modal.show();
+      });
+    </script>
+  `;
+};
+
+export const Dismissible = {
+  render: Template.bind({}),
+  name: "Dismissible",
+  args: {
+    dismissible: true,
+    show: true
+  },
+  parameters: {},
+  tags: ["!dev"]
+};
+
+export const ShowMore = {
+  render: ShowMoreHookTemplate.bind({}),
+  name: "Show More",
+  args: {},
+  parameters: {},
+  tags: ["!dev"]
+};
diff --git a/stories/templates/SystemBanner/basic.js b/stories/templates/SystemBanner/basic.js
new file mode 100644
index 000000000..9e3ad955d
--- /dev/null
+++ b/stories/templates/SystemBanner/basic.js
@@ -0,0 +1,44 @@
+import { html } from "lit-html";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+export const Template = args => html`<sgds-system-banner ?dismissible=${args.dismissible} ?show=${args.show}>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus.
+    </div>
+    <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+    <sgds-button href="#" slot="action" size="sm" tone="fixed-light" variant="outline">
+      Action button
+      <sgds-icon name="arrow-right" slot="rightIcon" size="md"></sgds-icon>
+    </sgds-button>
+  </sgds-system-banner-item>
+  <sgds-system-banner-item>
+    <sgds-icon slot="icon" name="placeholder" size="md"></sgds-icon>
+    <div>
+      Etiam suscipit nisi eget porta cursus. Ut sit amet felis aliquet, pellentesque mi at, vulputate nunc. Vivamus ac
+      facilisis tellus. Maecenas ac libero scelerisque tellus maximus accumsan a vehicula arcu. Aenean quis leo gravida,
+      congue sapien eu, rhoncus
+    </div>
+    <sgds-link size="sm" variant="light" slot="action"
+      ><a href="#">Action link<sgds-icon name="arrow-right" size="md"></sgds-icon></a
+    ></sgds-link>
+  </sgds-system-banner-item>
+</sgds-system-banner>`;
+
+export const args = {
+  show: true
+};
+
+export const parameters = {};
diff --git a/test/system-banner.test.ts b/test/system-banner.test.ts
new file mode 100644
index 000000000..83abf2d58
--- /dev/null
+++ b/test/system-banner.test.ts
@@ -0,0 +1,267 @@
+import { html } from "lit";
+import { assert, expect, fixture } from "@open-wc/testing";
+import { SgdsIconButton, SgdsSystemBanner } from "../src/components";
+import "../src/index";
+import * as sinon from "sinon";
+import { moveMouseOnElement, moveMouseOutOfElement } from "./utils";
+import SgdsSystemBannerItem from "../src/components/SystemBanner/sgds-system-banner-item";
+describe("<sgds-system-banner>", () => {
+  it("matches the shadowDOM", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show></sgds-system-banner>`);
+    assert.shadowDom.equal(
+      el,
+      `
+                <div class="banner" role="alert" aria-hidden="false">
+                <div class="content">
+                    <slot id="loop-slot"></slot>
+                </div>
+                </div>
+            `
+    );
+  });
+  it("if show is false, .banner is display none, aria-hidden is true", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner></sgds-system-banner>`);
+    const bannerDiv = el.shadowRoot?.querySelector(".banner") as HTMLDivElement;
+    expect(getComputedStyle(bannerDiv).display).to.equal("none");
+    expect(bannerDiv.getAttribute("aria-hidden")).to.equal("true");
+  });
+
+  it("when dimissible is true, close button is rendered", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show dismissible></sgds-system-banner>`);
+    const closeButton = el.shadowRoot?.querySelector("sgds-close-button[variant='light']");
+    expect(closeButton).to.exist;
+  });
+  it("when more than one child, pagination is rendered, matches shadowDOM", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item></sgds-system-banner-item>
+      <sgds-system-banner-item></sgds-system-banner-item>
+    </sgds-system-banner>`);
+    assert.shadowDom.equal(
+      el,
+      `
+                <div class="banner" role="alert" aria-hidden="false">
+                <div class="content">
+                    <slot id="loop-slot"></slot>
+                </div>
+                <div class="pagination">
+              <sgds-icon-button
+                name="chevron-left"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                target="_self"
+              ></sgds-icon-button>
+              <span>1/2</span>
+              <sgds-icon-button
+                name="chevron-right"
+                tone="fixed-light"
+                variant="ghost"
+                size="xs"
+                target="_self"
+              ></sgds-icon-button>
+            </div>
+                </div>
+            `
+    );
+  });
+  it("system banner item rotates automatically every 5 seconds", async () => {
+    const clock = sinon.useFakeTimers();
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "two"
+    );
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "three"
+    );
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    clock.restore();
+  });
+  it("mouse enter the banner, pauses the interval", async () => {
+    const clock = sinon.useFakeTimers();
+    const mouseEnterHandler = sinon.spy();
+    const mouseLeaveHandler = sinon.spy();
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    el.addEventListener("mouseenter", mouseEnterHandler);
+    el.addEventListener("mouseleave", mouseLeaveHandler);
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    await moveMouseOnElement(el);
+    expect(mouseEnterHandler).to.have.been.called;
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    //mouseleaves clock ticks rotation resumes
+    await moveMouseOutOfElement(el);
+    expect(mouseLeaveHandler).to.have.been.called;
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "two"
+    );
+    clock.restore();
+  });
+  it("keyboard focuses the elements , pauses the interval", async () => {
+    const clock = sinon.useFakeTimers();
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    const paginationButton = el.shadowRoot?.querySelector("sgds-icon-button[name='chevron-right']") as SgdsIconButton;
+    paginationButton.focus();
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    //mouseleaves clock ticks rotation resumes
+    paginationButton.blur();
+    clock.tick(5000);
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "two"
+    );
+    clock.restore();
+  });
+  it("clicking next button loops the items and page indicator", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    const nextBtn = el.shadowRoot?.querySelector("sgds-icon-button[name='chevron-right']") as SgdsIconButton;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("1/3");
+    nextBtn.click();
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "two"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("2/3");
+
+    nextBtn.click();
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "three"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("3/3");
+
+    nextBtn.click();
+
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("1/3");
+  });
+  it("clicking prev button loops the items and page indicator", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    const prevBtn = el.shadowRoot?.querySelector("sgds-icon-button[name='chevron-left']") as SgdsIconButton;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("1/3");
+    prevBtn.click();
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "three"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("3/3");
+
+    prevBtn.click();
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "two"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("2/3");
+
+    prevBtn.click();
+
+    await el.updateComplete;
+    expect(el.querySelector<SgdsSystemBannerItem>("sgds-system-banner-item[active]")?.textContent.trim()).to.equal(
+      "one"
+    );
+    expect(el.shadowRoot?.querySelector("span")?.textContent.trim()).to.equal("1/3");
+  });
+
+  it("more than 5 items trigger console warning", async () => {
+    const consoleWarnStub = sinon.stub(console, "warn");
+
+    await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+      <sgds-system-banner-item>four</sgds-system-banner-item>
+      <sgds-system-banner-item>five</sgds-system-banner-item>
+      <sgds-system-banner-item>six</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    expect(consoleWarnStub).to.have.been.calledWith(
+      "It is not recommended to have more than 5 <sgds-system-banner-item> elements."
+    );
+  });
+  it("if there is only one item and no slot action in banner item, div.action does not exist", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    const item = el.querySelector("sgds-system-banner-item") as SgdsSystemBannerItem;
+
+    const bannerItemActionDiv = item.shadowRoot?.querySelector(".action") as HTMLDivElement;
+    expect(bannerItemActionDiv).not.to.exist;
+  });
+  it("if there is only one item and but slot action in banner item exists, sgds-system-banner-item's div.action exists", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item
+        >one
+        <div slot="action">action</div></sgds-system-banner-item
+      >
+    </sgds-system-banner>`);
+    const item = el.querySelector("sgds-system-banner-item") as SgdsSystemBannerItem;
+
+    const bannerItemActionDiv = item.shadowRoot?.querySelector(".action") as HTMLDivElement;
+    expect(bannerItemActionDiv).to.exist;
+  });
+  it("if there is more than one item, sgds-system-banner-item's .action exist", async () => {
+    const el = await fixture<SgdsSystemBanner>(html`<sgds-system-banner show>
+      <sgds-system-banner-item>one</sgds-system-banner-item>
+      <sgds-system-banner-item>two</sgds-system-banner-item>
+      <sgds-system-banner-item>three</sgds-system-banner-item>
+    </sgds-system-banner>`);
+    const items = el.querySelectorAll("sgds-system-banner-item") as NodeListOf<SgdsSystemBannerItem>;
+    items.forEach(async item => {
+      const bannerItemActionDiv = item.shadowRoot?.querySelector(".action") as HTMLDivElement;
+      expect(bannerItemActionDiv).to.exist;
+    });
+  });
+});
diff --git a/test/tab.test.ts b/test/tab.test.ts
index 7b5bfcb6c..f6898eaa4 100644
--- a/test/tab.test.ts
+++ b/test/tab.test.ts
@@ -1,7 +1,7 @@
 import "./sgds-web-component";
 import { aTimeout, expect, fixture, html, oneEvent, waitUntil } from "@open-wc/testing";
 import type { SgdsTabGroup, SgdsTabPanel, SgdsTab } from "../src/components";
-import { clickOnElement } from "../src/utils/test";
+import { clickOnElement } from "./utils";
 import { sendKeys } from "@web/test-runner-commands";
 
 describe("<sgds-tab>", () => {
diff --git a/src/utils/test.ts b/test/utils/index.ts
similarity index 90%
rename from src/utils/test.ts
rename to test/utils/index.ts
index 13247b0de..d81b1c90d 100644
--- a/src/utils/test.ts
+++ b/test/utils/index.ts
@@ -81,3 +81,9 @@ export async function moveMouseOnElement(
 
   await sendMouse({ type: "move", position: [clickX, clickY] });
 }
+
+export async function moveMouseOutOfElement(el: Element) {
+  const { x, y, width, height } = el.getBoundingClientRect();
+  // Move mouse to a point 50px above and to the left of the element
+  await sendMouse({ type: "move", position: [x - 50, y - 50] });
+}