diff --git a/apps/browser/src/platform/popup/layout/popup-layout.mdx b/apps/browser/src/platform/popup/layout/popup-layout.mdx
index aa11b4099a9..5723bef44b1 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.mdx
+++ b/apps/browser/src/platform/popup/layout/popup-layout.mdx
@@ -44,6 +44,9 @@ page looks nice when the extension is popped out.
- `above-scroll-area`
- When the page content overflows, this content will be "stuck" to the top of the page upon
scrolling.
+- `full-width-notice`
+ - Similar to `above-scroll-area`, this content will display before `above-scroll-area` without
+ container margin or padding.
- default
- Whatever content you want in `main`.
@@ -108,6 +111,30 @@ Common interactive elements to insert into the `end` slot are:
- "Add" button: this can be accomplished with the Button component and any custom functionality for
that particular page
+### Notice
+
+
+
+Common interactive elements to insert into the `full-width-notice` slot are:
+
+- `bit-banner`: shows a full-width notice
+
+Usage example:
+
+```html
+
+
+
+ This is an important note about these ciphers
+
+
+
+
+
+```
+
## Popup footer
Popup footer should be used when the page displays action buttons. It functions similarly to the
diff --git a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
index 11f2d34df50..cd467cecbd2 100644
--- a/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
+++ b/apps/browser/src/platform/popup/layout/popup-layout.stories.ts
@@ -11,6 +11,7 @@ import { SendService } from "@bitwarden/common/tools/send/services/send.service.
import {
AvatarModule,
BadgeModule,
+ BannerModule,
ButtonModule,
I18nMockService,
IconButtonModule,
@@ -125,6 +126,18 @@ class MockCurrentAccountComponent {}
})
class MockSearchComponent {}
+@Component({
+ selector: "mock-banner",
+ template: `
+
+ This is an important note about these ciphers
+
+ `,
+ standalone: true,
+ imports: [BannerModule],
+})
+class MockBannerComponent {}
+
@Component({
selector: "mock-vault-page",
template: `
@@ -298,6 +311,8 @@ export default {
CommonModule,
RouterModule,
ExtensionContainerComponent,
+ MockBannerComponent,
+ MockSearchComponent,
MockVaultSubpageComponent,
MockVaultPageComponent,
MockSendPageComponent,
@@ -517,6 +532,22 @@ export const TransparentHeader: Story = {
}),
};
+export const Notice: Story = {
+ render: (args) => ({
+ props: args,
+ template: /* HTML */ `
+
+
+
+
+
+
+
+
+ `,
+ }),
+};
+
export const WidthOptions: Story = {
render: (args) => ({
props: args,
diff --git a/apps/browser/src/platform/popup/layout/popup-page.component.html b/apps/browser/src/platform/popup/layout/popup-page.component.html
index 8eefc14ab55..ba9a108a504 100644
--- a/apps/browser/src/platform/popup/layout/popup-page.component.html
+++ b/apps/browser/src/platform/popup/layout/popup-page.component.html
@@ -1,5 +1,6 @@
+