diff --git a/apps/kitchensink/images/top-banner/bg-mint-desktop.png b/apps/kitchensink/images/top-banner/bg-mint-desktop.png
new file mode 100644
index 0000000000..e022e5ea56
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-mint-desktop.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-mint-mobile.png b/apps/kitchensink/images/top-banner/bg-mint-mobile.png
new file mode 100644
index 0000000000..cf8f8ddf11
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-mint-mobile.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-pink-desktop.png b/apps/kitchensink/images/top-banner/bg-pink-desktop.png
new file mode 100644
index 0000000000..1f06a9cfac
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-pink-desktop.png differ
diff --git a/apps/kitchensink/images/top-banner/bg-pink-mobile.png b/apps/kitchensink/images/top-banner/bg-pink-mobile.png
new file mode 100644
index 0000000000..3ff346c9ad
Binary files /dev/null and b/apps/kitchensink/images/top-banner/bg-pink-mobile.png differ
diff --git a/apps/kitchensink/top-banner.html b/apps/kitchensink/top-banner.html
new file mode 100644
index 0000000000..826db00054
--- /dev/null
+++ b/apps/kitchensink/top-banner.html
@@ -0,0 +1,245 @@
+
+
+
+
+
+
+ @appwrite/kitchensink - user demo
+
+
+
+
+
+
+
+ {{> topNav}} {{> sideNav}}
+
+
+
+
+
+
+
+
+ Users
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
+ |
+
+ Name
+ |
+
+ E-Mail
+ |
+
+ Status
+ |
+
+ Joined
+ |
+
+
+
+
+
+
+ 
+
+ |
+
+ test
+ |
+
+ test@test.test
+ |
+
+ Unverified
+ |
+
+ April 14, 2022
+ |
+
+
+
+
+ 
+
+ |
+
+
+ Robin Hood
+ |
+
+ robin@notthingam.co
+ |
+
+ Unverified
+ |
+
+ April 13, 2022
+ |
+
+
+
+
+ 
+
+ |
+
+
+ Mark
+ |
+
+
+ mark@mark.mark
+ |
+
+
+ Unverified
+
+ |
+
+ April 11, 2022
+ |
+
+
+
+
+
+
+
+
Add Your First User To Get Started
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/kitchensink/vite.config.js b/apps/kitchensink/vite.config.js
index 7e1ac09ec7..2bfd2f6157 100644
--- a/apps/kitchensink/vite.config.js
+++ b/apps/kitchensink/vite.config.js
@@ -25,6 +25,7 @@ const config = {
coverFrame: new URL("./cover-frame.html", import.meta.url).pathname,
coverFrame2: new URL("./cover-frame-2.html", import.meta.url).pathname,
users: new URL("./users.html", import.meta.url).pathname,
+ topBanner: new URL("./top-banner.html", import.meta.url).pathname,
user: new URL("./user.html", import.meta.url).pathname,
functions: new URL("./functions.html", import.meta.url).pathname,
userSecurity: new URL("./userSecurity.html", import.meta.url).pathname,
diff --git a/packages/ui/src/7-components/_index.scss b/packages/ui/src/7-components/_index.scss
index e911e31eaf..1c8b6e6dc5 100644
--- a/packages/ui/src/7-components/_index.scss
+++ b/packages/ui/src/7-components/_index.scss
@@ -20,10 +20,11 @@
@forward "toggle-button";
@forward "clickable-list";
@forward "progress-bar";
-
@forward "top-cover";
@forward "code-panel";
+@forward "top-banner";
+
/* main parts */
@forward "main-header";
@forward "breadcrumbs";
diff --git a/packages/ui/src/7-components/_top-banner.scss b/packages/ui/src/7-components/_top-banner.scss
new file mode 100644
index 0000000000..da58aa9f70
--- /dev/null
+++ b/packages/ui/src/7-components/_top-banner.scss
@@ -0,0 +1,29 @@
+@use '../abstract' as *;
+.top-banner {
+ --top-banner-mobile-bg-1-url: url("/images/top-banner/bg-pink-mobile.png");
+ --top-banner-mobile-bg-2-url: url("/images/top-banner/bg-mint-mobile.png");
+ --top-banner-desktop-bg-1-url: url("/images/top-banner/bg-pink-desktop.png");
+ --top-banner-desktop-bg-2-url: url("/images/top-banner/bg-mint-desktop.png");
+
+ position:relative; display:flex; justify-content:center;
+ padding-block:pxToRem(5); padding-inline:pxToRem(12);
+ background: var(--top-banner-desktop-bg-1-url) no-repeat left center,
+ var(--top-banner-desktop-bg-2-url) no-repeat right -330px;
+ //background: linear-gradient(94deg, rgba(253, 54, 110, 0.00) 0%, rgba(253, 54, 110, 0.50) 50.82%, rgba(253, 54, 110, 0.00) 100%);
+ &-content { line-height:pxToRem(50); transition:var(--transition); }
+ &-button { position:absolute; inset-block:0; inset-inline-end:pxToRem(12); }
+
+ [data-banner-hidden] & {
+ display: none;
+ }
+ @media #{$break1} {
+ inline-size:100%; padding:pxToRem(16);
+ background: var(--top-banner-mobile-bg-1-url) no-repeat left bottom,
+ var(--top-banner-mobile-bg-2-url) no-repeat right top;
+ &-content { display:flex; flex-direction:column; inline-size:100%; line-height:1.5; transition:var(--transition); }
+ &-button {
+ position:static; line-height:1; align-self:end; order:-1;
+ margin-block-start:-4px; margin-inline-end:-5px; margin-block-end:pxToRem(8);
+ }
+ }
+}
\ No newline at end of file
diff --git a/packages/ui/src/8-grids/_grid-with-side.scss b/packages/ui/src/8-grids/_grid-with-side.scss
index 396ee6df12..13200d5e2f 100644
--- a/packages/ui/src/8-grids/_grid-with-side.scss
+++ b/packages/ui/src/8-grids/_grid-with-side.scss
@@ -4,6 +4,7 @@
--p-side-size: #{pxToRem(200)};
> {
:where(.alert) { grid-area:alert; }
+ :where(.top-banner) { grid-area:alert; }
:where(.main-header) { grid-area:header; }
:where(.main-side) { grid-area:side; }
:where(.main-content) { grid-area:main; }