diff --git a/commitlint.config.cjs b/commitlint.config.cjs
index f4119dfc..5fed8d4e 100644
--- a/commitlint.config.cjs
+++ b/commitlint.config.cjs
@@ -1,35 +1,36 @@
 module.exports = {
-  extends: ['@commitlint/config-conventional'],
+  extends: ["@commitlint/config-conventional"],
   rules: {
-    'scope-enum': [
+    "scope-enum": [
       2,
-      'always',
+      "always",
       [
-        'storybook',
-        'design',
-        'react',
-        'deps',
-        'deps-dev',
+        "storybook",
+        "design",
+        "react",
+        "deps",
+        "deps-dev",
         // Components as scopes listed below
-        'button',
-        'icon',
-        'input',
-        'badge',
-        'tab',
-        'tooltip',
-        'progress-indicator',
-        'checkbox-group',
-        'checkbox',
-        'alert',
-        'select',
-        'pagination',
-        'radio',
-        'dialog',
-        'drawer',
-        'dropdown',
-        'switch',
-        'textarea',
-        'popover',
+        "button",
+        "icon",
+        "input",
+        "badge",
+        "tab",
+        "tooltip",
+        "progress-indicator",
+        "checkbox-group",
+        "checkbox",
+        "alert",
+        "select",
+        "pagination",
+        "radio",
+        "dialog",
+        "drawer",
+        "dropdown",
+        "switch",
+        "textarea",
+        "popover",
+        "notification",
       ],
     ],
   },
diff --git a/src/baklava.ts b/src/baklava.ts
index f6f7c0a2..43ab0fd7 100644
--- a/src/baklava.ts
+++ b/src/baklava.ts
@@ -23,4 +23,6 @@ export { default as BlDropdown } from "./components/dropdown/bl-dropdown";
 export { default as BlDropdownItem } from "./components/dropdown/item/bl-dropdown-item";
 export { default as BlDropdownGroup } from "./components/dropdown/group/bl-dropdown-group";
 export { default as BlSwitch } from "./components/switch/bl-switch";
+export { default as BlNotification } from "./components/notification/bl-notification";
+export { default as BlNotificationCard } from "./components/notification/card/bl-notification-card";
 export { getIconPath, setIconPath } from "./utilities/asset-paths";
diff --git a/src/components/alert/bl-alert.test.ts b/src/components/alert/bl-alert.test.ts
index 064bf2fd..bf7f2299 100644
--- a/src/components/alert/bl-alert.test.ts
+++ b/src/components/alert/bl-alert.test.ts
@@ -147,12 +147,25 @@ describe("Slot", () => {
     const el = await fixture<typeofBlAlert>(
       html`<bl-alert>
         <bl-button slot="action"> Action Slot </bl-button>
+        <span slot="action">Should not render this element</span>
         <bl-button slot="action-secondary"> Action Slot </bl-button>
       </bl-alert>`
     );
-    const actionSlot = el.shadowRoot?.querySelector('slot[name="action"]');
 
-    expect(actionSlot).to.exist;
+    const actionSlot = el.shadowRoot!.querySelector('slot[name="action"]') as HTMLSlotElement;
+    const [actionElement, actionSpanElement] = actionSlot.assignedElements();
+
+    expect(actionElement as HTMLElement).to.exist;
+    expect(actionElement.tagName).to.eq("BL-BUTTON");
+    expect(actionSpanElement as HTMLElement).to.not.exist;
+
+    const actionSecondarySlot = el.shadowRoot!.querySelector(
+      'slot[name="action-secondary"]'
+    ) as HTMLSlotElement;
+    const actionSecondaryElement = actionSecondarySlot?.assignedElements()[0] as HTMLElement;
+
+    expect(actionSecondaryElement).to.exist;
+    expect(actionSecondaryElement.tagName).to.eq("BL-BUTTON");
   });
   it("renders `action` slot empty when bl-button is not used", async () => {
     const el = await fixture<typeofBlAlert>(
diff --git a/src/components/alert/bl-alert.ts b/src/components/alert/bl-alert.ts
index c22b275d..207571e7 100644
--- a/src/components/alert/bl-alert.ts
+++ b/src/components/alert/bl-alert.ts
@@ -104,7 +104,7 @@ export default class BlAlert extends LitElement {
 
   private _initAlertActionSlot(event: Event) {
     const slotElement = event.target as HTMLSlotElement;
-    const slotElements = slotElement.assignedElements();
+    const slotElements = slotElement.assignedElements({ flatten: true });
 
     slotElements.forEach(element => {
       if (element.tagName !== "BL-BUTTON") {
@@ -112,9 +112,9 @@ export default class BlAlert extends LitElement {
         return;
       }
 
-      (slotElement.parentElement as HTMLElement).style.display = "flex";
+      (this.shadowRoot?.querySelector(".actions") as HTMLElement).style.display = "flex";
 
-      const variant = element.slot === "action-secondary" ? "secondary" : "primary";
+      const variant = slotElement.name === "action-secondary" ? "secondary" : "primary";
       const buttonTypes: Record<AlertVariant, string> = {
         info: "default",
         warning: "neutral",
diff --git a/src/components/dialog/bl-dialog.mdx b/src/components/dialog/bl-dialog.mdx
index 2b25aad8..3709988b 100644
--- a/src/components/dialog/bl-dialog.mdx
+++ b/src/components/dialog/bl-dialog.mdx
@@ -94,6 +94,14 @@ document.querySelector("bl-dialog").addEventListener("bl-dialog-request-close",
 });
 ```
 
+## Using HTML Dialog Element
+
+Starting from version 2.4.0 of Baklava, the `bl-dialog` component uses a polyfill implementation by default due to some quirks in the native HTML Dialog element.
+This change was prompted by issues encountered during the development of the `bl-notification` component, where the native dialog element blocked any actions on it, event with Popover attribute.
+
+If you wish to use the native HTML Dialog element, you can do so by setting the `polyfilled` attribute to `false`.
+Please note that this will cause notifications to render under the dialog backdrop. Prior to version 2.4.0, this was the default behavior.
+
 ## Reference
 
 <ArgsTable of="bl-dialog" />
diff --git a/src/components/dialog/bl-dialog.test.ts b/src/components/dialog/bl-dialog.test.ts
index 7f691084..7a0deaec 100644
--- a/src/components/dialog/bl-dialog.test.ts
+++ b/src/components/dialog/bl-dialog.test.ts
@@ -90,7 +90,7 @@ describe("bl-dialog", () => {
       window.HTMLDialogElement = htmlDialogElement;
     });
     it("should render html dialog component with the default values when supports html dialog", async () => {
-      const el = await fixture<typeOfBlDialog>(html`<bl-dialog></bl-dialog>`);
+      const el = await fixture<typeOfBlDialog>(html`<bl-dialog .polyfilled=${false}></bl-dialog>`);
 
       assert.shadowDom.equal(
         el,
@@ -132,7 +132,7 @@ describe("bl-dialog", () => {
     });
 
     it("should close the dialog when the close btn is clicked", async () => {
-      const el = await fixture<typeOfBlDialog>(html` <bl-dialog open caption="My title">
+      const el = await fixture<typeOfBlDialog>(html` <bl-dialog .polyfilled=${false} open caption="My title">
         <div>My Content</div>
       </bl-dialog>`);
       const dialog = el.shadowRoot?.querySelector(".dialog") as HTMLDivElement;
@@ -340,7 +340,7 @@ describe("bl-dialog", () => {
       });
 
       it("should fire bl-dialog-request-close event when dialog closes by clicking backdrop", async () => {
-        const el = await fixture<typeOfBlDialog>(html`<bl-dialog open caption="My title">
+        const el = await fixture<typeOfBlDialog>(html`<bl-dialog .polyfilled=${false} open caption="My title">
         </bl-dialog>`);
 
         const dialog = el?.shadowRoot?.querySelector<HTMLDialogElement>(".dialog");
diff --git a/src/components/dialog/bl-dialog.ts b/src/components/dialog/bl-dialog.ts
index 2c76cc87..a7774259 100644
--- a/src/components/dialog/bl-dialog.ts
+++ b/src/components/dialog/bl-dialog.ts
@@ -48,9 +48,17 @@ export default class BlDialog extends LitElement {
    * using polyfill by setting this to true in some cases like to show some content on top of dialog
    * in case you are not able to use Popover API. Be aware that, polyfilled version can cause some
    * inconsistencies in terms of accessibility and stacking context. So use it with extra caution.
+   *
+   * As of the current implementation, you can render above the dialog HTML element using the Popover API. However,
+   * it will block any actions on the Popover element. This issue was encountered during the development of the `bl-notification` component.
+   * As a result, we decided to enable the polyfill for the `bl-dialog` component by default. If you prefer to use the native dialog, you can set
+   * this property to false. Please note, doing so will cause notifications to render under the dialog backdrop.
+   * For more information, refer to the comment linked below:
+   *
+   * https://github.com/Trendyol/baklava/issues/141#issuecomment-1810301413
    */
   @property({ type: Boolean, reflect: true })
-  polyfilled = !window.HTMLDialogElement;
+  polyfilled = true;
 
   @query(".dialog")
   private dialog: HTMLDialogElement & DialogElement;
@@ -176,7 +184,7 @@ export default class BlDialog extends LitElement {
   }
 
   render(): TemplateResult {
-    return this.polyfilled
+    return this.polyfilled || !window.HTMLDialogElement
       ? html`<div
           class="dialog-polyfill"
           role="dialog"
diff --git a/src/components/notification/bl-notification.css b/src/components/notification/bl-notification.css
new file mode 100644
index 00000000..727a0688
--- /dev/null
+++ b/src/components/notification/bl-notification.css
@@ -0,0 +1,106 @@
+:host {
+  --bl-notification-width: 396px;
+  --bl-notification-gap: var(--bl-size-2xs);
+  --bl-notification-animation-duration: 0.3s;
+}
+
+.wrapper {
+  --margin: var(--bl-size-xl);
+
+  display: flex;
+  flex-direction: column-reverse;
+  position: fixed;
+  top: 0;
+  right: 0;
+  max-width: var(--bl-notification-width);
+  margin: var(--margin);
+  width: calc(100% - var(--margin) * 2);
+  z-index: var(--bl-index-notification);
+}
+
+@media screen and (max-width: 480px) {
+  .wrapper {
+    flex-direction: column;
+    max-width: 100%;
+  }
+}
+
+.notification {
+  will-change: transform height margin;
+  animation: slide-in-right var(--bl-notification-animation-duration) ease;
+  margin-bottom: var(--bl-notification-gap);
+  touch-action: none;
+}
+
+.notification[data-slide="top"] {
+  animation: slide-in-top var(--bl-notification-animation-duration) ease;
+}
+
+:host([no-animation]) .notification {
+  animation: none;
+}
+
+.notification.removing {
+  animation: slide-out-right var(--bl-notification-animation-duration) ease forwards,
+    size-to-zero var(--bl-notification-animation-duration) ease
+      var(--bl-notification-animation-duration) forwards;
+}
+
+.notification[data-slide="top"].removing {
+  animation: slide-out-top var(--bl-notification-animation-duration) ease forwards,
+    size-to-zero var(--bl-notification-animation-duration) ease
+      var(--bl-notification-animation-duration) forwards;
+}
+
+:host([no-animation]) .notification.removing {
+  animation: size-to-zero 0;
+}
+
+@media (prefers-reduced-motion) {
+  .notification.removing {
+    animation: size-to-zero 0;
+  }
+
+  .notification {
+    animation: none;
+  }
+}
+
+@keyframes slide-in-right {
+  from {
+    transform: translateX(var(--travel-distance, 10px));
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+}
+
+@keyframes slide-out-right {
+  to {
+    transform: translateX(var(--travel-distance, 10px));
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-top {
+  from {
+    transform: translateY(var(--travel-distance, -10px));
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+}
+
+@keyframes slide-out-top {
+  to {
+    transform: translateY(var(--travel-distance, -10px));
+    opacity: 0;
+  }
+}
+
+@keyframes size-to-zero {
+  to {
+    height: 0;
+    margin: 0;
+  }
+}
diff --git a/src/components/notification/bl-notification.mdx b/src/components/notification/bl-notification.mdx
new file mode 100644
index 00000000..26405b23
--- /dev/null
+++ b/src/components/notification/bl-notification.mdx
@@ -0,0 +1,111 @@
+import { Meta, Canvas, ArgsTable, Story } from "@storybook/addon-docs";
+import * as NotificationStories from "./bl-notification.stories";
+
+<Meta of={NotificationStories} />
+
+# Notification
+
+<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/141)</bl-badge>
+<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2790%3A13792)</bl-badge>
+
+Notifications are messages that communicate information to the user.
+
+## Design Rules
+
+- Notification **has fixed width (396px)** by default.
+- Notifications are **temporary** by default but can be set permanent.
+- Temporary notifications are **dismissed automatically** after a certain period of time.
+- Temporary notifications remaning time will stop when hovered.
+- It can be dismissed by swiping up on mobile.
+- Notification takes position on top on small screens, and on top right on large screens.
+- Multiple notifications would be visible with a vertical stack. New notifications will come to top on large screens, and will come to bottom on small screens.
+
+## Basic Usage
+
+The `bl-notification` component is a versatile tool for displaying notifications. It exposes two public methods: `addNotification` and `removeNotification`.
+
+The `addNotification` method accepts a notification object as a parameter and returns a notification object that includes the props, an id, and a remove method. The remove method is a wrapper that calls the `removeNotification` method with the id of the notification.
+
+The `removeNotification` method accepts a notification id as a parameter and returns a Promise that resolves when the notification removal animation is complete.
+
+### Adding a Notification
+
+A notification could be added by calling the `addNotification` method with a [notification object](#notification-object).
+
+<Canvas of={NotificationStories.AddExample} story={{ inline: false, height: "400px" }}></Canvas>
+
+### Removing a Notification
+
+A notification could be removed by calling the `removeNotification` method with the notification's id.
+
+<Canvas of={NotificationStories.RemoveExample} story={{ inline: false, height: "200px" }}></Canvas>
+
+#### Await for Removal
+
+The `removeNotification` method returns a Promise that resolves when the notification removal animation is complete. This could be used to await the removal of a notification.
+
+<Canvas
+  of={NotificationStories.RemoveAwaitExample}
+  story={{ inline: false, height: "300px" }}
+></Canvas>
+
+### Actions
+
+A notification could have a primary and a secondary action. These actions are displayed as buttons on the notification.
+
+<Canvas
+  of={NotificationStories.PrimaryActionExample}
+  story={{ inline: false, height: "200px" }}
+></Canvas>
+<Canvas
+  of={NotificationStories.SecondaryActionExample}
+  story={{ inline: false, height: "200px" }}
+></Canvas>
+
+#### Removing a Notification on Action Click
+
+A notification could be removed by calling notification's remove method.
+
+<Canvas
+  of={NotificationStories.ActionsRemoveExample}
+  story={{ inline: false, height: "300px" }}
+></Canvas>
+
+### Permanent
+
+A notification could be permanent. Permanent notifications are not dismissed automatically. They could be dismissed by clicking the close button.
+
+<Canvas
+  of={NotificationStories.PermanentExample}
+  story={{ inline: false, height: "200px" }}
+></Canvas>
+
+### Variants
+
+A notification could have one of the following variants: info, success, warning, error. The variant changes the color of the notification.
+
+<Canvas
+  of={NotificationStories.VariantsExample}
+  story={{ inline: false, height: "600px" }}
+></Canvas>
+
+## Reference
+
+### bl-notification
+
+<ArgsTable of="bl-notification" />
+
+### Notification Object
+
+| Name                | Description                                       | Default  | Type                                          |
+| ------------------- | ------------------------------------------------- | -------- | --------------------------------------------- |
+| **caption**         | The caption of the notification.                  | -        | string                                        |
+| **description**     | The description of the notification.              | -        | string                                        |
+| **icon**            | The icon of the notification.                     | `true`   | boolean or BaklavaIcon                        |
+| **variant**         | The variant of the notification.                  | `"info"` | `"info" \| "success" \| "warning" \| "error"` |
+| **primaryAction**   | The primary action of the notification.           | -        | `{ label: string, onClick: () => void }`      |
+| **secondaryAction** | The secondary action of the notification.         | -        | `{ label: string, onClick: () => void }`      |
+| **duration**        | The duration of the notification in milliseconds. | `7`      | number                                        |
+| **permanent**       | Whether the notification is permanent.            | `false`  | boolean                                       |
+| **id**              | The id of the notification.                       | -        | string                                        |
+| **remove**          | The remove method of the notification.            | -        | `() => Promise<void>`                         |
diff --git a/src/components/notification/bl-notification.stories.ts b/src/components/notification/bl-notification.stories.ts
new file mode 100644
index 00000000..ebaf27a7
--- /dev/null
+++ b/src/components/notification/bl-notification.stories.ts
@@ -0,0 +1,418 @@
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { Meta, StoryObj } from "@storybook/web-components";
+import { fullscreenLayout } from "../../utilities/chromatic-decorators";
+import type { NotificationProps, Notification } from "./bl-notification";
+
+const meta: Meta = {
+  title: "Components/Notification",
+  component: "bl-notification",
+  parameters: {
+    chromatic: {
+      viewports: [1000],
+    },
+  },
+  decorators: [fullscreenLayout],
+  argTypes: {
+    // Notification Card Props
+    duration: {
+      control: "number",
+      description: "Duration in seconds",
+      defaultValue: 7,
+    },
+    caption: {
+      control: "text",
+      description: "Caption of the notification",
+    },
+    description: {
+      control: "text",
+      description: "Description of the notification. Required.",
+    },
+    icon: {
+      control: "text",
+      defaultValue: "true",
+      description:
+        "Icon of the notification. If provided with a string, it will be used as an icon name. If provided with a boolean, it will use the default icon or no icon.",
+    },
+    variant: {
+      options: ["info", "warning", "success", "error"],
+      default: "info",
+      control: { type: "select" },
+      description: "Variant of the notification",
+    },
+    permanent: {
+      control: "boolean",
+      defaultValue: false,
+      description:
+        "If true, the notification will not have duration and will be removed when the user clicks on the close button.",
+    },
+    primaryAction: {
+      control: "object",
+      description: "Primary action of the notification. onClick and label properties are required.",
+    },
+    secondaryAction: {
+      control: "object",
+      description:
+        "Secondary action of the notification. onClick and label properties are required.",
+    },
+  },
+  args: {
+    noAnimation: false,
+    duration: 20,
+    caption: "Notification Caption",
+    description: "Notification Description",
+    icon: "true",
+    variant: "info",
+    permanent: false,
+    primaryAction: {
+      label: "Primary Action",
+      onClick() {},
+    },
+    secondaryAction: {
+      label: "Secondary Action",
+      onClick() {},
+    },
+  },
+};
+
+export default meta;
+
+const addNotification = (options: NotificationProps) => {
+  const el = document.querySelector("bl-notification");
+
+  return el?.addNotification(options);
+};
+
+const stringifyArgs = (args: NotificationArgs | NotificationProps) => {
+  return JSON.stringify(args, null, 6);
+};
+
+export type NotificationArgs = {
+  noAnimation: boolean;
+  duration: number;
+} & NotificationProps;
+
+export type Story = StoryObj<NotificationArgs>;
+
+const BasicTemplate = (args: NotificationArgs) => html`
+  <bl-notification
+    ?no-animation=${args.noAnimation}
+    duration=${ifDefined(args.duration)}
+  ></bl-notification>
+`;
+
+const NotificationCreator = (args: NotificationProps, buttonLabel = "Add Notification") => {
+  const slug = buttonLabel.toLowerCase().replace(/\s/g, "-");
+
+  return html`
+    <bl-button id=${slug}>${buttonLabel}</bl-button>
+
+    <script>
+      (function () {
+        const notificationElement = document.querySelector("bl-notification");
+        const addButton = document.querySelector("bl-button#${slug}");
+
+        addButton.addEventListener("bl-click", () => {
+          notificationElement.addNotification(${stringifyArgs(args)});
+        });
+      })();
+    </script>
+  `;
+};
+
+export const AddExample: Story = {
+  render(args: NotificationArgs) {
+    return html`${BasicTemplate(args)} ${NotificationCreator(args)} `;
+  },
+  args: {
+    duration: 60,
+    primaryAction: undefined,
+    secondaryAction: undefined,
+  },
+  play: ({ args }) => {
+    addNotification(args);
+    addNotification({ ...args, variant: "success" });
+    addNotification({ ...args, variant: "warning" });
+    addNotification({ ...args, variant: "error" });
+  },
+};
+
+export const RemoveExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      <bl-button>Remove Notification</bl-button>
+
+      <script>
+        (function () {
+          const notificationElement = document.querySelector("bl-notification");
+          const removeButton = document.querySelector("bl-button");
+
+          const notification = notificationElement.addNotification({
+            caption: "Notification Caption",
+            description: "Notification Description",
+            permanent: true,
+          });
+
+          removeButton.addEventListener("bl-click", () => {
+            notification.remove(); // notificationElement.removeNotification(notification.id);
+          });
+        })();
+      </script>
+    `;
+  },
+};
+
+export const RemoveAwaitExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      <bl-button>Remove Notifications</bl-button>
+
+      <script>
+        (function () {
+          const notificationElement = document.querySelector("bl-notification");
+          const removeButton = document.querySelector("bl-button");
+
+          const firstNotification = notificationElement.addNotification({
+            caption: "Notification Caption",
+            description: "Notification Description",
+            permanent: true,
+          });
+
+          const secondNotification = notificationElement.addNotification({
+            caption: "Notification Caption Second",
+            description: "Notification Description Second",
+            permanent: true,
+          });
+
+          const thirdNotification = notificationElement.addNotification({
+            caption: "Notification Caption Third",
+            description: "Notification Description Third",
+            permanent: true,
+          });
+
+          removeButton.addEventListener("bl-click", async () => {
+            await secondNotification.remove();
+            await thirdNotification.remove();
+            await firstNotification.remove();
+          });
+        })();
+      </script>
+    `;
+  },
+};
+
+export const PrimaryActionExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      <script>
+        (function () {
+          const notificationElement = document.querySelector("bl-notification");
+
+          notificationElement.addNotification({
+            caption: "Notification Caption",
+            description: "Notification Description",
+            permanent: true,
+            primaryAction: {
+              label: "Primary Action",
+              onClick: () => {
+                window.alert("Primary Action Clicked");
+              },
+            },
+          });
+        })();
+      </script>
+    `;
+  },
+};
+
+export const SecondaryActionExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      <script>
+        (function () {
+          const notificationElement = document.querySelector("bl-notification");
+
+          notificationElement.addNotification({
+            caption: "Notification Caption",
+            description: "Notification Description",
+            permanent: true,
+            primaryAction: {
+              label: "Primary Action",
+              onClick: () => {
+                window.alert("Primary Action Clicked");
+              },
+            },
+            secondaryAction: {
+              label: "Secondary Action",
+              onClick: () => {
+                window.alert("Secondary Action Clicked");
+              },
+            },
+          });
+        })();
+      </script>
+    `;
+  },
+};
+
+export const ActionsRemoveExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      <script>
+        (function () {
+          const notificationElement = document.querySelector("bl-notification");
+
+          const notification = notificationElement.addNotification({
+            caption: "Notification Caption",
+            description: "Notification Description",
+            permanent: true,
+            primaryAction: {
+              label: "Primary Action",
+              onClick: notification => {
+                notification.remove();
+              },
+            },
+            secondaryAction: {
+              label: "Secondary Action",
+              onClick: notification => {
+                notification.remove();
+              },
+            },
+          });
+        })();
+      </script>
+    `;
+  },
+  play: () => {
+    addNotification({
+      caption: "Notification Caption",
+      description: "Notification Description",
+      permanent: true,
+      primaryAction: {
+        label: "Primary Action",
+        onClick: (notification: Notification) => {
+          notification.remove();
+        },
+      },
+      secondaryAction: {
+        label: "Secondary Action",
+        onClick: (notification: Notification) => {
+          notification.remove();
+        },
+      },
+    });
+  },
+};
+
+export const PermanentExample: Story = {
+  render(args: NotificationArgs) {
+    return html` ${BasicTemplate(args)} ${NotificationCreator(args)} `;
+  },
+  args: {
+    permanent: true,
+  },
+  play: ({ args }) => {
+    addNotification(args);
+  },
+};
+
+export const VariantsExample: Story = {
+  render(args: NotificationArgs) {
+    return html`
+      ${BasicTemplate(args)}
+      ${NotificationCreator(
+        {
+          caption: "Notification Caption",
+          description: "Notification Variant: info",
+          permanent: true,
+          variant: "info",
+          primaryAction: {
+            label: "Primary Action",
+            onClick() {},
+          },
+          secondaryAction: {
+            label: "Secondary Action",
+            onClick() {},
+          },
+        },
+        "Info"
+      )}
+      ${NotificationCreator(
+        {
+          caption: "Notification Caption",
+          description: "Notification Variant: success",
+          permanent: true,
+          variant: "success",
+          primaryAction: {
+            label: "Primary Action",
+            onClick() {},
+          },
+          secondaryAction: {
+            label: "Secondary Action",
+            onClick() {},
+          },
+        },
+        "Success"
+      )}
+      ${NotificationCreator(
+        {
+          caption: "Notification Caption",
+          description: "Notification Variant: warning",
+          permanent: true,
+          variant: "warning",
+          primaryAction: {
+            label: "Primary Action",
+            onClick() {},
+          },
+          secondaryAction: {
+            label: "Secondary Action",
+            onClick() {},
+          },
+        },
+        "Warning"
+      )}
+      ${NotificationCreator(
+        {
+          caption: "Notification Caption",
+          description: "Notification Variant: error",
+          permanent: true,
+          variant: "error",
+          primaryAction: {
+            label: "Primary Action",
+            onClick() {},
+          },
+          secondaryAction: {
+            label: "Secondary Action",
+            onClick() {},
+          },
+        },
+        "Error"
+      )}
+    `;
+  },
+  play: () => {
+    const variants = ["info", "success", "warning", "error"] as const;
+
+    for (const variant of variants) {
+      addNotification({
+        caption: "Notification Caption",
+        description: `Notification Variant: ${variant}`,
+        permanent: true,
+        variant,
+        primaryAction: {
+          label: "Primary Action",
+          onClick() {},
+        },
+        secondaryAction: {
+          label: "Secondary Action",
+          onClick() {},
+        },
+      });
+    }
+  },
+};
diff --git a/src/components/notification/bl-notification.test.ts b/src/components/notification/bl-notification.test.ts
new file mode 100644
index 00000000..d7beb2f1
--- /dev/null
+++ b/src/components/notification/bl-notification.test.ts
@@ -0,0 +1,694 @@
+import { assert, expect, fixture, html } from "@open-wc/testing";
+import { setViewport, emulateMedia } from "@web/test-runner-commands";
+import { spy, stub } from "sinon";
+import BlNotification from "./bl-notification";
+import BlNotificationCard from "./card/bl-notification-card";
+
+function sendTouchEvent(
+  x: number,
+  y: number,
+  element: BlNotificationCard,
+  eventType: "touchstart" | "touchend" | "touchmove"
+) {
+  const touchObj = new Touch({
+    identifier: Date.now(),
+    target: element,
+    clientX: x,
+    clientY: y,
+    radiusX: 2.5,
+    radiusY: 2.5,
+    rotationAngle: 10,
+    force: 0.5,
+  });
+
+  const touchEvent = new TouchEvent(eventType, {
+    cancelable: true,
+    bubbles: true,
+    touches: [touchObj],
+    targetTouches: [],
+    changedTouches: [touchObj],
+    shiftKey: true,
+  });
+
+  element.dispatchEvent(touchEvent);
+}
+
+describe("bl-notification", () => {
+  it("is defined", () => {
+    const el = document.createElement("bl-notification");
+
+    assert.instanceOf(el, BlNotification);
+  });
+
+  it("should have fixed width of 397px", async () => {
+    const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+    const wrapper = el.shadowRoot!.querySelector(".wrapper")!;
+    const style = window.getComputedStyle(wrapper);
+
+    assert.equal(style.maxWidth, "396px");
+  });
+
+  describe("Default props", () => {
+    it("should create notifications with given default duration", async () => {
+      const el = await fixture<BlNotification>(
+        html`<bl-notification duration="5"></bl-notification>`
+      );
+
+      const notification = el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      assert.equal(notification.duration, el.duration);
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      expect(notificationEl).to.have.attribute("duration", el.duration.toString());
+    });
+  });
+
+  describe("Remove Notification", () => {
+    it("should remove notification after remove animation", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const notification = el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      const animationPromise = el.removeNotification(notification.id);
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      expect(notificationEl)
+        .to.have.attribute("style")
+        .match(/height: \d+px/);
+      assert.isTrue(notificationEl.classList.contains("removing"));
+      assert.lengthOf(el.notificationList, 1);
+
+      await animationPromise;
+      await el.updateComplete;
+      assert.lengthOf(el.notificationList, 0);
+    });
+
+    it("should return false if notification does not exist", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const result = await el.removeNotification("test");
+
+      assert.isFalse(result);
+    });
+
+    it("should call remove notification when bl-notification-card-request-close event is dispatched", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      notificationEl.dispatchEvent(
+        new CustomEvent("bl-notification-card-request-close", {
+          bubbles: true,
+          composed: true,
+          detail: { source: "test" },
+        })
+      );
+
+      await el.updateComplete;
+
+      assert.isTrue(notificationEl.classList.contains("removing"));
+    });
+  });
+
+  describe("Animation", () => {
+    it("should render bl-notification-card with animation", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+      const style = window.getComputedStyle(notificationEl);
+
+      expect(style.animationName).to.equal("slide-in-right");
+    });
+
+    it("should render out bl-notification-card with animation", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const notification = el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      el.removeNotification(notification.id);
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+      const style = window.getComputedStyle(notificationEl);
+
+      expect(style.animationName).to.equal("slide-out-right, size-to-zero");
+    });
+
+    it("should not run animations when user has preferred reduced motion", async () => {
+      await emulateMedia({
+        reducedMotion: "reduce",
+      });
+
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const { remove } = el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      assert.equal(window.getComputedStyle(notificationEl).animationName, "none");
+
+      remove();
+
+      assert.equal(window.getComputedStyle(notificationEl).animationName, "size-to-zero");
+
+      await emulateMedia({
+        reducedMotion: "no-preference",
+      });
+    });
+  });
+
+  describe("Actions", () => {
+    it('should render primaryAction slot when provided with "primaryAction" property on notification', async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+        primaryAction: {
+          label: "test",
+          onClick: () => {},
+        },
+      });
+
+      await el.updateComplete;
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      assert.exists(notificationEl.querySelector("[slot=primary-action]"));
+      assert.include(notificationEl.querySelector("[slot=primary-action]")?.textContent, "test");
+    });
+
+    it("should call onClick callback when action is clicked", async () => {
+      const onClick = stub();
+
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+        primaryAction: {
+          label: "test",
+          onClick,
+        },
+      });
+
+      await el.updateComplete;
+
+      const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+      notificationEl.querySelector("[slot=primary-action]")?.dispatchEvent(
+        new CustomEvent("bl-click", {
+          bubbles: true,
+          composed: true,
+        })
+      );
+
+      await el.updateComplete;
+
+      expect(onClick).to.have.been.calledOnce;
+    });
+
+    describe("Secondary Actions", () => {
+      it('should render secondary action slot when provided with "secondaryAction" property on notification', async () => {
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+          secondaryAction: {
+            label: "test",
+            onClick: () => {},
+          },
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        assert.exists(notificationEl.querySelector("[slot=secondary-action]"));
+        assert.include(
+          notificationEl.querySelector("[slot=secondary-action]")?.textContent,
+          "test"
+        );
+      });
+
+      it("should call onClick callback when secondary action is clicked", async () => {
+        const onClick = stub();
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+          secondaryAction: {
+            label: "test",
+            onClick,
+          },
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        notificationEl.querySelector("[slot=secondary-action]")?.dispatchEvent(
+          new CustomEvent("bl-click", {
+            bubbles: true,
+            composed: true,
+          })
+        );
+
+        await el.updateComplete;
+
+        expect(onClick).to.have.been.calledOnce;
+      });
+    });
+  });
+
+  describe("Add Notification", () => {
+    it("should render bl-notification-card to match snapshot", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      el.addNotification({
+        caption: "test",
+        description: "test",
+        variant: "info",
+        duration: 5,
+        icon: "academy",
+      });
+
+      await el.updateComplete;
+
+      assert.shadowDom.equal(
+        el,
+        `
+          <div class="wrapper">
+            <bl-notification-card
+              caption="test"
+              class="notification"
+              data-slide="right"
+              duration="5"
+              icon="academy"
+              variant="info"
+              id="${el.notificationList[0].id}"
+            >
+              test
+            </bl-notification-card>
+          </div>
+        `
+      );
+    });
+
+    it("should render last bl-notification-card first", async () => {
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const wrapper = el.shadowRoot!.querySelector(".wrapper")!;
+      const style = window.getComputedStyle(wrapper);
+
+      assert.equal(style.flexDirection, "column-reverse");
+    });
+
+    describe("Notification Interface", () => {
+      it("should return notification with given id", async () => {
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        const notification = el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        assert.equal(el.notificationList[0], notification);
+      });
+
+      it("should return functional remove method", async () => {
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        const notification = el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        assert.isFunction(notification.remove);
+
+        await notification.remove();
+
+        await el.updateComplete;
+
+        assert.lengthOf(el.notificationList, 0);
+      });
+    });
+  });
+
+  describe("Mobile", () => {
+    beforeEach(async () => {
+      await setViewport({ width: 320, height: 480 });
+    });
+
+    describe("Touch", () => {
+      it("should save touch start position", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, 100, notificationEl, "touchstart");
+
+        assert.equal(el.touchStart.y, 100);
+      });
+
+      it("should remove notification when user swipes up", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+        const removeSpy = spy(el, "removeNotification");
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, -100, notificationEl, "touchend");
+
+        expect(removeSpy).to.have.been.calledOnceWith(el.notificationList[0].id);
+      });
+
+      it("should not remove notification when user swipes up less than 50px", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+        const removeSpy = spy(el, "removeNotification");
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(0, -49, notificationEl, "touchend");
+
+        await el.updateComplete;
+
+        expect(removeSpy).to.not.have.been.called;
+        expect(notificationEl.style.transition).to.equal("transform 0.3s ease 0s");
+        expect(notificationEl.style.transform).to.equal("translateY(0px)");
+
+        notificationEl.dispatchEvent(new TransitionEvent("transitionend"));
+
+        await el.updateComplete;
+
+        expect(notificationEl.style.transition).to.equal("");
+        expect(notificationEl.style.transform).to.equal("");
+      });
+
+      it("should update transform style when users touch moves up", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, -50, notificationEl, "touchmove");
+
+        await el.updateComplete;
+
+        assert.equal(notificationEl.style.transform, "translateY(-50px)");
+      });
+
+      it("should not allow user to move notification down", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, 590, notificationEl, "touchmove");
+
+        await el.updateComplete;
+
+        assert.equal(notificationEl.style.transform, "translateY(0px)");
+      });
+
+      it("should do nothing if device is not mobile", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        await setViewport({ width: 1024, height: 768 });
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+        const removeSpy = spy(el, "removeNotification");
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, 100, notificationEl, "touchstart");
+        await el.updateComplete;
+
+        assert.equal(el.touchStart.y, 0);
+
+        sendTouchEvent(100, 50, notificationEl, "touchmove");
+        await el.updateComplete;
+
+        assert.equal(notificationEl.style.transform, "");
+
+        sendTouchEvent(100, 50, notificationEl, "touchend");
+        await el.updateComplete;
+
+        expect(removeSpy).to.not.have.been.called;
+      });
+
+      it("should set travel-distance property with current touch position", async () => {
+        // FIXME: Cant emulate touch events in web test runner
+        if (!window.navigator.userAgent.includes("Chrome")) {
+          return;
+        }
+
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          permanent: true,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+
+        sendTouchEvent(100, -150, notificationEl, "touchend");
+
+        assert.equal(notificationEl.style.getPropertyValue("--travel-distance"), "-160px");
+      });
+    });
+
+    describe("Animation", () => {
+      it("should render bl-notification-card with animation from top", async () => {
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+        const style = window.getComputedStyle(notificationEl);
+
+        expect(style.animationName).to.equal("slide-in-top");
+      });
+
+      it("should render out bl-notification-card with animation to top", async () => {
+        const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+        const notification = el.addNotification({
+          caption: "test",
+          description: "test",
+          variant: "info",
+          duration: 5,
+          icon: "academy",
+        });
+
+        await el.updateComplete;
+
+        el.removeNotification(notification.id);
+
+        const notificationEl = el.shadowRoot!.querySelector("bl-notification-card")!;
+        const style = window.getComputedStyle(notificationEl);
+
+        expect(style.animationName).to.equal("slide-out-top, size-to-zero");
+      });
+    });
+
+    it("should have fixed width of 100%", async () => {
+      // FIXME: Safari won't update styles.
+      if (!window.navigator.userAgent.includes("Chrome")) {
+        return;
+      }
+
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+      const wrapper = el.shadowRoot!.querySelector(".wrapper")!;
+      const style = window.getComputedStyle(wrapper);
+
+      assert.equal(style.maxWidth, "100%");
+    });
+
+    it("should render first notification first", async () => {
+      // FIXME: Safari won't update styles.
+      if (!window.navigator.userAgent.includes("Chrome")) {
+        return;
+      }
+
+      const el = await fixture<BlNotification>(html`<bl-notification></bl-notification>`);
+
+      const wrapper = el.shadowRoot!.querySelector(".wrapper")!;
+      const style = window.getComputedStyle(wrapper);
+
+      assert.equal(style.flexDirection, "column");
+    });
+  });
+});
diff --git a/src/components/notification/bl-notification.ts b/src/components/notification/bl-notification.ts
new file mode 100644
index 00000000..3bc525f8
--- /dev/null
+++ b/src/components/notification/bl-notification.ts
@@ -0,0 +1,254 @@
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { repeat } from "lit/directives/repeat.js";
+import BlAlert from "../alert/bl-alert";
+import { BaklavaIcon } from "../icon/icon-list";
+import style from "./bl-notification.css";
+import BlNotificationCard, { CloseSource, NotificationVariant } from "./card/bl-notification-card";
+
+type Action = {
+  label: string;
+  onClick: (notification: Notification) => void;
+};
+
+export type NotificationProps = {
+  caption?: string;
+  description: string;
+  icon?: boolean | BaklavaIcon;
+  variant?: NotificationVariant;
+  primaryAction?: Action;
+  secondaryAction?: Action;
+  duration?: number;
+  permanent?: boolean;
+};
+
+export type Notification = NotificationProps & {
+  id: string;
+  remove: () => Promise<boolean>;
+};
+
+export const SWIPE_UP_THRESHOLD = -50;
+
+/**
+ * @tag bl-notification
+ * @summary Baklava Notification component
+ */
+
+@customElement("bl-notification")
+export default class BlNotification extends LitElement {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  /**
+   * Disable animations.
+   * It will not be possible to use animations if the user has disabled them.
+   * Animations will respect the user's preferences regardless of this property.
+   */
+  @property({ type: Boolean, attribute: "no-animation", reflect: true })
+  noAnimation = false;
+
+  /**
+   * Sets the default duration of notifications in seconds
+   */
+  @property({ type: Number })
+  duration = 7;
+
+  @state()
+  private notifications: Notification[] = [];
+
+  public get notificationList() {
+    return this.notifications;
+  }
+
+  private touchStartY = 0;
+
+  public get touchStart() {
+    return {
+      y: this.touchStartY,
+    };
+  }
+
+  private get isMobile() {
+    return window.matchMedia("(max-width: 480px)").matches;
+  }
+
+  /**
+   * Adds a notification to the list of notifications.
+   * @param {NotificationProps} props Notification properties
+   * @returns {Notification} A notification object with a remove method.
+   */
+  public addNotification(props: NotificationProps) {
+    // TODO id generation
+    const id = Math.random().toString(36).substr(2, 9);
+    const notification: Notification = {
+      ...props,
+      id,
+      duration: props.duration || this.duration,
+      remove: () => this.removeNotification(id),
+    };
+
+    const newNotifications = [...this.notifications, notification];
+
+    this.notifications = newNotifications;
+
+    return notification;
+  }
+
+  /**
+   * Removes a notification from the list of notifications.
+   * @param {string} id Notification id
+   * @returns {Promise<boolean>} A promise that resolves with a boolean indicating whether the notification was removed.
+   */
+  public async removeNotification(id: string): Promise<boolean> {
+    return new Promise(resolve => {
+      const notificationEl = this.shadowRoot?.getElementById(id) as BlAlert;
+
+      if (!notificationEl) {
+        resolve(false);
+        return;
+      }
+
+      notificationEl.style.height = `${notificationEl.clientHeight}px`;
+      notificationEl.addEventListener("animationend", ({ animationName }: AnimationEvent) => {
+        if (animationName !== "size-to-zero") {
+          return;
+        }
+
+        this.notifications = this.notifications.filter(notification => notification.id !== id);
+        resolve(true);
+      });
+
+      notificationEl.classList.add("removing");
+    });
+  }
+
+  @eventOptions({ passive: true })
+  private handleTouchStart(event: TouchEvent) {
+    if (!this.isMobile) {
+      return;
+    }
+
+    event.stopPropagation();
+
+    this.touchStartY = event.touches[0].clientY;
+  }
+
+  @eventOptions({ passive: true })
+  private handleTouchMove(event: TouchEvent) {
+    if (!this.isMobile) {
+      return;
+    }
+    event.stopPropagation();
+
+    const currentTarget = event.currentTarget as BlNotificationCard;
+
+    const currentY = event.touches[0].clientY;
+    // Allow only moving up
+    const movedY = Math.min(currentY - this.touchStartY, 0);
+
+    currentTarget.style.transform = `translateY(${movedY}px)`;
+  }
+
+  @eventOptions({ passive: true })
+  private handleTouchEnd(event: TouchEvent) {
+    if (!this.isMobile) {
+      return;
+    }
+    event.stopPropagation();
+
+    const currentTarget = event.currentTarget as BlNotificationCard;
+
+    const currentY = event.changedTouches[0].clientY;
+    const movedY = currentY - this.touchStartY;
+
+    if (movedY < SWIPE_UP_THRESHOLD) {
+      currentTarget.style.setProperty("--travel-distance", `${movedY - 10}px`);
+      this.removeNotification(currentTarget.id);
+    } else {
+      currentTarget.style.transition = "transform 0.3s ease";
+      currentTarget.style.transform = "translateY(0px)";
+
+      currentTarget.addEventListener("transitionend", () => {
+        currentTarget.style.transition = "";
+        currentTarget.style.transform = "";
+      });
+    }
+
+    this.touchStartY = 0;
+  }
+
+  private renderActionSlot(
+    slotName: "primary-action" | "secondary-action",
+    notification: Notification
+  ) {
+    const action =
+      slotName === "primary-action" ? notification.primaryAction : notification.secondaryAction;
+
+    if (!action || !action.label) {
+      return "";
+    }
+
+    return html`<bl-button slot="${slotName}" @bl-click=${() => action.onClick(notification)}>
+      ${action.label}
+    </bl-button>`;
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div class="wrapper">
+        ${repeat(
+          this.notifications,
+          notification => notification.id,
+          notification => {
+            const {
+              caption,
+              description,
+              icon = true,
+              variant = "info",
+              id,
+              duration = this.duration,
+              permanent,
+            } = notification;
+
+            const actionButton = this.renderActionSlot("primary-action", notification);
+            const secondaryActionButton = this.renderActionSlot("secondary-action", notification);
+
+            return html`
+              <bl-notification-card
+                id="${id}"
+                class="notification"
+                data-slide=${this.isMobile ? "top" : "right"}
+                duration=${duration}
+                caption="${ifDefined(caption)}"
+                icon=${icon}
+                variant=${ifDefined(variant)}
+                ?permanent=${permanent}
+                @bl-notification-card-request-close=${(
+                  event: CustomEvent<{ source: CloseSource }>
+                ) => {
+                  // We will run animations on the notification card
+                  // so we need to prevent the default close behavior
+                  event.preventDefault();
+                  this.removeNotification(id);
+                }}
+                @touchstart=${this.handleTouchStart}
+                @touchmove=${this.handleTouchMove}
+                @touchend=${this.handleTouchEnd}
+              >
+                ${description} ${actionButton} ${secondaryActionButton}
+              </bl-notification-card>
+            `;
+          }
+        )}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bl-notification": BlNotification;
+  }
+}
diff --git a/src/components/notification/card/bl-notification-card.css b/src/components/notification/card/bl-notification-card.css
new file mode 100644
index 00000000..454539c5
--- /dev/null
+++ b/src/components/notification/card/bl-notification-card.css
@@ -0,0 +1,57 @@
+:host {
+  display: block;
+}
+
+.notification {
+  position: relative;
+  border-radius: var(--bl-border-radius-m);
+  box-shadow: 0 5px 30px 0 rgba(39 49 66 / 25%);
+}
+
+.duration {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--bl-size-2xs);
+  width: 100%;
+}
+
+.duration > .remaining {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--bl-border-radius-s);
+  border-top-left-radius: 0;
+  animation-name: to-zero;
+  animation-duration: var(--duration, 7s);
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  animation-play-state: running;
+}
+
+.notification:hover .duration > .remaining {
+  animation-play-state: paused;
+}
+
+@keyframes to-zero {
+  to {
+    width: 0;
+  }
+}
+
+.notification[variant="success"] .duration > .remaining {
+  background-color: var(--bl-color-success);
+}
+
+.notification[variant="warning"] .duration > .remaining {
+  background-color: var(--bl-color-warning);
+}
+
+.notification[variant="danger"] .duration > .remaining {
+  background-color: var(--bl-color-danger);
+}
+
+.notification[variant="info"] .duration > .remaining {
+  background-color: var(--bl-color-primary);
+}
diff --git a/src/components/notification/card/bl-notification-card.test.ts b/src/components/notification/card/bl-notification-card.test.ts
new file mode 100644
index 00000000..332b0105
--- /dev/null
+++ b/src/components/notification/card/bl-notification-card.test.ts
@@ -0,0 +1,192 @@
+import { assert, expect, fixture, html, oneEvent } from "@open-wc/testing";
+import { sendMouse } from "@web/test-runner-commands";
+import { stub } from "sinon";
+import { getMiddleOfElement } from "../../../utilities/elements";
+import "../../alert/bl-alert";
+import BlNotificationCard from "./bl-notification-card";
+
+describe("bl-notification-card", () => {
+  it("is defined", () => {
+    const el = document.createElement("bl-notification-card");
+
+    assert.instanceOf(el, BlNotificationCard);
+  });
+
+  describe("Default Props", () => {});
+
+  describe("Variants", () => {
+    it("should map variant to alert variant", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card> Description </bl-notification-card>`
+      );
+      const alertEl = el.shadowRoot!.querySelector("bl-alert")!;
+
+      el.variant = "error";
+      await el.updateComplete;
+      expect(alertEl.getAttribute("variant")).to.equal("danger");
+
+      el.variant = "info";
+      await el.updateComplete;
+      expect(alertEl.getAttribute("variant")).to.equal("info");
+
+      el.variant = "success";
+      await el.updateComplete;
+      expect(alertEl.getAttribute("variant")).to.equal("success");
+
+      el.variant = "warning";
+      await el.updateComplete;
+      expect(alertEl.getAttribute("variant")).to.equal("warning");
+    });
+  });
+
+  describe("Duration", () => {
+    it("should set duration animation to alert", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card duration="5"> Description </bl-notification-card>`
+      );
+
+      const remainingEl = el.shadowRoot!.querySelector(".remaining")!;
+      const style = getComputedStyle(remainingEl);
+
+      expect(remainingEl).to.exist;
+      expect(style.getPropertyValue("animation-name")).to.equal("to-zero");
+      expect(style.getPropertyValue("animation-duration")).to.equal("5s");
+      expect(style.getPropertyValue("animation-play-state")).to.equal("running");
+    });
+
+    it("should trigger close event when duration ends", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card duration="0.1"> Description </bl-notification-card>`
+      );
+      const requestCloseStub = stub();
+      const closeStub = stub();
+
+      el.addEventListener("bl-notification-card-request-close", requestCloseStub);
+      el.addEventListener("bl-notification-card-close", closeStub);
+
+      const remainingEl = el.shadowRoot!.querySelector(".remaining")!;
+
+      await oneEvent(remainingEl, "animationend");
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(requestCloseStub).to.have.been.calledOnce;
+      expect(requestCloseStub.args[0][0].detail).to.deep.equal({
+        source: "duration-ended",
+      });
+      expect(closeStub).to.have.been.calledOnce;
+      expect(closeStub.args[0][0].detail).to.deep.equal({
+        source: "duration-ended",
+      });
+    });
+
+    it("should not trigger close event if request close is prevented", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card duration="0.1"> Description </bl-notification-card>`
+      );
+      const requestCloseStub = stub();
+      const closeStub = stub();
+
+      el.addEventListener("bl-notification-card-request-close", event => {
+        event.preventDefault();
+        requestCloseStub();
+      });
+      el.addEventListener("bl-notification-card-close", closeStub);
+
+      const remainingEl = el.shadowRoot!.querySelector(".remaining")!;
+
+      await oneEvent(remainingEl, "animationend");
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(requestCloseStub).to.have.been.calledOnce;
+      expect(closeStub).to.not.have.been.called;
+    });
+
+    it("should set play state to paused when mouse enter", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card duration="5"> Description </bl-notification-card>`
+      );
+
+      const remainingEl = el.shadowRoot!.querySelector(".remaining")!;
+      const style = getComputedStyle(remainingEl);
+
+      expect(style.getPropertyValue("animation-play-state")).to.equal("running");
+
+      const { x, y } = getMiddleOfElement(el.shadowRoot!.querySelector(".notification")!);
+
+      await sendMouse({
+        type: "move",
+        position: [x, y],
+      });
+      expect(style.getPropertyValue("animation-play-state")).to.equal("paused");
+    });
+
+    it("should close automatically if duration is 0", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card duration="0"> Description </bl-notification-card>`
+      );
+
+      expect(el.closed).to.be.true;
+    });
+  });
+
+  describe("Permanent", () => {
+    it("should not render duration", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card permanent> Description </bl-notification-card>`
+      );
+
+      const remainingEl = el.shadowRoot!.querySelector(".remaining")!;
+
+      expect(remainingEl).to.not.exist;
+    });
+  });
+
+  describe("Actions", () => {
+    it("should implement action slots", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card>
+          <bl-button slot="primary-action"> Action Slot </bl-button>
+          <bl-button slot="secondary-action"> Action Secondary Slot </bl-button>
+        </bl-notification-card>`
+      );
+
+      const actionSlot = el.shadowRoot!.querySelector(
+        'slot[name="primary-action"]'
+      ) as HTMLSlotElement;
+      const actionElement = actionSlot?.assignedElements()[0] as HTMLElement;
+
+      expect(actionElement).to.exist;
+
+      const actionSecondarySlot = el.shadowRoot!.querySelector(
+        'slot[name="secondary-action"]'
+      ) as HTMLSlotElement;
+      const actionSecondaryElement = actionSecondarySlot?.assignedElements()[0] as HTMLElement;
+
+      expect(actionSecondaryElement).to.exist;
+    });
+  });
+
+  describe("Close", () => {
+    it("should dispatch close event when close button is clicked", async () => {
+      const el = await fixture<BlNotificationCard>(
+        html`<bl-notification-card> Description </bl-notification-card>`
+      );
+      const requestCloseStub = stub();
+      const closeStub = stub();
+
+      el.addEventListener("bl-notification-card-request-close", requestCloseStub);
+      el.addEventListener("bl-notification-card-close", closeStub);
+
+      el.shadowRoot!.querySelector("bl-alert")!.dispatchEvent(new CustomEvent("bl-close"));
+
+      expect(requestCloseStub).to.have.been.calledOnce;
+      expect(requestCloseStub.args[0][0].detail).to.deep.equal({
+        source: "close-button",
+      });
+      expect(closeStub).to.have.been.calledOnce;
+      expect(closeStub.args[0][0].detail).to.deep.equal({
+        source: "close-button",
+      });
+    });
+  });
+});
diff --git a/src/components/notification/card/bl-notification-card.ts b/src/components/notification/card/bl-notification-card.ts
new file mode 100644
index 00000000..d484a7fd
--- /dev/null
+++ b/src/components/notification/card/bl-notification-card.ts
@@ -0,0 +1,192 @@
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { event, EventDispatcher } from "../../../utilities/event";
+import { stringBooleanConverter } from "../../../utilities/string-boolean.converter";
+import BlAlert, { AlertVariant } from "../../alert/bl-alert";
+import { BaklavaIcon } from "../../icon/icon-list";
+import style from "./bl-notification-card.css";
+
+export enum CloseSource {
+  DurationEnded = "duration-ended",
+  CloseButton = "close-button",
+}
+
+export type NotificationVariant = "info" | "success" | "warning" | "error";
+
+const NOTIFICATION_VARIANT_ALERT_MAP: Readonly<Record<NotificationVariant, AlertVariant>> = {
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "danger",
+};
+
+/**
+ * @tag bl-notification-card
+ * @summary Baklava Notification Card component
+ */
+
+@customElement("bl-notification-card")
+export default class BlNotificationCard extends LitElement {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  /**
+   * Sets notification caption.
+   * @attr caption
+   * @type {string}
+   * @default ""
+   */
+  @property({ type: String })
+  caption = "";
+
+  /**
+   * Allows to customize notification icon.
+   * True value will display default icon.
+   * False value will hide icon.
+   * String value will display icon with specified name.
+   * @attr icon
+   * @type {boolean | BaklavaIcon}
+   * @default true
+   */
+  @property({ converter: stringBooleanConverter() })
+  icon?: boolean | BaklavaIcon;
+
+  /**
+   * Sets notification variant.
+   * @attr variant
+   * @type {NotificationVariant}
+   * @default "info"
+   */
+  @property({ reflect: true })
+  variant: NotificationVariant = "info";
+
+  /**
+   * Sets notification display duration in minutes.
+   * Has no effect if permanent is set to true.
+   * @attr closed
+   * @type {boolean}
+   * @default false
+   */
+  @property({ type: Number })
+  duration = 7;
+
+  /**
+   * Prevents notification from being closed automatically.
+   * @attr closed
+   * @type {boolean}
+   * @default false
+   */
+  @property({ type: Boolean })
+  permanent = false;
+
+  /**
+   * Indicates whether the notification is closed.
+   */
+  @property({ type: Boolean })
+  closed = false;
+
+  /**
+   * Dispatches close request event.
+   * The notification will not be closed automatically if the event is prevented.
+   */
+  @event("bl-notification-card-request-close") private onRequestClose: EventDispatcher<{
+    source: "duration-ended" | "close-button";
+  }>;
+
+  /**
+   * Dispatches close event.
+   * The notification will hidden after the event is dispatched and the closed property is set to true.
+   */
+  @event("bl-notification-card-close") private onClose: EventDispatcher<{
+    source: "duration-ended" | "close-button";
+  }>;
+
+  protected firstUpdated() {
+    this.setupDuration();
+  }
+
+  /**
+   * Sets up duration animation.
+   * The notification will dispatch a closed event after the animation ends.
+   */
+  private async setupDuration() {
+    if (this.permanent) {
+      return;
+    }
+
+    if (this.duration <= 0) {
+      this.close(CloseSource.DurationEnded);
+      return;
+    }
+
+    setTimeout(() => {
+      this.shadowRoot?.querySelector(".remaining")?.addEventListener(
+        "animationend",
+        () => {
+          this.close(CloseSource.DurationEnded);
+        },
+        { once: true }
+      );
+    }, 0);
+  }
+
+  private close(source: CloseSource) {
+    const requestCloseEvent = this.onRequestClose({ source }, { cancelable: true });
+
+    if (requestCloseEvent.defaultPrevented) {
+      return;
+    }
+
+    this.onClose({ source });
+    this.closed = true;
+  }
+
+  private handleClose(e: CustomEvent<boolean>) {
+    const target = e.target as BlAlert;
+
+    target.closed = false;
+
+    this.close(CloseSource.CloseButton);
+  }
+
+  private renderProgress() {
+    if (this.permanent) {
+      return null;
+    }
+
+    return html`
+      <div class="duration">
+        <div class="remaining" style="--duration: ${this.duration}s;"></div>
+      </div>
+    `;
+  }
+
+  render(): TemplateResult {
+    const { icon = true, variant = "info" } = this;
+
+    return html`
+      <bl-alert
+        class="notification"
+        caption="${ifDefined(this.caption)}"
+        icon=${icon}
+        variant=${ifDefined(NOTIFICATION_VARIANT_ALERT_MAP[variant])}
+        ?closed=${this.closed}
+        ?closable=${true}
+        @bl-close=${this.handleClose}
+      >
+        <slot></slot>
+        ${this.renderProgress()}
+        <slot name="primary-action" slot="action"></slot>
+        <slot name="secondary-action" slot="action-secondary"></slot>
+      </bl-alert>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "bl-notification-card": BlNotificationCard;
+  }
+}
diff --git a/src/components/tooltip/bl-tooltip.test.ts b/src/components/tooltip/bl-tooltip.test.ts
index 759301ce..92b62f0f 100644
--- a/src/components/tooltip/bl-tooltip.test.ts
+++ b/src/components/tooltip/bl-tooltip.test.ts
@@ -1,8 +1,9 @@
 import { assert, elementUpdated, expect, fixture, html, oneEvent } from "@open-wc/testing";
 import { sendKeys, sendMouse } from "@web/test-runner-commands";
+import { getMiddleOfElement } from "../../utilities/elements";
+import type typeOfBlPopover from "../popover/bl-popover";
 import BlTooltip from "./bl-tooltip";
 import type typeOfBlTooltip from "./bl-tooltip";
-import type typeOfBlPopover from "../popover/bl-popover";
 
 describe("bl-tooltip", () => {
   it("should be defined tooltip instance", () => {
@@ -111,7 +112,7 @@ describe("bl-tooltip", () => {
         ><button slot="tooltip-trigger">Test</button> Test Tooltip</bl-tooltip
       >`
     );
-    const tooltip = el.shadowRoot?.querySelector("bl-popover") as HTMLElement;
+    const tooltip = el.shadowRoot!.querySelector("bl-popover")!;
     const trigger = document.querySelector("button") as HTMLElement;
     const body = document.querySelector("body") as HTMLElement;
 
@@ -202,12 +203,3 @@ describe("bl-tooltip", () => {
     expect(el.visible).to.be.false;
   });
 });
-
-function getMiddleOfElement(element: Element) {
-  const { x, y, width, height } = element.getBoundingClientRect();
-
-  return {
-    x: Math.floor(x + window.pageXOffset + width / 2),
-    y: Math.floor(y + window.pageYOffset + height / 2),
-  };
-}
diff --git a/src/utilities/elements.ts b/src/utilities/elements.ts
new file mode 100644
index 00000000..8c7d2669
--- /dev/null
+++ b/src/utilities/elements.ts
@@ -0,0 +1,8 @@
+export function getMiddleOfElement(element: Element) {
+  const { x, y, width, height } = element.getBoundingClientRect();
+
+  return {
+    x: Math.floor(x + window.pageXOffset + width / 2),
+    y: Math.floor(y + window.pageYOffset + height / 2),
+  };
+}