diff --git a/packages/fiori/cypress/specs/Banner.cy.tsx b/packages/fiori/cypress/specs/Banner.cy.tsx
new file mode 100644
index 000000000000..7373a45cd46d
--- /dev/null
+++ b/packages/fiori/cypress/specs/Banner.cy.tsx
@@ -0,0 +1,280 @@
+import Banner from "../../src/Banner.js";
+
+describe("Banner", () => {
+	describe("Rendering", () => {
+		it("renders with default configuration", () => {
+			cy.mount(
+				<Banner salutationText="Hello, John"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-root")
+				.should("exist");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-salutation")
+				.should("have.text", "Hello, John");
+		});
+
+		it("renders salutation text", () => {
+			cy.mount(
+				<Banner salutationText="Good Morning, Jane"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-salutation")
+				.should("have.text", "Good Morning, Jane");
+		});
+
+		it("renders date text when provided", () => {
+			cy.mount(
+				<Banner salutationText="Hello, John" dateText="March 6, 2026"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-date")
+				.should("have.text", "March 6, 2026");
+		});
+
+		it("does not render date element when dateText is not set", () => {
+			cy.mount(
+				<Banner salutationText="Hello, John"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-date")
+				.should("not.exist");
+		});
+
+		it("does not render salutation element when salutationText is not set", () => {
+			cy.mount(
+				<Banner></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-salutation")
+				.should("not.exist");
+		});
+	});
+
+	describe("Layout", () => {
+		it("applies FullWidth layout by default", () => {
+			cy.mount(
+				<Banner salutationText="Hello, John">
+					<div slot="startContent">Start</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-layout-FullWidth")
+				.should("exist");
+		});
+
+		it("applies HalfWidth layout", () => {
+			cy.mount(
+				<Banner salutationText="Hello" layout="HalfWidth">
+					<div slot="startContent">Start</div>
+					<div slot="endContent">End</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-layout-HalfWidth")
+				.should("exist");
+		});
+
+		it("applies TwoThirds layout", () => {
+			cy.mount(
+				<Banner salutationText="Hello" layout="TwoThirds">
+					<div slot="startContent">Start</div>
+					<div slot="endContent">End</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-layout-TwoThirds")
+				.should("exist");
+		});
+	});
+
+	describe("Slots", () => {
+		it("renders startContent slot", () => {
+			cy.mount(
+				<Banner salutationText="Hello">
+					<div slot="startContent" id="start-block">Start Content</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.find("#start-block")
+				.should("exist")
+				.and("have.text", "Start Content");
+		});
+
+		it("renders endContent slot", () => {
+			cy.mount(
+				<Banner salutationText="Hello">
+					<div slot="endContent" id="end-block">End Content</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.find("#end-block")
+				.should("exist")
+				.and("have.text", "End Content");
+		});
+
+		it("renders default slot content", () => {
+			cy.mount(
+				<Banner salutationText="Hello">
+					<div id="default-content">Default Content</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.find("#default-content")
+				.should("exist")
+				.and("have.text", "Default Content");
+		});
+
+		it("renders both startContent and endContent in HalfWidth layout", () => {
+			cy.mount(
+				<Banner salutationText="Hello" layout="HalfWidth">
+					<div slot="startContent" id="start">Left</div>
+					<div slot="endContent" id="end">Right</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.find("#start")
+				.should("exist");
+
+			cy.get("[ui5-banner]")
+				.find("#end")
+				.should("exist");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-block-start")
+				.should("exist");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-block-end")
+				.should("exist");
+		});
+	});
+
+	describe("Background Image", () => {
+		it("applies background image when set", () => {
+			cy.mount(
+				<Banner
+					salutationText="Hello"
+					backgroundImage="https://example.com/image.jpg"
+				></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-root")
+				.should("have.class", "ui5-banner--has-bg-image")
+				.and("have.attr", "style")
+				.and("include", "background-image");
+		});
+
+		it("does not apply background image class when not set", () => {
+			cy.mount(
+				<Banner salutationText="Hello"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-root")
+				.should("not.have.class", "ui5-banner--has-bg-image");
+		});
+	});
+
+	describe("Height constraints", () => {
+		it("respects minimum height", () => {
+			cy.mount(
+				<Banner salutationText="Hello"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-root")
+				.invoke("css", "min-height")
+				.should("equal", "76px"); // 4.75rem = 76px at default font-size
+		});
+	});
+
+	describe("Properties", () => {
+		it("updates salutationText dynamically", () => {
+			cy.mount(
+				<Banner salutationText="Hello, John"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-salutation")
+				.should("have.text", "Hello, John");
+
+			cy.get("[ui5-banner]")
+				.invoke("prop", "salutationText", "Hello, Jane");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-salutation")
+				.should("have.text", "Hello, Jane");
+		});
+
+		it("updates dateText dynamically", () => {
+			cy.mount(
+				<Banner salutationText="Hello" dateText="March 6"></Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-date")
+				.should("have.text", "March 6");
+
+			cy.get("[ui5-banner]")
+				.invoke("prop", "dateText", "March 7");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-date")
+				.should("have.text", "March 7");
+		});
+
+		it("updates layout dynamically", () => {
+			cy.mount(
+				<Banner salutationText="Hello" layout="FullWidth">
+					<div slot="startContent">Start</div>
+				</Banner>
+			);
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-layout-FullWidth")
+				.should("exist");
+
+			cy.get("[ui5-banner]")
+				.invoke("prop", "layout", "HalfWidth");
+
+			cy.get("[ui5-banner]")
+				.shadow()
+				.find(".ui5-banner-layout-HalfWidth")
+				.should("exist");
+		});
+	});
+});
diff --git a/packages/fiori/src/Banner.ts b/packages/fiori/src/Banner.ts
new file mode 100644
index 000000000000..a5abfed1b06e
--- /dev/null
+++ b/packages/fiori/src/Banner.ts
@@ -0,0 +1,190 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type { Slot, DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+
+import type BannerLayout from "./types/BannerLayout.js";
+
+// Template
+import BannerTemplate from "./BannerTemplate.js";
+
+// Styles
+import BannerCss from "./generated/themes/Banner.css.js";
+
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-banner` is the main visual element that unifies all product homepages.
+ * It is a flexible card designed to accommodate various elements depending on product needs.
+ * The banner is a mandatory out-of-the-box element for product landing pages.
+ *
+ * ### Structure
+ *
+ * The Banner consists of the following building blocks:
+ *
+ * - **Banner Canvas** - the visual base with a background color, optional background image and shadow.
+ * - **Date** (optional) - contextual text at the top, typically showing the current date.
+ * - **Salutation** (mandatory) - the main greeting header below the date, e.g. "Hello, John".
+ * - **Free Blocks** (optional) - customizable content areas that can contain KPI cards, search components, text, buttons, etc.
+ *
+ * The banner scrolls away below the shell navigation when the user scrolls down the page. It is not sticky.
+ *
+ * ### Usage
+ *
+ * Use the `ui5-banner` at the top of a product homepage to provide a personalized greeting
+ * and quick access to key information or actions.
+ *
+ * The banner itself is non-interactive. However, interactive elements such as buttons, cards,
+ * or search fields can be placed inside the free content slots and will follow their own
+ * interactive states.
+ *
+ * ### Responsive Behavior
+ *
+ * The banner adapts to different screen sizes with responsive horizontal padding:
+ * - **XS/S** (up to 599px): 1.5rem padding
+ * - **M/L** (600px - 1439px): 2rem horizontal padding
+ * - **XL/MAX** (1440px - 2559px): 3rem horizontal padding
+ * - **4K** (2560px+): 4rem horizontal padding
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents-fiori/dist/Banner.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ * @since 2.12.0
+ * @csspart canvas - Used to style the banner canvas container
+ * @csspart content - Used to style the content area of the banner
+ */
+@customElement({
+	tag: "ui5-banner",
+	renderer: jsxRenderer,
+	styles: BannerCss,
+	template: BannerTemplate,
+})
+class Banner extends UI5Element {
+	/**
+	 * Defines the salutation text displayed in the banner.
+	 *
+	 * This is the main greeting header, typically a personalized message
+	 * such as "Hello, John".
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	salutationText?: string;
+
+	/**
+	 * Defines the date or secondary text displayed above the salutation.
+	 *
+	 * Can be used to show the current date, a status message,
+	 * or any other relevant contextual information.
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	dateText?: string;
+
+	/**
+	 * Defines the layout of the free content blocks inside the banner.
+	 *
+	 * Available options are:
+	 * - `FullWidth` - Content spans the full width below the salutation.
+	 * - `HalfWidth` - Content is split 50/50 side by side.
+	 * - `TwoThirds` - First block takes 2/3 width, second takes 1/3.
+	 *
+	 * @default "FullWidth"
+	 * @public
+	 */
+	@property()
+	layout: `${BannerLayout}` = "FullWidth";
+
+	/**
+	 * Defines the URL of the background image for the banner canvas.
+	 *
+	 * When set, the image is displayed as a cover background on the banner.
+	 *
+	 * @default undefined
+	 * @public
+	 */
+	@property()
+	backgroundImage?: string;
+
+	/**
+	 * Defines the first free content block of the banner.
+	 *
+	 * This slot can contain various content types defined by the product,
+	 * including KPI cards, search components, text, and buttons.
+	 *
+	 * @public
+	 */
+	@slot()
+	startContent!: Slot<HTMLElement>;
+
+	/**
+	 * Defines the second free content block of the banner.
+	 *
+	 * Used alongside `startContent` in split layouts (`HalfWidth`, `TwoThirds`).
+	 * Can contain cards, buttons, and other interactive elements.
+	 *
+	 * @public
+	 */
+	@slot()
+	endContent!: Slot<HTMLElement>;
+
+	/**
+	 * Defines the default content of the banner.
+	 *
+	 * Used for additional content that appears below the salutation
+	 * and date area, spanning the full width of the banner.
+	 *
+	 * @public
+	 */
+	@slot({ type: HTMLElement, "default": true })
+	content!: DefaultSlot<HTMLElement>;
+
+	/**
+	 * Defines action buttons displayed to the right of the salutation and date area.
+	 *
+	 * Can contain buttons, links, or other interactive elements that provide
+	 * quick access to relevant actions directly from the banner header.
+	 *
+	 * @public
+	 */
+	@slot()
+	headerActions!: Slot<HTMLElement>;
+
+	get _backgroundImageStyle(): Record<string, string> | undefined {
+		if (this.backgroundImage) {
+			return { "--_ui5_banner_user_image": `url('${this.backgroundImage}')` };
+		}
+		return undefined;
+	}
+
+	get _hasContent() {
+		return this.startContent.length > 0 || this.endContent.length > 0 || this.content.length > 0;
+	}
+
+	get _hasStartContent() {
+		return this.startContent.length > 0;
+	}
+
+	get _hasEndContent() {
+		return this.endContent.length > 0;
+	}
+
+	get _hasHeaderActions() {
+		return this.headerActions.length > 0;
+	}
+}
+
+Banner.define();
+
+export default Banner;
diff --git a/packages/fiori/src/BannerTemplate.tsx b/packages/fiori/src/BannerTemplate.tsx
new file mode 100644
index 000000000000..fd41ff65b14b
--- /dev/null
+++ b/packages/fiori/src/BannerTemplate.tsx
@@ -0,0 +1,57 @@
+import type Banner from "./Banner.js";
+
+export default function BannerTemplate(this: Banner) {
+	return (
+		<div
+			class={{
+				"ui5-banner-root": true,
+				"ui5-banner--has-bg-image": !!this.backgroundImage,
+			}}
+			part="canvas"
+			style={this._backgroundImageStyle}
+		>
+			<div class="ui5-banner-content" part="content">
+				<div class="ui5-banner-header">
+					<div class="ui5-banner-header-text">
+						{this.dateText &&
+							<div class="ui5-banner-date">
+								{this.dateText}
+							</div>
+						}
+
+						{this.salutationText &&
+							<div class="ui5-banner-salutation">
+								{this.salutationText}
+							</div>
+						}
+					</div>
+
+					<div class="ui5-banner-header-actions">
+						<slot name="headerActions"></slot>
+					</div>
+				</div>
+
+				{this._hasContent &&
+					<div class={{
+						"ui5-banner-blocks": true,
+						[`ui5-banner-layout-${this.layout}`]: true,
+					}}>
+						{this._hasStartContent &&
+							<div class="ui5-banner-block ui5-banner-block-start">
+								<slot name="startContent"></slot>
+							</div>
+						}
+
+						{this._hasEndContent &&
+							<div class="ui5-banner-block ui5-banner-block-end">
+								<slot name="endContent"></slot>
+							</div>
+						}
+
+						<slot></slot>
+					</div>
+				}
+			</div>
+		</div>
+	);
+}
diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts
index 9ccfbb26b1af..c3a71ce31ba8 100644
--- a/packages/fiori/src/bundle.esm.ts
+++ b/packages/fiori/src/bundle.esm.ts
@@ -9,6 +9,7 @@ import "./Assets.js";
 import "./illustrations/AllIllustrations.js";
 
 // FIORI components
+import Banner from "./Banner.js";
 import BarcodeScannerDialog from "./BarcodeScannerDialog.js";
 import DynamicPage from "./DynamicPage.js";
 import DynamicPageHeader from "./DynamicPageHeader.js";
diff --git a/packages/fiori/src/themes/Banner.css b/packages/fiori/src/themes/Banner.css
new file mode 100644
index 000000000000..044d50b8b700
--- /dev/null
+++ b/packages/fiori/src/themes/Banner.css
@@ -0,0 +1,153 @@
+/* Banner Component Styles */
+
+:host(:not([hidden])) {
+	display: block;
+	width: 100%;
+	container-type: inline-size;
+}
+
+/* Banner Canvas */
+.ui5-banner-root {
+	box-sizing: border-box;
+	min-height: 4.75rem;
+	max-height: 24rem;
+	border-radius: var(--_ui5_banner_border_radius);
+	background-color: var(--_ui5_banner_background);
+	background-image: var(--_ui5_banner_background_image);
+	background-repeat: no-repeat;
+	background-position: top;
+    background-size: cover;
+	box-shadow: var(--_ui5_banner_box_shadow);
+	border: var(--_ui5_banner_border);
+	overflow: hidden;
+	position: relative;
+}
+
+/* Content area */
+.ui5-banner-content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: 1rem;
+	box-sizing: border-box;
+	padding: 1.5rem;
+}
+
+/* Header (Salutation + Date) */
+.ui5-banner-header {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+}
+
+.ui5-banner-header-text {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	min-width: 0;
+}
+
+.ui5-banner-header-actions {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex-shrink: 0;
+	/* Override button color tokens so Transparent-design buttons are readable on the banner background */
+	--sapButton_Lite_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Hover_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Active_TextColor: var(--_ui5_banner_text_color);
+	--sapButton_Lite_Hover_Background: color-mix(in srgb, var(--_ui5_banner_text_color) 15%, transparent);
+	--sapButton_Lite_Active_Background: color-mix(in srgb, var(--_ui5_banner_text_color) 25%, transparent);
+	--sapButton_IconColor: var(--_ui5_banner_text_color);
+}
+
+/* Gradient overlay when a background image is present */
+.ui5-banner--has-bg-image {
+	background-image: linear-gradient(to right, var(--_ui5_banner_background) 0%, color-mix(in srgb, var(--_ui5_banner_background) 60%, transparent) 40%, transparent 70%), var(--_ui5_banner_user_image);
+}
+
+.ui5-banner-salutation {
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader2Size);
+	font-weight: bold;
+	color: var(--_ui5_banner_text_color);
+	line-height: 1.4;
+}
+
+.ui5-banner-date {
+	font-family: var(--sapFontFamily);
+	font-size: var(--sapFontSize);
+	color: var(--_ui5_banner_text_color);
+	line-height: 1.4;
+}
+
+/* Free content blocks area */
+.ui5-banner-blocks {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+	flex: 1;
+	min-height: 0;
+}
+
+.ui5-banner-block {
+	box-sizing: border-box;
+	min-width: 0;
+}
+
+/* Layout: FullWidth - blocks take full width */
+.ui5-banner-layout-FullWidth .ui5-banner-block {
+	flex: 1 1 100%;
+}
+
+/* Layout: HalfWidth - 50/50 split */
+.ui5-banner-layout-HalfWidth .ui5-banner-block {
+	flex: 1 1 calc(50% - 0.5rem);
+}
+
+/* Layout: TwoThirds - 2/3 + 1/3 split */
+.ui5-banner-layout-TwoThirds .ui5-banner-block-start {
+	flex: 2 1 calc(66.66% - 0.5rem);
+}
+
+.ui5-banner-layout-TwoThirds .ui5-banner-block-end {
+	flex: 1 1 calc(33.33% - 0.5rem);
+}
+
+/*** Responsive Paddings ***/
+
+/* M Size (600px - 1439px) */
+@container (min-width: 600px) and (max-width: 1439px) {
+	.ui5-banner-content {
+		padding: 1.5rem 2rem;
+	}
+}
+
+/* XL / MAX Size (1440px - 2559px) */
+@container (min-width: 1440px) and (max-width: 2559px) {
+	.ui5-banner-content {
+		padding: 1.5rem 3rem;
+	}
+}
+
+/* 4K Size (2560px+) */
+@container (min-width: 2560px) {
+	.ui5-banner-content {
+		padding: 1.5rem 4rem;
+	}
+}
+
+/* Stack blocks vertically on small screens */
+@container (max-width: 599px) {
+	.ui5-banner-blocks {
+		flex-direction: column;
+	}
+
+	.ui5-banner-layout-HalfWidth .ui5-banner-block,
+	.ui5-banner-layout-TwoThirds .ui5-banner-block-start,
+	.ui5-banner-layout-TwoThirds .ui5-banner-block-end {
+		flex: 1 1 100%;
+	}
+}
diff --git a/packages/fiori/src/themes/base/Banner-parameters.css b/packages/fiori/src/themes/base/Banner-parameters.css
new file mode 100644
index 000000000000..f311d7f7d82a
--- /dev/null
+++ b/packages/fiori/src/themes/base/Banner-parameters.css
@@ -0,0 +1,11 @@
+:host {
+	--_ui5_banner_background: var(--sapShell_Banner_Background, var(--sapShellColor));
+	--_ui5_banner_text_color: var(--sapShell_Banner_TextColor, var(--sapShell_TextColor));
+	--_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
+	--_ui5_banner_border: 0.0625rem solid var(--sapTile_BorderColor);
+	--_ui5_banner_box_shadow: var(--sapContent_Shadow0);
+	--_ui5_banner_background_image:
+    linear-gradient(135deg, transparent 0, transparent 50%, #0000003d 50%, #1f1f1f34 75%, #6666663d 80%),
+    /* left anvil, below the right anvil */
+    linear-gradient(90deg, #0003 15%, #6660 60%);
+}
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index 4b9786a9cf35..dd58d818dddc 100644
--- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 2c3f6217b00c..2d206505c3dd 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 2d01a0c072d1..8d2d07ce7d1b 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 065f059b3581..dd9e50ac10d3 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon/Banner-parameters.css b/packages/fiori/src/themes/sap_horizon/Banner-parameters.css
new file mode 100644
index 000000000000..14e14b8002ff
--- /dev/null
+++ b/packages/fiori/src/themes/sap_horizon/Banner-parameters.css
@@ -0,0 +1,4 @@
+:host {
+	--_ui5_banner_background: var(--sapShell_Banner_Background, var(--sapHighlightColor));
+	--_ui5_banner_text_color: var(--sapShell_Banner_TextColor, var(--sapContent_ContrastTextColor));
+}
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index 538e15d26851..ee5a5714bf27 100644
--- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -1,3 +1,5 @@
+@import "../base/Banner-parameters.css";
+@import "./Banner-parameters.css";
 @import "../base/rtl-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
index acd952d5c2a8..93e4c3d74bfb 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
index c6621d9b5d6a..fb9d1c4b39ed 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
index 7c34f4b60abd..0819ff5c55ab 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -1,3 +1,5 @@
+@import "../base/Banner-parameters.css";
+@import "../sap_horizon/Banner-parameters.css";
 @import "../base/FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
index 7f8da0756e48..94071d30bf90 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
index 3366cfe13917..4cb199256b56 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
index fca7aa1b3e23..c6d286534cf3 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
index bbc555b5dad1..e5d0ab45b3f8 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,3 +1,4 @@
+@import "../base/Banner-parameters.css";
 @import "./FlexibleColumnLayout-parameters.css";
 @import "../base/IllustratedMessage-parameters.css";
 @import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/types/BannerLayout.ts b/packages/fiori/src/types/BannerLayout.ts
new file mode 100644
index 000000000000..b421807b2c1e
--- /dev/null
+++ b/packages/fiori/src/types/BannerLayout.ts
@@ -0,0 +1,31 @@
+/**
+ * Available Banner layout options.
+ *
+ * Defines how the free content blocks are arranged within the banner.
+ * @public
+ * @since 2.12.0
+ */
+enum BannerLayout {
+	/**
+	 * Full width bottom-half free slot layout.
+	 * The free content blocks span the entire width below the salutation.
+	 * @public
+	 */
+	FullWidth = "FullWidth",
+
+	/**
+	 * 50/50 split layout.
+	 * The free content blocks are split equally side by side.
+	 * @public
+	 */
+	HalfWidth = "HalfWidth",
+
+	/**
+	 * 2/3 wide bottom-half layout.
+	 * The first free block takes 2/3 width, the second takes 1/3.
+	 * @public
+	 */
+	TwoThirds = "TwoThirds",
+}
+
+export default BannerLayout;
diff --git a/packages/fiori/test/pages/Banner.html b/packages/fiori/test/pages/Banner.html
new file mode 100644
index 000000000000..981ced6cb1e1
--- /dev/null
+++ b/packages/fiori/test/pages/Banner.html
@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Banner</title>
+
+	<script src="%VITE_BUNDLE_PATH%" type="module"></script>
+
+	<link rel="stylesheet" type="text/css" href="./styles/Banner.css">
+</head>
+
+<body>
+	<div class="showcase">
+
+		<!-- ====================================== -->
+		<!-- 1. Basic Banner: Salutation Only       -->
+		<!-- ====================================== -->
+		<section>
+			<h2>1. Basic Banner (Salutation Only)</h2>
+			<p>The simplest banner with only the mandatory salutation text.</p>
+
+			<ui5-banner id="banner-basic"
+				salutation-text="Hello, John">
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 2. Banner with Date                    -->
+		<!-- ====================================== -->
+		<section>
+			<h2>2. Banner with Date</h2>
+			<p>A banner combining salutation and date text.</p>
+
+			<ui5-banner id="banner-date"
+				salutation-text="Good Morning, Jane"
+				date-text="Thursday, March 6, 2026">
+				<ui5-card slot="headerActions" style="width: 300px;">
+						<ui5-card-header slot="header" title-text="Avg. Response" subtitle-text="Time"></ui5-card-header>
+						<div style="padding: 0.75rem; text-align: end; font-size: 1.5rem; font-weight: bold;">1.4h</div>
+					</ui5-card>
+					<div slot="startContent" style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+					<ui5-button icon="create">New Request</ui5-button>
+					<ui5-button icon="document" design="Default">Create Report</ui5-button>
+					<ui5-button icon="email" design="Default">Send Message</ui5-button>
+				</div>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 3. FullWidth Layout with Content       -->
+		<!-- ====================================== -->
+		<section>
+			<h2>3. FullWidth Layout</h2>
+			<p>Banner with a full-width search field below the salutation.</p>
+
+			<ui5-banner id="banner-fullwidth"
+				salutation-text="Welcome back, Alex"
+				date-text="Thursday, March 6, 2026"
+				layout="FullWidth">
+				<ui5-input slot="startContent"
+					placeholder="Search products, documents, reports..."
+					style="width: 100%;">
+				</ui5-input>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 4. HalfWidth Layout (50/50 Split)      -->
+		<!-- ====================================== -->
+		<section>
+			<h2>4. HalfWidth Layout (50/50 Split)</h2>
+			<p>Two KPI cards side by side in a 50/50 layout.</p>
+
+			<ui5-banner id="banner-half"
+				salutation-text="Hello, Maria"
+				date-text="Thursday, March 6, 2026"
+				layout="HalfWidth">
+
+				<div slot="startContent" class="kpi-card">
+					<span class="kpi-label">Open Orders</span>
+					<span class="kpi-value">1,247</span>
+					<span class="kpi-trend">▲ 12% vs last month</span>
+				</div>
+
+				<div slot="endContent" class="kpi-card">
+					<span class="kpi-label">Revenue YTD</span>
+					<span class="kpi-value">€4.2M</span>
+					<span class="kpi-trend negative">▼ 3% vs target</span>
+				</div>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 5. TwoThirds Layout (2/3 + 1/3)       -->
+		<!-- ====================================== -->
+		<section>
+			<h2>5. TwoThirds Layout (2/3 + 1/3)</h2>
+			<p>Primary KPI card taking 2/3 of the width with a secondary card at 1/3.</p>
+
+			<ui5-banner id="banner-twothirds"
+				salutation-text="Good Afternoon, Thomas"
+				date-text="Thursday, March 6, 2026"
+				layout="TwoThirds">
+
+				<div slot="startContent" class="kpi-card">
+					<span class="kpi-label">Pipeline Overview</span>
+					<span class="kpi-value">€12.8M</span>
+					<span class="kpi-trend">▲ 8% quarter over quarter</span>
+					<div style="margin-top: 0.5rem;">
+						<ui5-button design="Emphasized">View Details</ui5-button>
+						<ui5-button design="Transparent">Export</ui5-button>
+					</div>
+				</div>
+
+				<div slot="endContent" class="kpi-card">
+					<span class="kpi-label">Tasks Due Today</span>
+					<span class="kpi-value">7</span>
+					<span class="kpi-trend negative">▼ 2 overdue</span>
+				</div>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 6. Banner with Background Image        -->
+		<!-- ====================================== -->
+		<section>
+			<h2>6. Banner with Background Image</h2>
+			<p>A banner with a custom background image applied to the canvas.</p>
+
+			<ui5-banner id="banner-bg"
+				salutation-text="Welcome, Sarah"
+				date-text="Thursday, March 6, 2026"
+				background-image="https://sdk.openui5.org/test-resources/sap/uxap/images/headerImg.jpg">
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 7. Banner with Interactive Elements    -->
+		<!-- ====================================== -->
+		<section>
+			<h2>7. Banner with Interactive Elements</h2>
+			<p>The banner itself is non-interactive, but slotted content like buttons and cards follow their own interactive states.</p>
+
+			<ui5-banner background-image="https://cdn.wallpapersafari.com/15/68/KugrJZ.jpg" id="banner-interactive"
+				salutation-text="Hello, David"
+				date-text="Thursday, March 6, 2026"
+				layout="HalfWidth">
+
+				<ui5-card slot="startContent">
+					<ui5-card-header
+						slot="header"
+						title-text="Quick Actions"
+						subtitle-text="Frequently used">
+					</ui5-card-header>
+					<div style="padding: 1rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
+						<ui5-button icon="create" design="Default">New Order</ui5-button>
+						<ui5-button icon="document" design="Default">Create Report</ui5-button>
+						<ui5-button icon="email" design="Default">Send Message</ui5-button>
+					</div>
+				</ui5-card>
+
+				<ui5-card slot="endContent">
+					<ui5-card-header
+						slot="header"
+						title-text="Recent Activity"
+						subtitle-text="Last 24 hours">
+					</ui5-card-header>
+					<ui5-list>
+						<ui5-li description="2 hours ago" icon="sales-order">Order #4821 approved</ui5-li>
+						<ui5-li description="5 hours ago" icon="shipping-status">Shipment dispatched</ui5-li>
+					</ui5-list>
+				</ui5-card>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 8. Scroll-Away Behavior Demo           -->
+		<!-- ====================================== -->
+		<section>
+			<h2>8. Scroll-Away Behavior</h2>
+			<p>The banner scrolls away with the page content. It is not sticky. Scroll the container below to see the behavior.</p>
+
+			<div class="scroll-container">
+				<ui5-banner id="banner-scroll"
+					salutation-text="Hello, Lisa"
+					date-text="Thursday, March 6, 2026"
+					layout="FullWidth">
+					<div slot="startContent" class="kpi-card">
+						<span class="kpi-label">Notifications</span>
+						<span class="kpi-value">23</span>
+					</div>
+				</ui5-banner>
+
+				<div class="filler-content">
+					<p>↓ Scroll down to see the banner scroll away ↓</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+					<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+				</div>
+			</div>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 9. Buttons and Cards                   -->
+		<!-- ====================================== -->
+		<section>
+			<h2>9. Buttons and Cards</h2>
+			<p>The start slot contains 3 action buttons; the end slot contains 4 summary cards.</p>
+
+			<ui5-banner id="banner-buttons-cards"
+				salutation-text="Hello, Emma"
+				date-text="Thursday, March 12, 2026"
+				layout="FullWidth">
+
+				<div slot="startContent" style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+					<ui5-button icon="create">New Request</ui5-button>
+					<ui5-button icon="document" design="Default">Create Report</ui5-button>
+					<ui5-button icon="email" design="Default">Send Message</ui5-button>
+				</div>
+
+				<div slot="endContent" style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem;">
+					<ui5-card>
+						<ui5-card-header slot="header" title-text="Open Tickets" subtitle-text="Support"></ui5-card-header>
+						<div style="padding: 0.75rem; color: red; text-align: start; font-size: 1.5rem; font-weight: bold;">42</div>
+					</ui5-card>
+					<ui5-card>
+						<ui5-card-header slot="header" title-text="Resolved" subtitle-text="This week"></ui5-card-header>
+						<div style="padding: 0.75rem; color: green; text-align: start; font-size: 1.5rem; font-weight: bold;">118</div>
+					</ui5-card>
+					<ui5-card>
+						<ui5-card-header slot="header" title-text="Avg. Response" subtitle-text="Time"></ui5-card-header>
+						<div style="padding: 0.75rem; text-align: end; font-size: 1.5rem; font-weight: bold;">1.4h</div>
+					</ui5-card>
+				</div>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 10. Interactive Controls               -->
+		<!-- ====================================== -->
+		<section>
+			<h2>10. Interactive Controls</h2>
+			<p>All banner options can be toggled on/off. The salutation is mandatory and cannot be hidden.</p>
+
+			<div class="controls-panel">
+				<div class="controls-row">
+					<span class="controls-label">Toggle Options:</span>
+					<label class="toggle-label"><input type="checkbox" id="chk-date" checked> Date Text</label>
+					<label class="toggle-label"><input type="checkbox" id="chk-bg"> Background Image</label>
+					<label class="toggle-label"><input type="checkbox" id="chk-header-actions" checked> Header Actions</label>
+					<label class="toggle-label"><input type="checkbox" id="chk-start" checked> Start Content</label>
+					<label class="toggle-label"><input type="checkbox" id="chk-end" checked> End Content</label>
+				</div>
+				<div class="controls-row">
+					<span class="controls-label">Salutation:</span>
+					<ui5-button id="btn-change-salutation">Cycle Name</ui5-button>
+					<span class="controls-separator">|</span>
+					<span class="controls-label">Layout:</span>
+					<ui5-button id="btn-layout-full">FullWidth</ui5-button>
+					<ui5-button id="btn-layout-half">HalfWidth</ui5-button>
+					<ui5-button id="btn-layout-twothirds">TwoThirds</ui5-button>
+				</div>
+			</div>
+
+			<ui5-banner id="banner-dynamic"
+				salutation-text="Hello, User"
+				date-text="Thursday, March 6, 2026"
+				layout="FullWidth">
+
+				<ui5-button slot="headerActions" icon="settings">Settings</ui5-button>
+				<ui5-button slot="headerActions" icon="bell">Notifications</ui5-button>
+
+				<div slot="startContent" class="kpi-card">
+					<span class="kpi-label">Start Block</span>
+					<span class="kpi-value">100</span>
+				</div>
+				<div slot="endContent" class="kpi-card">
+					<span class="kpi-label">End Block</span>
+					<span class="kpi-value">200</span>
+				</div>
+			</ui5-banner>
+		</section>
+
+		<!-- ====================================== -->
+		<!-- 11. SuccessFactors-Style Header Banner -->
+		<!-- ====================================== -->
+		<section>
+			<h2>11. SuccessFactors-Style Header Banner</h2>
+			<p>The blue home page header as seen in SAP SuccessFactors: a personalized greeting with quick-action shortcuts on the left and a carousel of alert cards on the right.</p>
+
+			<ui5-banner id="banner-sf"
+				layout="TwoThirds">
+				<!-- Start Content (2/3): salutation + quick-action shortcut buttons -->
+				<div slot="startContent" style="display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 0.75rem;">
+					<div>
+						<div style="font-family: var(--sapFontHeaderFamily); font-size: var(--sapFontHeader2Size); font-weight: bold; color: var(--_ui5_banner_text_color);">Hello, Henry</div>
+					</div>
+					<div style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;">
+						<ui5-button icon="heart" design="Default">Appreciate a Colleague</ui5-button>
+						<ui5-button icon="group" design="Default">Create Team</ui5-button>
+						<ui5-button icon="email" design="Default">Email</ui5-button>
+						<ui5-button icon="time-entry-request" design="Default">Clock In/Out</ui5-button>
+					</div>
+				</div>
+
+				<!-- End Content (1/3): carousel of alert/attention cards -->
+				<ui5-carousel slot="endContent" style="width: 100%;">
+					<div class="kpi-card">
+						<span class="kpi-label">Needs Attention</span>
+						<span class="kpi-value" style="font-size: var(--sapFontHeader4Size);">PTO Leave</span>
+						<span style="font-size: var(--sapFontSmallSize); color: var(--sapTextColor);">Debra Labade</span>
+						<span style="font-size: var(--sapFontSmallSize); color: var(--sapContent_LabelColor);">Oct 10 – Oct 17, 2024 · Annual Leave</span>
+						<ui5-link style="margin-top: 0.25rem;" href="#">View All (4)</ui5-link>
+					</div>
+					<div class="kpi-card">
+						<span class="kpi-label">Needs Attention</span>
+						<span class="kpi-value" style="font-size: var(--sapFontHeader4Size);">Information Security</span>
+						<span style="font-size: var(--sapFontSmallSize); color: var(--sapTextColor);">Overdue Learning Assignment</span>
+						<span style="font-size: var(--sapFontSmallSize); color: var(--sapContent_LabelColor);">Online · 30 Hours</span>
+						<ui5-button design="Emphasized" style="margin-top: 0.5rem;">Take Course Now</ui5-button>
+					</div>
+				</ui5-carousel>
+
+			</ui5-banner>
+		</section>
+
+	</div>
+
+	<!-- Hidden holder for toggled-off slotted elements -->
+	<div id="slot-holder" style="display: none;"></div>
+
+	<script>
+		var dynamicBanner = document.getElementById("banner-dynamic");
+		var slotHolder = document.getElementById("slot-holder");
+		var names = ["John", "Maria", "Thomas", "Lisa", "Alex", "Sarah", "David"];
+		var nameIndex = 0;
+
+		// --- Salutation (mandatory: cycle through names, never hidden) ---
+		document.getElementById("btn-change-salutation").addEventListener("click", function () {
+			nameIndex = (nameIndex + 1) % names.length;
+			dynamicBanner.salutationText = "Hello, " + names[nameIndex];
+		});
+
+		// --- Date Text toggle ---
+		document.getElementById("chk-date").addEventListener("change", function () {
+			dynamicBanner.dateText = this.checked ? "Thursday, March 6, 2026" : "";
+		});
+
+		// --- Background Image toggle ---
+		document.getElementById("chk-bg").addEventListener("change", function () {
+			dynamicBanner.backgroundImage = this.checked
+				? "https://wallpapershome.com/images/pages/pic_h/17796.jpg"
+				: undefined;
+		});
+
+		// --- Slot toggle helper: moves elements between the banner and the hidden holder ---
+		function toggleSlot(checkboxId, slotName) {
+			document.getElementById(checkboxId).addEventListener("change", function () {
+				if (this.checked) {
+					[...slotHolder.querySelectorAll("[data-slot='" + slotName + "']")].forEach(function (el) {
+						el.setAttribute("slot", slotName);
+						dynamicBanner.appendChild(el);
+					});
+				} else {
+					[...dynamicBanner.querySelectorAll("[slot='" + slotName + "']")].forEach(function (el) {
+						el.dataset.slot = slotName;
+						el.removeAttribute("slot");
+						slotHolder.appendChild(el);
+					});
+				}
+			});
+		}
+
+		toggleSlot("chk-header-actions", "headerActions");
+		toggleSlot("chk-start", "startContent");
+		toggleSlot("chk-end", "endContent");
+
+		// --- Layout buttons ---
+		document.getElementById("btn-layout-full").addEventListener("click", function () {
+			dynamicBanner.layout = "FullWidth";
+		});
+		document.getElementById("btn-layout-half").addEventListener("click", function () {
+			dynamicBanner.layout = "HalfWidth";
+		});
+		document.getElementById("btn-layout-twothirds").addEventListener("click", function () {
+			dynamicBanner.layout = "TwoThirds";
+		});
+	</script>
+</body>
+</html>
diff --git a/packages/fiori/test/pages/styles/Banner.css b/packages/fiori/test/pages/styles/Banner.css
new file mode 100644
index 000000000000..fedaae1ebf2a
--- /dev/null
+++ b/packages/fiori/test/pages/styles/Banner.css
@@ -0,0 +1,127 @@
+html, body {
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	background-color: var(--sapBackgroundColor);
+	font-family: var(--sapFontFamily);
+}
+
+.showcase {
+	max-width: 1440px;
+	margin: 0 auto;
+	padding: 2rem;
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
+}
+
+.showcase h2 {
+	font-family: var(--sapFontHeaderFamily);
+	color: var(--sapTextColor);
+	font-size: var(--sapFontHeader3Size);
+	margin: 0.5rem 0;
+	border-bottom: 1px solid var(--sapGroup_TitleBorderColor);
+	padding-bottom: 0.5rem;
+}
+
+.showcase p {
+	font-size: var(--sapFontSize);
+	color: var(--sapContent_LabelColor);
+	margin: 0 0 1rem 0;
+}
+
+/* KPI card styling for demo */
+.kpi-card {
+	background: var(--sapTile_Background);
+	border-radius: 0.75rem;
+	padding: 1rem;
+	box-shadow: var(--sapContent_Shadow0);
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+.kpi-card .kpi-label {
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapContent_LabelColor);
+}
+
+.kpi-card .kpi-value {
+	font-family: var(--sapFontHeaderFamily);
+	font-size: var(--sapFontHeader2Size);
+	font-weight: bold;
+	color: var(--sapTextColor);
+}
+
+.kpi-card .kpi-trend {
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapPositiveColor);
+}
+
+.kpi-card .kpi-trend.negative {
+	color: var(--sapNegativeColor);
+}
+
+.controls-bar {
+	display: flex;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+	padding: 0.5rem 0;
+}
+
+/* Interactive Controls panel (Section 10) */
+.controls-panel {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	padding: 0.75rem 1rem;
+	background: var(--sapGroup_ContentBackground);
+	border: 1px solid var(--sapGroup_TitleBorderColor);
+	border-radius: 0.5rem;
+	margin-bottom: 1rem;
+}
+
+.controls-row {
+	display: flex;
+	gap: 0.75rem;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.controls-label {
+	font-size: var(--sapFontSize);
+	font-weight: bold;
+	color: var(--sapContent_LabelColor);
+	white-space: nowrap;
+}
+
+.toggle-label {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	font-size: var(--sapFontSize);
+	color: var(--sapTextColor);
+	cursor: pointer;
+	white-space: nowrap;
+}
+
+.controls-separator {
+	color: var(--sapGroup_TitleBorderColor);
+	font-size: 1.2rem;
+}
+
+/* Scrollable content for scroll-away demo */
+.scroll-container {
+	height: 500px;
+	overflow-y: auto;
+	border: 1px solid var(--sapGroup_TitleBorderColor);
+	border-radius: 0.5rem;
+	padding: 1rem;
+}
+
+.filler-content {
+	padding: 1rem 0;
+	color: var(--sapContent_LabelColor);
+	font-size: var(--sapFontSize);
+	line-height: 1.6;
+}