diff --git a/components/src/banner/banner.component.html b/components/src/banner/banner.component.html
new file mode 100644
index 0000000000..eaf91d1d8d
--- /dev/null
+++ b/components/src/banner/banner.component.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
diff --git a/components/src/banner/banner.component.spec.ts b/components/src/banner/banner.component.spec.ts
new file mode 100644
index 0000000000..e1f8c04856
--- /dev/null
+++ b/components/src/banner/banner.component.spec.ts
@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { BannerComponent } from "./banner.component";
+
+describe("BannerComponent", () => {
+ let component: BannerComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [BannerComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(BannerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it("should create with alert", () => {
+ expect(component.useAlertRole).toBeTrue();
+ const el = fixture.nativeElement.children[0];
+ expect(el.getAttribute("role")).toEqual("status");
+ expect(el.getAttribute("aria-live")).toEqual("polite");
+ });
+
+ it("useAlertRole=false", () => {
+ component.useAlertRole = false;
+ fixture.autoDetectChanges();
+
+ expect(component.useAlertRole).toBeFalse();
+ const el = fixture.nativeElement.children[0];
+ expect(el.getAttribute("role")).toBeNull();
+ expect(el.getAttribute("aria-live")).toBeNull();
+ });
+});
diff --git a/components/src/banner/banner.component.ts b/components/src/banner/banner.component.ts
new file mode 100644
index 0000000000..7565ba3015
--- /dev/null
+++ b/components/src/banner/banner.component.ts
@@ -0,0 +1,39 @@
+import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
+
+type BannerTypes = "premium" | "info" | "warning" | "danger";
+
+const defaultIcon: Record = {
+ premium: "bwi-star",
+ info: "bwi-info-circle",
+ warning: "bwi-exclamation-triangle",
+ danger: "bwi-error",
+};
+
+@Component({
+ selector: "bit-banner",
+ templateUrl: "./banner.component.html",
+})
+export class BannerComponent implements OnInit {
+ @Input("bannerType") bannerType: BannerTypes = "info";
+ @Input() icon: string;
+ @Input() useAlertRole = true;
+
+ @Output() onClose = new EventEmitter();
+
+ ngOnInit(): void {
+ this.icon ??= defaultIcon[this.bannerType];
+ }
+
+ get bannerClass() {
+ switch (this.bannerType) {
+ case "danger":
+ return "tw-bg-danger-500";
+ case "info":
+ return "tw-bg-info-500";
+ case "premium":
+ return "tw-bg-success-500";
+ case "warning":
+ return "tw-bg-warning-500";
+ }
+ }
+}
diff --git a/components/src/banner/banner.module.ts b/components/src/banner/banner.module.ts
new file mode 100644
index 0000000000..df8c8f29b3
--- /dev/null
+++ b/components/src/banner/banner.module.ts
@@ -0,0 +1,11 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { BannerComponent } from "./banner.component";
+
+@NgModule({
+ imports: [CommonModule],
+ exports: [BannerComponent],
+ declarations: [BannerComponent],
+})
+export class BannerModule {}
diff --git a/components/src/banner/banner.stories.ts b/components/src/banner/banner.stories.ts
new file mode 100644
index 0000000000..88594df3f1
--- /dev/null
+++ b/components/src/banner/banner.stories.ts
@@ -0,0 +1,38 @@
+import { Meta, Story } from "@storybook/angular";
+
+import { BannerComponent } from "./banner.component";
+
+export default {
+ title: "Jslib/Banner",
+ component: BannerComponent,
+ args: {
+ bannerType: "warning",
+ },
+} as Meta;
+
+const Template: Story = (args: BannerComponent) => ({
+ props: args,
+ template: `
+ Content Really Long Text Lorem Ipsum Ipsum Ipsum
+ `,
+});
+
+export const Premium = Template.bind({});
+Premium.args = {
+ bannerType: "premium",
+};
+
+export const Info = Template.bind({});
+Info.args = {
+ bannerType: "info",
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+ bannerType: "warning",
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+ bannerType: "danger",
+};
diff --git a/components/src/banner/index.ts b/components/src/banner/index.ts
new file mode 100644
index 0000000000..f96f4f8302
--- /dev/null
+++ b/components/src/banner/index.ts
@@ -0,0 +1,2 @@
+export * from "./banner.component";
+export * from "./banner.module";
diff --git a/components/src/index.ts b/components/src/index.ts
index f4ca42de8b..f8fef9a94c 100644
--- a/components/src/index.ts
+++ b/components/src/index.ts
@@ -1,3 +1,4 @@
export * from "./badge";
+export * from "./banner";
export * from "./button";
export * from "./callout";