diff --git a/packages/asc-web-components/bar-banner/index.js b/packages/asc-web-components/bar-banner/index.js
new file mode 100644
index 0000000000..adfc2cb9a4
--- /dev/null
+++ b/packages/asc-web-components/bar-banner/index.js
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+import { StyledBarBanner, StyledCrossIcon } from "./styled-bar-banner";
+
+const BarBanner = (props) => {
+  const { html } = props;
+
+  const [open, setOpen] = useState(true);
+
+  const onClose = () => setOpen(false);
+
+  return (
+    <StyledBarBanner open={open}>
+      {html ? (
+        <iframe
+          height="60px"
+          width="95%"
+          src={html}
+          frameBorder="0"
+          align="left"
+          scrolling="no"
+        >
+          test
+        </iframe>
+      ) : (
+        ""
+      )}
+      <div className="action" onClick={onClose}>
+        <StyledCrossIcon size="medium" />
+      </div>
+    </StyledBarBanner>
+  );
+};
+
+export default BarBanner;
diff --git a/packages/asc-web-components/bar-banner/styled-bar-banner.js b/packages/asc-web-components/bar-banner/styled-bar-banner.js
new file mode 100644
index 0000000000..9d4c0edd86
--- /dev/null
+++ b/packages/asc-web-components/bar-banner/styled-bar-banner.js
@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import CrossIcon from "../../../public/images/cross.react.svg";
+import commonIconsStyles from "../utils/common-icons-style";
+
+const StyledCrossIcon = styled(CrossIcon)`
+  ${commonIconsStyles}
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  path {
+    fill: #fff;
+  }
+`;
+
+const StyledBarBanner = styled.div`
+  background: #e6eb96;
+  width: 100%;
+  height: 100%;
+  display: ${(props) => (props.open ? "flex" : "none")};
+  justify-content: space-between;
+  align-items: flex-start;
+
+  .action {
+    padding: 4px;
+  }
+`;
+
+export { StyledBarBanner, StyledCrossIcon };