From 3c14be4dd3bb40f9f7d959dd4c3040f28f916e27 Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Thu, 15 Jan 2026 11:01:14 +0000
Subject: [PATCH 1/7] refactor(wip): designable banner v2 using compound
 pattern

---
 .../StickyBottomBanner.importable.tsx         |   6 +-
 .../ReaderRevenueBanner.tsx                   |  10 +-
 .../banners/common/BannerWrapper.tsx          |   6 +-
 .../marketing/banners/common/types.tsx        |   4 +-
 .../banners/designableBanner/v2/Banner.tsx    | 546 ++++++++++++
 .../designableBanner/v2/BannerContext.tsx     |  48 ++
 .../v2/components/BannerArticleCount.tsx      |  54 ++
 .../v2/components/BannerBody.tsx              |  63 ++
 .../v2/components/BannerChoiceCards.tsx       | 205 +++++
 .../v2/components/BannerCloseButton.tsx       | 174 ++++
 .../v2/components/BannerContent.tsx           |  39 +
 .../v2/components/BannerCtas.tsx              | 161 ++++
 .../v2/components/BannerHeader.tsx            | 147 ++++
 .../v2/components/BannerLogo.tsx              |  38 +
 .../v2/components/BannerReminder.tsx          |  59 ++
 .../v2/components/BannerTicker.tsx            |  30 +
 .../v2/components/BannerVisual.tsx            | 164 ++++
 .../banners/designableBanner/v2/index.ts      |  17 +
 .../v2/stories/DesignableBannerV2.stories.tsx | 786 ++++++++++++++++++
 .../designableBanner/v2/tests/Banner.test.tsx | 306 +++++++
 .../banners/designableBanner/v2/useBanner.ts  |  12 +
 .../marketing/banners/utils/withCloseable.tsx |   1 +
 .../marketing/shared/ThreeTierChoiceCards.tsx |   2 +-
 23 files changed, 2872 insertions(+), 6 deletions(-)
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts

diff --git a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx
index 73ef5947c82..febbf5ffb9e 100644
--- a/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx
+++ b/dotcom-rendering/src/components/StickyBottomBanner.importable.tsx
@@ -343,8 +343,12 @@ export const StickyBottomBanner = ({
 			host,
 		);
 
+		// Check both window.location.search and the full URL for force-banner parameter
+		// This handles cases where the local dev server has a different URL structure
+		const fullUrl = window.location.href;
 		const hasForceBannerParam =
-			window.location.search.includes('force-banner');
+			window.location.search.includes('force-banner') ||
+			fullUrl.includes('force-banner');
 		const hasForceBrazeMessageParam = window.location.hash.includes(
 			'force-braze-message',
 		);
diff --git a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx
index 9860cc4b5a5..88e373ebcb2 100644
--- a/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx
+++ b/dotcom-rendering/src/components/StickyBottomBanner/ReaderRevenueBanner.tsx
@@ -297,14 +297,22 @@ export const ReaderRevenueBanner = ({
 	const [Banner, setBanner] = useState<React.ElementType | null>(null);
 
 	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		const version = params.get('banner-version');
+
 		(name === 'SignInPromptBanner'
 			? /* webpackChunkName: "sign-in-prompt-banner" */
 			  import(`../marketing/banners/signInPrompt/SignInPromptBanner`)
+			: version === 'v2'
+			? /* webpackChunkName: "designable-banner-v2" */
+			  import(`../marketing/banners/designableBanner/v2/Banner`)
 			: /* webpackChunkName: "designable-banner" */
 			  import(`../marketing/banners/designableBanner/DesignableBanner`)
 		)
 			.then((bannerModule: { [key: string]: React.ElementType }) => {
-				setBanner(() => bannerModule[name] ?? null);
+				// When using banner-version=v2, always use DesignableBanner export
+				const bannerName = version === 'v2' ? 'DesignableBanner' : name;
+				setBanner(() => bannerModule[bannerName] ?? null);
 			})
 			.catch((error) => {
 				const msg = `Error importing RR banner: ${String(error)}`;
diff --git a/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx b/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx
index 1810f51a3e6..ac51a534846 100644
--- a/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/common/BannerWrapper.tsx
@@ -95,6 +95,7 @@ const withBannerData =
 			abandonedBasket,
 			promoCodes,
 			isCollapsible,
+			children,
 		} = bannerProps;
 
 		const [hasBeenSeen, setNode] = useIsInView({
@@ -331,6 +332,7 @@ const withBannerData =
 					onNotNowClick,
 					onCollapseClick,
 					onExpandClick,
+					bannerChannel,
 					content: {
 						mainContent: renderedContent,
 						mobileContent: renderedMobileContent ?? renderedContent,
@@ -353,12 +355,12 @@ const withBannerData =
 
 				return (
 					<div ref={setNode}>
-						<Banner {...props} />
+						<Banner {...props}>{children}</Banner>
 					</div>
 				);
 			}
 		} catch (err) {
-			console.log(err);
+			console.error(err);
 		}
 
 		return <></>;
diff --git a/dotcom-rendering/src/components/marketing/banners/common/types.tsx b/dotcom-rendering/src/components/marketing/banners/common/types.tsx
index 5d4c8fc8d31..a1ffed2bef5 100644
--- a/dotcom-rendering/src/components/marketing/banners/common/types.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/common/types.tsx
@@ -9,6 +9,7 @@ import type { ReminderFields } from '@guardian/support-dotcom-components/dist/sh
 import type {
 	ArticleCounts,
 	ArticleCountType,
+	BannerChannel,
 	ConfigurableDesign,
 	SelectedAmountsVariant,
 	SeparateArticleCount,
@@ -65,6 +66,7 @@ export interface BannerRenderProps {
 	onSignInClick?: () => void;
 	onCollapseClick: () => void;
 	onExpandClick: () => void;
+	bannerChannel: BannerChannel;
 	reminderTracking: ContributionsReminderTracking;
 	content: BannerTextContent;
 	countryCode?: string;
@@ -78,7 +80,7 @@ export interface BannerRenderProps {
 	choiceCardAmounts?: SelectedAmountsVariant;
 	choiceCardsSettings?: ChoiceCardsSettings;
 	tracking: Tracking;
-	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
+	submitComponentEvent?: (componentEvent: ComponentEvent) => Promise<void>;
 	design?: ConfigurableDesign;
 	promoCodes?: string[];
 	isCollapsible?: boolean;
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
new file mode 100644
index 00000000000..3941eb11c7b
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -0,0 +1,546 @@
+import { css } from '@emotion/react';
+import { from, neutral, space, until } from '@guardian/source/foundations';
+import { hexColourToString } from '@guardian/support-dotcom-components';
+import type {
+	BannerDesignHeaderImage,
+	BannerDesignImage,
+	ConfigurableDesign,
+	Image,
+} from '@guardian/support-dotcom-components/dist/shared/types';
+import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+	removeMediaRulePrefix,
+	useMatchMedia,
+} from '../../../../../lib/useMatchMedia';
+import { getChoiceCards } from '../../../lib/choiceCards';
+import {
+	bannerWrapper,
+	validatedBannerWrapper,
+} from '../../common/BannerWrapper';
+import type { BannerRenderProps } from '../../common/types';
+import type { BannerTemplateSettings, ChoiceCardSettings } from '../settings';
+import { BannerContext, type BannerContextType } from './BannerContext';
+import { BannerArticleCount } from './components/BannerArticleCount';
+import { BannerBody } from './components/BannerBody';
+import { BannerChoiceCards } from './components/BannerChoiceCards';
+import { BannerCloseButton } from './components/BannerCloseButton';
+import { BannerContent } from './components/BannerContent';
+import { BannerCtas } from './components/BannerCtas';
+import { BannerHeader } from './components/BannerHeader';
+import { BannerLogo } from './components/BannerLogo';
+import { BannerTicker } from './components/BannerTicker';
+import { BannerVisual } from './components/BannerVisual';
+
+const buildImageSettings = (
+	design: BannerDesignImage | BannerDesignHeaderImage,
+): Image | undefined => {
+	return {
+		mainUrl: design.mobileUrl,
+		mobileUrl: design.mobileUrl,
+		tabletUrl: design.tabletUrl,
+		desktopUrl: design.desktopUrl,
+		wideUrl: design.desktopUrl,
+		altText: design.altText,
+	};
+};
+
+const buildMainImageSettings = (
+	design: ConfigurableDesign,
+): Image | undefined => {
+	if (design.visual?.kind !== 'Image') {
+		return undefined;
+	}
+	return buildImageSettings(design.visual);
+};
+
+const buildHeaderImageSettings = (
+	design: ConfigurableDesign,
+): Image | undefined => {
+	if (!design.headerImage) {
+		return undefined;
+	}
+	return buildImageSettings(design.headerImage);
+};
+
+const buildChoiceCardSettings = (
+	design: ConfigurableDesign,
+): ChoiceCardSettings | undefined => {
+	if (design.visual?.kind !== 'ChoiceCards') {
+		return undefined;
+	}
+	const {
+		buttonColour,
+		buttonTextColour,
+		buttonBorderColour,
+		buttonSelectColour,
+		buttonSelectTextColour,
+		buttonSelectBorderColour,
+		buttonSelectMarkerColour,
+		pillTextColour,
+		pillBackgroundColour,
+	} = design.visual;
+	return {
+		buttonColour: buttonColour
+			? hexColourToString(buttonColour)
+			: undefined,
+		buttonTextColour: buttonTextColour
+			? hexColourToString(buttonTextColour)
+			: undefined,
+		buttonBorderColour: buttonBorderColour
+			? hexColourToString(buttonBorderColour)
+			: undefined,
+		buttonSelectColour: buttonSelectColour
+			? hexColourToString(buttonSelectColour)
+			: undefined,
+		buttonSelectTextColour: buttonSelectTextColour
+			? hexColourToString(buttonSelectTextColour)
+			: undefined,
+		buttonSelectBorderColour: buttonSelectBorderColour
+			? hexColourToString(buttonSelectBorderColour)
+			: undefined,
+		buttonSelectMarkerColour: buttonSelectMarkerColour
+			? hexColourToString(buttonSelectMarkerColour)
+			: undefined,
+		pillTextColour: pillTextColour
+			? hexColourToString(pillTextColour)
+			: undefined,
+		pillBackgroundColour: pillBackgroundColour
+			? hexColourToString(pillBackgroundColour)
+			: undefined,
+	};
+};
+
+interface BannerComponentProps extends BannerRenderProps {
+	children?: React.ReactNode;
+}
+
+const Banner = ({
+	content,
+	onCloseClick,
+	onCollapseClick,
+	onExpandClick,
+	articleCounts,
+	onCtaClick,
+	onSecondaryCtaClick,
+	bannerChannel,
+	reminderTracking,
+	separateArticleCountSettings,
+	tickerSettings,
+	choiceCardsSettings,
+	submitComponentEvent,
+	tracking,
+	design,
+	countryCode,
+	promoCodes,
+	separateArticleCount,
+	isCollapsible,
+	children,
+}: BannerComponentProps): JSX.Element | null => {
+	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
+	const bannerRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (bannerRef.current) {
+			bannerRef.current.focus();
+		}
+	}, []);
+
+	const choiceCards = useMemo(
+		() => getChoiceCards(isTabletOrAbove, choiceCardsSettings),
+		[isTabletOrAbove, choiceCardsSettings],
+	);
+
+	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
+
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
+
+	const isCollapsableBanner: boolean =
+		isCollapsible ??
+		(tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
+			tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER'));
+
+	const [isCollapsed, setIsCollapsed] =
+		useState<boolean>(isCollapsableBanner);
+
+	const handleToggleCollapse = useCallback(() => {
+		const nextCollapsed = !isCollapsed;
+		setIsCollapsed(nextCollapsed);
+		if (nextCollapsed) {
+			onCollapseClick();
+		} else {
+			onExpandClick();
+		}
+	}, [isCollapsed, onCollapseClick, onExpandClick]);
+
+	const settings = useMemo((): BannerTemplateSettings | undefined => {
+		if (!design) {
+			return undefined;
+		}
+
+		const {
+			basic,
+			primaryCta,
+			secondaryCta,
+			highlightedText,
+			closeButton,
+			ticker,
+		} = design.colours;
+
+		const imageSettings = buildMainImageSettings(design);
+		const choiceCardSettings = buildChoiceCardSettings(design);
+
+		return {
+			containerSettings: {
+				backgroundColour: hexColourToString(basic.background),
+				textColor: hexColourToString(basic.bodyText),
+			},
+			headerSettings: {
+				textColour: hexColourToString(basic.headerText),
+				headerImage: buildHeaderImageSettings(design),
+			},
+			primaryCtaSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						primaryCta.default.background,
+					),
+					textColour: hexColourToString(primaryCta.default.text),
+				},
+			},
+			secondaryCtaSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						secondaryCta.default.background,
+					),
+					textColour: hexColourToString(secondaryCta.default.text),
+					border: `1px solid ${
+						secondaryCta.default.border
+							? hexColourToString(secondaryCta.default.border)
+							: undefined
+					}`,
+				},
+			},
+			closeButtonSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						closeButton.default.background,
+					),
+					textColour: hexColourToString(closeButton.default.text),
+					border: `1px solid ${
+						closeButton.default.border
+							? hexColourToString(closeButton.default.border)
+							: '#DCDCDC' // Fallback to specialReport[100] equivalent if needed, but let's use a safe hex for now
+					}`,
+				},
+			},
+			highlightedTextSettings: {
+				textColour: hexColourToString(highlightedText.text),
+				highlightColour: hexColourToString(highlightedText.highlight),
+			},
+			articleCountTextColour: hexColourToString(basic.articleCountText),
+			choiceCardSettings,
+			imageSettings,
+			bannerId: 'designable-banner',
+			tickerStylingSettings: {
+				filledProgressColour: hexColourToString(ticker.filledProgress),
+				progressBarBackgroundColour: hexColourToString(
+					ticker.progressBarBackground,
+				),
+				headlineColour: hexColourToString(ticker.headlineColour),
+				totalColour: hexColourToString(ticker.totalColour),
+				goalColour: hexColourToString(ticker.goalColour),
+			},
+		};
+	}, [design]);
+
+	const contextValue: BannerContextType | null = useMemo(() => {
+		if (!design || !settings) {
+			return null;
+		}
+		return {
+			bannerChannel,
+			content,
+			design,
+			tracking,
+			articleCounts,
+			tickerSettings,
+			separateArticleCount,
+			separateArticleCountSettings,
+			promoCodes,
+			countryCode,
+			reminderTracking,
+			settings,
+			isCollapsed,
+			isCollapsible: isCollapsableBanner,
+			isTabletOrAbove,
+			choices: choiceCards,
+			selectedChoiceCard,
+			actions: {
+				onClose: onCloseClick,
+				onToggleCollapse: handleToggleCollapse,
+				onCtaClick,
+				onSecondaryCtaClick,
+				onChoiceCardChange: setSelectedChoiceCard,
+				submitComponentEvent,
+			},
+		};
+	}, [
+		content,
+		design,
+		tracking,
+		articleCounts,
+		tickerSettings,
+		separateArticleCountSettings,
+		promoCodes,
+		countryCode,
+		settings,
+		isCollapsed,
+		isCollapsableBanner,
+		isTabletOrAbove,
+		choiceCards,
+		selectedChoiceCard,
+		onCloseClick,
+		handleToggleCollapse,
+		onCtaClick,
+		onSecondaryCtaClick,
+		submitComponentEvent,
+		separateArticleCount,
+		reminderTracking,
+		bannerChannel,
+	]);
+
+	if (!design || !settings || !contextValue) {
+		return null;
+	}
+
+	const contextClassName =
+		isCollapsableBanner ||
+		tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER')
+			? 'maybe-later'
+			: '';
+
+	const cardsImageOrSpaceTemplateString = isCollapsableBanner
+		? 'main-image'
+		: '.';
+
+	return (
+		<BannerContext.Provider value={contextValue}>
+			<div
+				ref={bannerRef}
+				role="alert"
+				tabIndex={-1}
+				css={styles.outerContainer(
+					settings.containerSettings.backgroundColour,
+					settings.containerSettings.textColor,
+				)}
+				className={contextClassName}
+			>
+				<div
+					css={
+						isCollapsableBanner && isCollapsed
+							? styles.collapsedLayoutOverrides(
+									cardsImageOrSpaceTemplateString,
+							  )
+							: styles.layoutOverrides(
+									cardsImageOrSpaceTemplateString,
+							  )
+					}
+				>
+					<div css={styles.verticalLine} />
+					{children ?? (
+						<>
+							<BannerLogo />
+							<BannerContent>
+								<BannerHeader />
+								<BannerTicker />
+								<BannerArticleCount />
+								<BannerBody />
+							</BannerContent>
+							<BannerChoiceCards />
+							<BannerCtas />
+							<BannerVisual />
+							<BannerCloseButton />
+						</>
+					)}
+				</div>
+			</div>
+		</BannerContext.Provider>
+	);
+};
+
+const phabletContentMaxWidth = '492px';
+
+const styles = {
+	outerContainer: (background: string, textColor: string = 'inherit') => css`
+		background: ${background};
+		color: ${textColor};
+		bottom: 0px;
+		max-height: 65vh;
+		max-height: 65svh;
+
+		* {
+			box-sizing: border-box;
+		}
+		${from.phablet} {
+			border-top: 1px solid ${neutral[0]};
+		}
+		b,
+		strong {
+			font-weight: bold;
+		}
+		padding: 0 auto;
+	`,
+	layoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
+		display: grid;
+		background: inherit;
+		position: relative;
+		bottom: 0px;
+
+		/* mobile first */
+		${until.phablet} {
+			max-width: 660px;
+			margin: 0 auto;
+			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
+			grid-template-areas:
+				'.	.									.'
+				'.	copy-container						close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
+				'.	cta-container						cta-container';
+		}
+		${from.phablet} {
+			max-width: 740px;
+			margin: 0 auto;
+			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: minmax(0, 0.5fr) ${phabletContentMaxWidth} max-content minmax(
+					0,
+					0.5fr
+				);
+			grid-template-rows: auto auto auto;
+			grid-template-areas:
+				'.	copy-container						close-button			close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
+				'.	cta-container						cta-container						.';
+		}
+		${from.desktop} {
+			max-width: 980px;
+			align-self: stretch;
+			padding: ${space[3]}px ${space[1]}px 0 ${space[3]}px;
+			grid-template-columns: auto 380px auto;
+			grid-template-rows: auto auto;
+
+			grid-template-areas:
+				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
+				'cta-container		${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.leftCol} {
+			max-width: 1140px;
+			bottom: 0px;
+			/* the vertical line aligns with that of standard article */
+			grid-column-gap: 10px;
+			grid-template-columns: 140px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.wide} {
+			max-width: 1300px;
+			/* the vertical line aligns with that of standard article */
+			grid-template-columns: 219px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+	`,
+	collapsedLayoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
+		display: grid;
+		background: inherit;
+		position: relative;
+		bottom: 0px;
+
+		/* mobile first */
+		${until.phablet} {
+			max-width: 660px;
+			margin: 0 auto;
+			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
+			grid-template-areas: ${`
+				'.	.									.'
+				'.	copy-container						close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
+				'.	cta-container						cta-container'
+				`};
+		}
+		${from.phablet} {
+			max-width: 740px;
+			margin: 0 auto;
+			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns:
+				minmax(0, 0.5fr)
+				${phabletContentMaxWidth}
+				1fr
+				0;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'.	copy-container						close-button						.'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
+				'.	cta-container						cta-container						.';
+		}
+		${from.desktop} {
+			max-width: 980px;
+			padding: ${space[1]}px ${space[1]}px 0 ${space[3]}px;
+			grid-template-columns: auto 380px minmax(100px, auto);
+			grid-template-rows: auto auto;
+
+			grid-template-areas:
+				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
+				'cta-container		${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.leftCol} {
+			max-width: 1140px;
+			bottom: 0px;
+			/* the vertical line aligns with that of standard article */
+			grid-column-gap: 10px;
+			grid-template-columns: 140px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.wide} {
+			max-width: 1300px;
+			/* the vertical line aligns with that of standard article */
+			grid-template-columns: 219px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+	`,
+	verticalLine: css`
+		grid-area: vert-line;
+
+		${until.leftCol} {
+			display: none;
+		}
+		${from.leftCol} {
+			background-color: ${neutral[0]};
+			width: 1px;
+			opacity: 0.2;
+			margin: ${space[6]}px ${space[2]}px 0 ${space[2]}px;
+		}
+	`,
+};
+
+const unvalidated = bannerWrapper(Banner, 'designable-banner');
+const validated = validatedBannerWrapper(Banner, 'designable-banner');
+
+export {
+	Banner as BannerComponent,
+	unvalidated as DesignableBannerUnvalidated,
+	validated as DesignableBanner,
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx
new file mode 100644
index 00000000000..63f26c7db0a
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx
@@ -0,0 +1,48 @@
+import type { BannerChannel } from '@guardian/support-dotcom-components/dist/shared/types';
+import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
+import type { Dispatch, SetStateAction } from 'react';
+import { createContext } from 'react';
+import type {
+	BannerRenderProps,
+	ContributionsReminderTracking,
+} from '../../common/types';
+import type { BannerTemplateSettings } from '../settings';
+
+export interface BannerContextType {
+	// --- Raw Data ---
+	bannerChannel: BannerChannel;
+	content: BannerRenderProps['content'];
+	design: BannerRenderProps['design'];
+	tracking: BannerRenderProps['tracking'];
+	articleCounts: BannerRenderProps['articleCounts'];
+	tickerSettings?: BannerRenderProps['tickerSettings'];
+	separateArticleCount?: boolean;
+	separateArticleCountSettings?: BannerRenderProps['separateArticleCountSettings'];
+	promoCodes?: BannerRenderProps['promoCodes'];
+	countryCode?: BannerRenderProps['countryCode'];
+	reminderTracking: ContributionsReminderTracking;
+
+	// --- Derived Settings ---
+	settings: BannerTemplateSettings;
+
+	// --- UI State ---
+	isCollapsed: boolean;
+	isCollapsible: boolean;
+	isTabletOrAbove: boolean;
+	choices: ChoiceCard[] | undefined;
+	selectedChoiceCard: ChoiceCard | undefined;
+
+	// --- Actions ---
+	actions: {
+		onClose: () => void;
+		onToggleCollapse: () => void;
+		onCtaClick: () => void;
+		onSecondaryCtaClick: () => void;
+		onChoiceCardChange: Dispatch<SetStateAction<ChoiceCard | undefined>>;
+		submitComponentEvent: BannerRenderProps['submitComponentEvent'];
+	};
+}
+
+export const BannerContext = createContext<BannerContextType | undefined>(
+	undefined,
+);
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
new file mode 100644
index 00000000000..35d49869c75
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
@@ -0,0 +1,54 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	headlineBold15,
+	headlineBold17,
+} from '@guardian/source/foundations';
+import { CustomArticleCountCopy } from '../../components/CustomArticleCountCopy';
+import { DesignableBannerArticleCountOptOut } from '../../components/DesignableBannerArticleCountOptOut';
+import { useBanner } from '../useBanner';
+
+const containsArticleCountTemplate = (copy: string): boolean =>
+	copy.includes('%%ARTICLE_COUNT%%');
+
+const styles = {
+	container: (textColor: string = 'inherit') => css`
+		margin: 0;
+		color: ${textColor};
+		${headlineBold15}
+		${from.desktop} {
+			${headlineBold17}
+		}
+	`,
+};
+
+export const BannerArticleCount = (): JSX.Element | null => {
+	const { articleCounts, settings, separateArticleCountSettings } =
+		useBanner();
+	const numArticles = articleCounts.forTargetedWeeks;
+	const copy = separateArticleCountSettings?.copy;
+
+	if (copy && containsArticleCountTemplate(copy)) {
+		return (
+			<CustomArticleCountCopy
+				numArticles={numArticles}
+				copy={copy}
+				settings={settings}
+			/>
+		);
+	}
+
+	return (
+		<div css={styles.container(settings.articleCountTextColour)}>
+			{numArticles >= 50
+				? "Congratulations on being one of our top readers globally - you've read "
+				: "You've read "}
+			<DesignableBannerArticleCountOptOut
+				numArticles={numArticles}
+				nextWord=" articles"
+				settings={settings}
+			/>{' '}
+			in the last year
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
new file mode 100644
index 00000000000..51e3d705dd3
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
@@ -0,0 +1,63 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	textEgyptian15,
+	textEgyptian17,
+	textEgyptianBold15,
+	textEgyptianBold17,
+} from '@guardian/source/foundations';
+import { createBannerBodyCopy } from '../../components/BannerText';
+import { useBanner } from '../useBanner';
+
+const getStyles = (textColour: string, highlightColour?: string) => ({
+	container: css`
+		p {
+			margin: 0 0 0.5em 0;
+		}
+		${textEgyptian15};
+		${from.desktop} {
+			${textEgyptian17};
+		}
+	`,
+	highlightedText: css`
+		display: inline;
+		color: ${textColour};
+
+		${highlightColour
+			? `
+            background: ${highlightColour};
+            box-shadow: 2px 0 0 ${highlightColour}, -2px 0 0 ${highlightColour};
+            box-decoration-break: clone;
+        `
+			: ''}
+
+		${textEgyptianBold15};
+		${from.desktop} {
+			${textEgyptianBold17};
+		}
+	`,
+});
+
+export const BannerBody = (): JSX.Element | null => {
+	const { content, settings, isTabletOrAbove, isCollapsed } = useBanner();
+
+	const textColour = settings.containerSettings.textColor ?? '';
+	const highlightColour = settings.highlightedTextSettings.highlightColour;
+
+	const styles = getStyles(textColour, highlightColour);
+
+	const mainOrMobileContent = isTabletOrAbove
+		? content.mainContent
+		: content.mobileContent;
+
+	return (
+		<div css={styles.container}>
+			{!isCollapsed &&
+				createBannerBodyCopy(
+					mainOrMobileContent.paragraphs,
+					mainOrMobileContent.highlightedText,
+					styles,
+				)}
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
new file mode 100644
index 00000000000..6c575314b97
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
@@ -0,0 +1,205 @@
+import { css } from '@emotion/react';
+import {
+	between,
+	from,
+	palette,
+	space,
+	until,
+} from '@guardian/source/foundations';
+import {
+	LinkButton,
+	SvgArrowRightStraight,
+} from '@guardian/source/react-components';
+import { enrichSupportUrl, getChoiceCardUrl } from '../../../../lib/tracking';
+import { ThreeTierChoiceCards } from '../../../../shared/ThreeTierChoiceCards';
+import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
+import { useBanner } from '../useBanner';
+
+const styles = {
+	threeTierChoiceCardsContainer: css`
+		grid-area: choice-cards-container;
+		max-width: 100%;
+
+		${until.desktop} {
+			margin-top: -${space[6]}px;
+		}
+		${from.phablet} {
+			max-width: 492px; // phabletContentMaxWidth
+		}
+		${from.desktop} {
+			justify-self: end;
+			padding-right: ${space[8]}px;
+			width: 299px;
+		}
+		${between.desktop.and.wide} {
+			width: 380px;
+		}
+		${from.wide} {
+			align-self: start;
+			width: 380px;
+		}
+	`,
+	ctaContainer: (isCollapsed: boolean, backgroundColor: string) => css`
+		grid-area: cc_cta;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		gap: ${space[4]}px;
+		margin-top: ${space[3]}px;
+
+		.maybe-later & {
+			flex-direction: row;
+			flex-wrap: wrap;
+			padding: ${space[3]}px;
+
+			${from.phablet} {
+				flex-direction: row;
+				padding: ${space[3]}px 0;
+			}
+		}
+
+		${until.phablet} {
+			width: 100vw;
+			position: sticky;
+			bottom: 0;
+			padding: ${space[3]}px;
+			background-color: ${backgroundColor};
+			box-shadow: 0 -${space[1]}px ${space[3]}px 0 rgba(0, 0, 0, 0.25);
+			margin-right: -${space[3]}px;
+			margin-left: -${space[3]}px;
+
+			a {
+				flex: 1 1 0;
+			}
+		}
+
+		${between.phablet.and.desktop} {
+			bottom: 0;
+			margin-top: ${space[3]}px;
+			margin-bottom: ${space[6]}px;
+			a {
+				width: 100%;
+			}
+			> span {
+				width: auto;
+			}
+		}
+
+		${from.desktop} {
+			flex-direction: row;
+			margin-bottom: ${space[6]}px;
+			gap: ${space[2]}px;
+			margin-top: ${isCollapsed ? `${space[6]}px` : `${space[3]}px`};
+			margin-right: 0;
+			margin-left: 0;
+
+			.maybe-later & {
+				flex-wrap: nowrap;
+			}
+
+			a {
+				width: 100%;
+			}
+
+			> span {
+				width: auto;
+			}
+		}
+	`,
+	linkButtonStyles: css`
+		border-color: ${palette.brandAlt[400]};
+		width: 100%;
+	`,
+	maybeLaterButtonSizing: css`
+		flex: 1 1 0;
+		${from.desktop} {
+			width: 118px;
+		}
+	`,
+	maybeLaterButton: css`
+		width: 100%;
+	`,
+};
+
+export const BannerChoiceCards = (): JSX.Element | null => {
+	const {
+		settings,
+		isCollapsed,
+		choices,
+		selectedChoiceCard,
+		actions,
+		tracking,
+		promoCodes,
+		countryCode,
+		content,
+		isTabletOrAbove,
+	} = useBanner();
+
+	if (!settings.choiceCardSettings || !selectedChoiceCard || !choices) {
+		return null;
+	}
+
+	const mainOrMobileContent = isTabletOrAbove
+		? content.mainContent
+		: content.mobileContent;
+
+	return (
+		<div css={styles.threeTierChoiceCardsContainer}>
+			{!isCollapsed && (
+				<ThreeTierChoiceCards
+					selectedChoiceCard={selectedChoiceCard}
+					setSelectedChoiceCard={actions.onChoiceCardChange}
+					choices={choices}
+					id={'banner'}
+					submitComponentEvent={actions.submitComponentEvent}
+					choiceCardSettings={settings.choiceCardSettings}
+				/>
+			)}
+			<div
+				css={styles.ctaContainer(
+					isCollapsed,
+					settings.containerSettings.backgroundColour,
+				)}
+			>
+				<LinkButton
+					href={enrichSupportUrl({
+						baseUrl: getChoiceCardUrl(selectedChoiceCard),
+						tracking,
+						promoCodes: promoCodes ?? [],
+						countryCode,
+					})}
+					onClick={actions.onCtaClick}
+					priority="primary"
+					cssOverrides={[styles.linkButtonStyles]}
+					theme={buttonThemes(settings.primaryCtaSettings, 'primary')}
+					icon={<SvgArrowRightStraight />}
+					iconSide="right"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					{isCollapsed
+						? mainOrMobileContent.primaryCta?.ctaText
+						: 'Continue'}
+				</LinkButton>
+				{isCollapsed && (
+					<div css={styles.maybeLaterButtonSizing}>
+						<LinkButton
+							onClick={actions.onClose}
+							priority="tertiary"
+							cssOverrides={[
+								buttonStyles(settings.secondaryCtaSettings),
+								styles.maybeLaterButton,
+							]}
+							theme={buttonThemes(
+								settings.secondaryCtaSettings,
+								'tertiary',
+							)}
+						>
+							Maybe later
+						</LinkButton>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
new file mode 100644
index 00000000000..38400844463
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
@@ -0,0 +1,174 @@
+import { css } from '@emotion/react';
+import { from, space, until } from '@guardian/source/foundations';
+import {
+	Button,
+	LinkButton,
+	SvgChevronDownSingle,
+	SvgChevronUpSingle,
+	SvgCross,
+} from '@guardian/source/react-components';
+import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
+import { useBanner } from '../useBanner';
+
+const styles = {
+	closeButtonContainer: css`
+		grid-area: close-button;
+		${until.phablet} {
+			padding-bottom: ${space[4]}px;
+			justify-self: end;
+			position: sticky;
+			top: 10px;
+		}
+		${from.phablet} {
+			margin-top: ${space[2]}px;
+			padding-right: ${space[2]}px;
+			position: sticky;
+		}
+		${from.desktop} {
+			margin-top: ${space[6]}px;
+			justify-self: end;
+		}
+		${from.leftCol} {
+			justify-self: start;
+			padding-left: ${space[8]}px;
+		}
+	`,
+	closeAndCollapseButtonContainer: (isCollapsed: boolean) => css`
+		grid-area: close-button;
+		display: flex;
+		justify-content: space-between;
+
+		${until.phablet} {
+			flex-direction: row-reverse;
+			position: sticky;
+			top: ${space[2]}px;
+		}
+		${from.phablet} {
+			flex-direction: row;
+			column-gap: ${space[0]}px;
+			padding-right: ${space[2]}px;
+			margin-top: ${space[2]}px;
+		}
+		${from.desktop} {
+			flex-direction: ${isCollapsed ? 'row' : 'row-reverse'};
+			margin-top: ${isCollapsed ? space[9] : space[6]}px;
+		}
+
+		.maybe-later & {
+			flex-direction: row-reverse;
+		}
+	`,
+	closeButtonOverrides: css`
+		height: 40px;
+		min-height: 40px;
+		width: 40px;
+		min-width: 40px;
+	`,
+	closeABTestButtonOverrides: css`
+		justify-self: end;
+		width: max-content;
+		padding: 0;
+		border: 0;
+		text-decoration: underline;
+		font-weight: normal;
+		font-size: 16px;
+		border-radius: unset;
+		background-color: inherit;
+		${from.desktop} {
+			margin-top: ${space[1]}px;
+		}
+	`,
+	iconOverrides: (background?: string, text?: string) => css`
+		background-color: ${background ?? 'inherit'};
+		path {
+			fill: ${text ?? 'white'};
+		}
+		margin-top: ${space[1]}px;
+		margin-right: ${space[1]}px;
+
+		${from.desktop} {
+			margin: 0;
+		}
+	`,
+	collapsableButtonContainer: css`
+		margin-left: ${space[2]}px;
+		${from.desktop} {
+			margin: 0;
+		}
+	`,
+};
+
+export const BannerCloseButton = (): JSX.Element => {
+	const { isCollapsible, isCollapsed, settings, actions } = useBanner();
+
+	if (isCollapsible) {
+		return (
+			<div css={styles.closeAndCollapseButtonContainer(isCollapsed)}>
+				<div css={styles.collapsableButtonContainer}>
+					<Button
+						onClick={actions.onToggleCollapse}
+						cssOverrides={[
+							styles.iconOverrides(
+								settings.closeButtonSettings.default
+									.backgroundColour,
+								settings.closeButtonSettings.default.textColour,
+							),
+						]}
+						priority="secondary"
+						icon={
+							isCollapsed ? (
+								<SvgChevronUpSingle />
+							) : (
+								<SvgChevronDownSingle />
+							)
+						}
+						size="small"
+						theme={buttonThemes(
+							settings.closeButtonSettings,
+							'secondary',
+						)}
+						hideLabel={true}
+					>
+						{isCollapsed ? 'Expand banner' : 'Collapse banner'}
+					</Button>
+				</div>
+				{isCollapsed && (
+					<LinkButton
+						onClick={actions.onClose}
+						cssOverrides={buttonStyles(
+							settings.closeButtonSettings,
+							styles.closeABTestButtonOverrides,
+						)}
+						priority="tertiary"
+						theme={buttonThemes(
+							settings.closeButtonSettings,
+							'tertiary',
+						)}
+						size="small"
+					>
+						Close
+					</LinkButton>
+				)}
+			</div>
+		);
+	}
+
+	return (
+		<div css={styles.closeButtonContainer}>
+			<Button
+				onClick={actions.onClose}
+				cssOverrides={buttonStyles(
+					settings.closeButtonSettings,
+					styles.closeButtonOverrides,
+				)}
+				priority="tertiary"
+				theme={buttonThemes(settings.closeButtonSettings, 'tertiary')}
+				icon={<SvgCross />}
+				size="small"
+				hideLabel={true}
+			>
+				Close
+			</Button>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
new file mode 100644
index 00000000000..2021a02063e
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import { from, space } from '@guardian/source/foundations';
+import { useBanner } from '../useBanner';
+
+const phabletContentMaxWidth = '492px';
+
+const styles = {
+	contentContainer: css`
+		grid-area: copy-container;
+
+		max-width: 100%;
+		align-self: start;
+
+		${from.phablet} {
+			max-width: ${phabletContentMaxWidth};
+		}
+		${from.desktop} {
+			padding-right: ${space[5]}px;
+			margin-bottom: ${space[2]}px;
+		}
+		${from.leftCol} {
+			padding-left: ${space[3]}px;
+		}
+	`,
+};
+
+export const BannerContent = ({
+	children,
+}: {
+	children: React.ReactNode;
+}): JSX.Element | null => {
+	const { design } = useBanner();
+
+	if (!design) {
+		return null;
+	}
+
+	return <div css={styles.contentContainer}>{children}</div>;
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
new file mode 100644
index 00000000000..48e15aa3c5d
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
@@ -0,0 +1,161 @@
+import { css } from '@emotion/react';
+import { from, space, until } from '@guardian/source/foundations';
+import { LinkButton } from '@guardian/source/react-components';
+import { SecondaryCtaType } from '@guardian/support-dotcom-components';
+import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
+import { useBanner } from '../useBanner';
+
+const styles = {
+	/* ctas for use with main images */
+	outerImageCtaContainer: css`
+		grid-area: cta-container;
+
+		display: flex;
+		background-color: inherit;
+		align-items: center;
+		justify-content: stretch;
+		flex-direction: column;
+		gap: ${space[4]}px;
+
+		${until.phablet} {
+			width: 100vw;
+			position: sticky;
+			bottom: 0;
+			padding-top: ${space[2]}px;
+			padding-bottom: ${space[2]}px;
+			box-shadow: 0 -${space[1]}px ${space[3]}px 0 rgba(0, 0, 0, 0.25);
+			margin-right: -${space[3]}px;
+			margin-left: -${space[3]}px;
+
+			a {
+				width: calc(100% - 24px);
+			}
+		}
+		${from.phablet} {
+			justify-self: stretch;
+			align-items: start;
+			width: 100%;
+			margin-bottom: ${space[2]}px;
+			margin-left: 0px;
+			margin-right: 0px;
+		}
+		${from.desktop} {
+			width: 100%;
+			flex-wrap: nowrap;
+			margin-bottom: ${space[2]}px;
+		}
+		${from.leftCol} {
+			align-items: center;
+		}
+	`,
+	innerImageCtaContainer: css`
+		display: flex;
+		width: calc(100% - 24px);
+		flex-wrap: wrap;
+		flex-direction: row;
+		gap: ${space[2]}px;
+		justify-content: stretch;
+		margin: 0;
+
+		> a {
+			flex: 1 0 100%;
+			justify-content: center;
+		}
+
+		${from.tablet} {
+			justify-content: center;
+			max-width: 100%;
+		}
+
+		${from.desktop} {
+			> a {
+				flex-direction: column;
+				flex: 1 0 50%;
+				justify-self: stretch;
+			}
+			flex-direction: row;
+			flex-wrap: nowrap;
+			justify-content: start;
+		}
+	`,
+};
+
+export const BannerCtas = (): JSX.Element | null => {
+	const {
+		content,
+		settings,
+		actions,
+		isTabletOrAbove,
+		selectedChoiceCard,
+		isCollapsed,
+	} = useBanner();
+
+	if (selectedChoiceCard) {
+		return null;
+	}
+
+	const mainOrMobileContent = isTabletOrAbove
+		? content.mainContent
+		: content.mobileContent;
+
+	const { primaryCta, secondaryCta } = mainOrMobileContent;
+
+	if (!primaryCta && !secondaryCta && !isCollapsed) {
+		return null;
+	}
+
+	return (
+		<div css={styles.outerImageCtaContainer}>
+			<div css={styles.innerImageCtaContainer}>
+				{primaryCta && (
+					<LinkButton
+						href={primaryCta.ctaUrl}
+						onClick={actions.onCtaClick}
+						size="small"
+						priority="primary"
+						cssOverrides={buttonStyles(settings.primaryCtaSettings)}
+						theme={buttonThemes(
+							settings.primaryCtaSettings,
+							'primary',
+						)}
+					>
+						{primaryCta.ctaText}
+					</LinkButton>
+				)}
+				{secondaryCta?.type === SecondaryCtaType.Custom && (
+					<LinkButton
+						href={secondaryCta.cta.ctaUrl}
+						onClick={actions.onSecondaryCtaClick}
+						size="small"
+						priority="secondary"
+						cssOverrides={buttonStyles(
+							settings.secondaryCtaSettings,
+						)}
+						theme={buttonThemes(
+							settings.secondaryCtaSettings,
+							'secondary',
+						)}
+					>
+						{secondaryCta.cta.ctaText}
+					</LinkButton>
+				)}
+				{isCollapsed && (
+					<LinkButton
+						onClick={actions.onClose}
+						size="small"
+						priority="tertiary"
+						cssOverrides={[
+							buttonStyles(settings.secondaryCtaSettings),
+						]}
+						theme={buttonThemes(
+							settings.secondaryCtaSettings,
+							'tertiary',
+						)}
+					>
+						Maybe later
+					</LinkButton>
+				)}
+			</div>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
new file mode 100644
index 00000000000..fd349dae0dc
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
@@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+import {
+	from,
+	headlineMedium17,
+	headlineMedium24,
+	headlineMedium28,
+	headlineMedium34,
+	headlineMedium42,
+	neutral,
+	space,
+	until,
+} from '@guardian/source/foundations';
+import type { JSX } from 'react';
+import { useBanner } from '../useBanner';
+import { BannerVisual } from './BannerVisual';
+
+const getStyles = (
+	textColour: string | undefined,
+	backgroundColour: string,
+	headlineSize: 'small' | 'medium' | 'large',
+	isCollapsed: boolean,
+	hasHeaderImage: boolean,
+	hasMainImage: boolean,
+) => {
+	const color = textColour ?? neutral[0];
+	const copyTopMargin = hasHeaderImage ? space[1] : space[1];
+	const containerMargin =
+		isCollapsed || hasHeaderImage ? `${space[6]}px` : '0';
+
+	const mobileHeadlineSize =
+		headlineSize === 'small' || isCollapsed
+			? `${headlineMedium17}`
+			: `${headlineMedium28}`;
+
+	const phabletHeadline = isCollapsed
+		? `${headlineMedium24}`
+		: `${headlineMedium34}`;
+
+	const leftColHeadline = isCollapsed
+		? `${headlineMedium24}`
+		: `${headlineMedium42}`;
+
+	const phabletContentMaxWidth = '492px';
+
+	return {
+		container: css`
+			position: relative;
+			margin-bottom: ${containerMargin};
+		`,
+		header: css`
+			h2 {
+				color: ${color};
+				margin: ${copyTopMargin}px 0 ${space[2]}px 0;
+
+				${until.phablet} {
+					${mobileHeadlineSize};
+				}
+
+				${from.phablet} {
+					${phabletHeadline};
+				}
+
+				${from.leftCol} {
+					${leftColHeadline};
+				}
+			}
+		`,
+		headerContainer: css`
+			align-self: stretch;
+			justify-self: stretch;
+
+			${until.phablet} {
+				${hasMainImage
+					? ''
+					: `max-width: calc(100% - 40px - ${space[3]}px);`}
+			}
+
+			${from.phablet} {
+				background: ${backgroundColour};
+				max-width: ${phabletContentMaxWidth};
+			}
+
+			${from.desktop} {
+				padding-top: ${space[3]}px;
+				padding-right: ${space[5]}px;
+			}
+		`,
+		headerWithImageContainer: css`
+			max-width: 100%;
+
+			${from.tablet} {
+				max-width: ${phabletContentMaxWidth};
+			}
+
+			${from.desktop} {
+				background: ${backgroundColour};
+				padding-top: ${space[3]}px;
+			}
+		`,
+	};
+};
+
+export const BannerHeader = (): JSX.Element | null => {
+	const { content, design, settings, isCollapsed, isTabletOrAbove } =
+		useBanner();
+
+	if (!design) {
+		return null;
+	}
+
+	const headlineSize = design.fonts?.heading.size ?? 'medium';
+	const styles = getStyles(
+		settings.headerSettings?.textColour,
+		settings.containerSettings.backgroundColour,
+		headlineSize,
+		isCollapsed,
+		!!settings.headerSettings?.headerImage,
+		!!settings.imageSettings,
+	);
+
+	const containerCss = settings.headerSettings?.headerImage
+		? styles.headerWithImageContainer
+		: styles.headerContainer;
+
+	return (
+		<div css={containerCss}>
+			<div css={styles.container}>
+				<header css={styles.header}>
+					{settings.headerSettings?.headerImage && (
+						<BannerVisual
+							settings={settings.headerSettings.headerImage}
+							isHeaderImage={true}
+						/>
+					)}
+					{(content.mainContent.heading ??
+						content.mobileContent.heading) && (
+						<h2>
+							{isTabletOrAbove && !isCollapsed
+								? content.mainContent.heading
+								: content.mobileContent.heading}
+						</h2>
+					)}
+				</header>
+			</div>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
new file mode 100644
index 00000000000..128e4ff4cee
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import { from, space, until } from '@guardian/source/foundations';
+import { SvgGuardianLogo } from '@guardian/source/react-components';
+import { hexColourToString } from '@guardian/support-dotcom-components';
+import { useBanner } from '../useBanner';
+
+const styles = {
+	guardianLogoContainer: css`
+		grid-area: logo;
+
+		${until.leftCol} {
+			display: none;
+		}
+		${from.leftCol} {
+			justify-self: end;
+			width: 128px;
+			height: 41px;
+			justify-content: end;
+			margin-top: ${space[5]}px;
+		}
+	`,
+};
+
+export const BannerLogo = (): JSX.Element | null => {
+	const { design } = useBanner();
+
+	if (!design) {
+		return null;
+	}
+
+	return (
+		<div css={styles.guardianLogoContainer}>
+			<SvgGuardianLogo
+				textColor={hexColourToString(design.colours.basic.logo)}
+			/>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
new file mode 100644
index 00000000000..d70919a7787
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
@@ -0,0 +1,59 @@
+import { css } from '@emotion/react';
+import { space } from '@guardian/source/foundations';
+import { SecondaryCtaType } from '@guardian/support-dotcom-components';
+import { useContributionsReminderSignup } from '../../../../hooks/useContributionsReminderSignup';
+import { DesignableBannerReminderSignedOut } from '../../components/DesignableBannerReminderSignedOut';
+import { useBanner } from '../useBanner';
+
+const styles = {
+	container: css`
+		grid-row: 4;
+		grid-column: 1 / span 2;
+		order: 5;
+		margin-top: ${space[3]}px;
+	`,
+};
+
+export const BannerReminder = (): JSX.Element | null => {
+	const { content, reminderTracking, settings, isTabletOrAbove } =
+		useBanner();
+
+	const mainOrMobileContent = isTabletOrAbove
+		? content.mainContent
+		: content.mobileContent;
+
+	const { secondaryCta } = mainOrMobileContent;
+
+	const reminderFields =
+		secondaryCta?.type === SecondaryCtaType.ContributionsReminder
+			? secondaryCta.reminderFields
+			: undefined;
+
+	const { reminderStatus, createReminder } = useContributionsReminderSignup(
+		reminderFields?.reminderPeriod ?? '',
+		'WEB',
+		'BANNER',
+		'PRE',
+		reminderFields?.reminderOption,
+	);
+
+	if (secondaryCta?.type !== SecondaryCtaType.ContributionsReminder) {
+		return null;
+	}
+
+	const onReminderSetClick = (email: string) => {
+		reminderTracking.onReminderSetClick();
+		createReminder(email);
+	};
+
+	return (
+		<div css={styles.container}>
+			<DesignableBannerReminderSignedOut
+				reminderCta={secondaryCta}
+				reminderStatus={reminderStatus}
+				onReminderSetClick={onReminderSetClick}
+				setReminderCtaSettings={settings.secondaryCtaSettings}
+			/>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
new file mode 100644
index 00000000000..d9fb56f4d00
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
@@ -0,0 +1,30 @@
+import { Ticker } from '@guardian/source-development-kitchen/react-components';
+import { templateSpacing } from '../../styles/templateStyles';
+import { useBanner } from '../useBanner';
+
+export const BannerTicker = (): JSX.Element | null => {
+	const { tickerSettings, settings, isCollapsed } = useBanner();
+
+	if (
+		!tickerSettings?.tickerData ||
+		isCollapsed ||
+		!settings.tickerStylingSettings
+	) {
+		return null;
+	}
+
+	return (
+		<div css={templateSpacing.bannerTicker}>
+			<Ticker
+				currencySymbol={tickerSettings.currencySymbol}
+				copy={{
+					headline: tickerSettings.copy.countLabel,
+					goalCopy: tickerSettings.copy.goalCopy,
+				}}
+				tickerData={tickerSettings.tickerData}
+				tickerStylingSettings={settings.tickerStylingSettings}
+				size={'medium'}
+			/>
+		</div>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
new file mode 100644
index 00000000000..d2d3c2fe8da
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -0,0 +1,164 @@
+import { css } from '@emotion/react';
+import { between, from, space } from '@guardian/source/foundations';
+import type { Image } from '@guardian/support-dotcom-components/dist/shared/types';
+import type { ImageAttrs } from '../../../../shared/ResponsiveImage';
+import { ResponsiveImage } from '../../../../shared/ResponsiveImage';
+import { useBanner } from '../useBanner';
+
+interface BannerVisualProps {
+	settings?: Image;
+	isHeaderImage?: boolean;
+}
+
+const getImageUrl = (
+	isCollapsed: boolean,
+	collapsedUrl: string | undefined,
+	originalUrl: string,
+): string => {
+	if (isCollapsed) {
+		return collapsedUrl ?? originalUrl;
+	}
+	return originalUrl;
+};
+
+const getStyles = (isHeaderImage = false) => {
+	if (isHeaderImage) {
+		return {
+			container: css`
+				height: 100%;
+				width: 100%;
+
+				img {
+					height: 100%;
+					object-fit: contain;
+					display: block;
+					width: 100%;
+					${between.phablet.and.desktop} {
+						width: 492px;
+					}
+				}
+			`,
+		};
+	}
+	return {
+		container: css`
+			grid-area: main-image;
+			display: block;
+			width: calc(100% + 20px);
+			margin-left: -10px;
+			margin-right: -10px;
+
+			img {
+				width: 100%;
+				object-fit: contain;
+				display: block;
+
+				${from.phablet} {
+					max-height: 332px;
+					padding-bottom: 16px;
+				}
+				${from.desktop} {
+					max-height: none;
+					padding-bottom: 0;
+				}
+			}
+
+			${from.tablet} {
+				height: 100%;
+				width: 100%;
+				align-items: center;
+			}
+
+			${from.phablet} {
+				max-width: 492px; // phabletContentMaxWidth
+				justify-self: center;
+			}
+			${from.desktop} {
+				margin-top: ${space[6]}px;
+				padding-left: ${space[2]}px;
+				justify-self: end;
+			}
+			${between.desktop.and.wide} {
+				max-width: 380px;
+			}
+			${from.wide} {
+				max-width: 485px;
+				align-self: start;
+			}
+		`,
+	};
+};
+
+export const BannerVisual = ({
+	settings,
+	isHeaderImage,
+}: BannerVisualProps): JSX.Element | null => {
+	const { settings: bannerSettings, isCollapsed } = useBanner();
+
+	const imageSettings = settings ?? bannerSettings.imageSettings;
+
+	if (!imageSettings || (isCollapsed && !isHeaderImage)) {
+		return null;
+	}
+
+	const baseImage: ImageAttrs = {
+		url: imageSettings.mainUrl,
+		media: '',
+		alt: imageSettings.altText,
+	};
+
+	const images: ImageAttrs[] = [];
+	const styles = getStyles(isHeaderImage);
+
+	if (imageSettings.mobileUrl) {
+		images.push({
+			url: imageSettings.mobileUrl,
+			media: '(max-width: 739px)',
+		});
+	}
+	if (imageSettings.tabletUrl) {
+		images.push({
+			url: getImageUrl(
+				isCollapsed,
+				imageSettings.mobileUrl,
+				imageSettings.tabletUrl,
+			),
+			media: '(max-width: 979px)',
+		});
+	}
+	if (imageSettings.desktopUrl) {
+		images.push({
+			url: getImageUrl(
+				isCollapsed,
+				imageSettings.tabletUrl,
+				imageSettings.desktopUrl,
+			),
+			media: '(max-width: 1139px)',
+		});
+	}
+	if (imageSettings.leftColUrl) {
+		images.push({
+			url: imageSettings.leftColUrl,
+			media: '(max-width: 1299px)',
+		});
+	}
+	if (imageSettings.wideUrl) {
+		images.push({
+			url: getImageUrl(
+				isCollapsed,
+				imageSettings.tabletUrl,
+				imageSettings.wideUrl,
+			),
+			media: '',
+		});
+	}
+
+	return (
+		<ResponsiveImage
+			baseImage={baseImage}
+			images={images}
+			bannerId={bannerSettings.bannerId}
+			cssOverrides={styles.container}
+		/>
+	);
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
new file mode 100644
index 00000000000..5ee91650a6d
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
@@ -0,0 +1,17 @@
+export {
+	DesignableBanner as Banner,
+	DesignableBannerUnvalidated as BannerUnvalidated,
+	BannerComponent,
+} from './Banner';
+export { BannerHeader } from './components/BannerHeader';
+export { BannerBody } from './components/BannerBody';
+export { BannerVisual } from './components/BannerVisual';
+export { BannerCtas } from './components/BannerCtas';
+export { BannerCloseButton } from './components/BannerCloseButton';
+export { BannerChoiceCards } from './components/BannerChoiceCards';
+export { BannerTicker } from './components/BannerTicker';
+export { BannerArticleCount } from './components/BannerArticleCount';
+export { BannerLogo } from './components/BannerLogo';
+export { BannerContent } from './components/BannerContent';
+export { BannerReminder } from './components/BannerReminder';
+export { useBanner } from './useBanner';
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
new file mode 100644
index 00000000000..ff3f3a806f6
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
@@ -0,0 +1,786 @@
+import type { OphanComponentType } from '@guardian/libs';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import {
+	BannerArticleCount,
+	BannerBody,
+	BannerChoiceCards,
+	BannerCloseButton,
+	BannerComponent,
+	BannerContent,
+	BannerCtas,
+	BannerHeader,
+	BannerLogo,
+	BannerReminder,
+	BannerTicker,
+	BannerVisual,
+} from '../index';
+
+const meta: Meta<typeof BannerComponent> = {
+	title: 'Components/Marketing/DesignableBannerV2',
+	component: BannerComponent,
+	parameters: {
+		layout: 'fullscreen',
+	},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BannerComponent>;
+
+const hex = (r: string, g: string, b: string) => ({
+	r,
+	g,
+	b,
+	kind: 'hex' as const,
+});
+
+const stringToHexColour = (hexStr: string) => {
+	const r = hexStr.substring(0, 2);
+	const g = hexStr.substring(2, 4);
+	const b = hexStr.substring(4, 6);
+	return hex(r, g, b);
+};
+
+const design = {
+	colours: {
+		basic: {
+			background: hex('F1', 'F8', 'FC'),
+			bodyText: hex('00', '00', '00'),
+			headerText: hex('00', '00', '00'),
+			articleCountText: hex('00', '00', '00'),
+			logo: hex('00', '00', '00'),
+		},
+		primaryCta: {
+			default: {
+				background: hex('FF', 'E5', '00'),
+				text: hex('05', '29', '62'),
+			},
+		},
+		secondaryCta: {
+			default: {
+				background: hex('F1', 'F8', 'FC'),
+				text: hex('00', '00', '00'),
+				border: hex('00', '00', '00'),
+			},
+		},
+		highlightedText: {
+			text: hex('00', '00', '00'),
+			highlight: hex('FF', 'E5', '00'),
+		},
+		closeButton: {
+			default: {
+				background: hex('E6', 'EC', 'EF'),
+				text: hex('00', '00', '00'),
+				border: hex('E6', 'EC', 'EF'),
+			},
+		},
+		ticker: {
+			filledProgress: hex('05', '29', '62'),
+			progressBarBackground: hex('cc', 'cc', 'cc'),
+			headlineColour: hex('05', '29', '62'),
+			totalColour: hex('05', '29', '62'),
+			goalColour: hex('05', '29', '62'),
+		},
+	},
+	fonts: {
+		heading: {
+			size: 'medium' as const,
+		},
+	},
+};
+
+const content = {
+	mainContent: {
+		heading: <span>Show your support for reader-funded journalism</span>,
+		paragraphs: [
+			<span key="1">
+				Fearless, investigative reporting shapes a fairer world. At the
+				Guardian, our independence allows us to chase the truth wherever
+				it takes us. <strong>We have no shareholders.</strong> No vested
+				interests. Just the determination and passion to bring readers
+				quality reporting, including groundbreaking investigations.
+			</span>,
+			<span key="2">
+				We do not shy away. And we provide all this for free, for
+				everyone.
+			</span>,
+		],
+		highlightedText: (
+			<span>
+				Show your support today from just £1, or sustain us long term
+				with a little more. Thank you.
+			</span>
+		),
+		primaryCta: {
+			ctaText: 'Support once',
+			ctaUrl: 'https://support.theguardian.com/contribute/one-off',
+		},
+		secondaryCta: {
+			type: 'Custom' as const,
+			cta: {
+				ctaText: 'Support monthly',
+				ctaUrl: 'https://support.theguardian.com/contribute/recurring',
+			},
+		},
+	},
+	mobileContent: {
+		heading: <span>Show your support for reader-funded journalism</span>,
+		paragraphs: [
+			<span key="1">
+				Fearless, investigative reporting shapes a fairer world. At the
+				Guardian, our independence allows us to chase the truth wherever
+				it takes us. <strong>We have no shareholders.</strong> No vested
+				interests. Just the determination and passion to bring readers
+				quality reporting, including groundbreaking investigations.
+			</span>,
+			<span key="2">
+				We do not shy away. And we provide all this for free, for
+				everyone.
+			</span>,
+		],
+		highlightedText: (
+			<span>
+				Show your support today from just £1, or sustain us long term
+				with a little more. Thank you.
+			</span>
+		),
+		primaryCta: {
+			ctaText: 'Support us',
+			ctaUrl: 'https://support.theguardian.com/contribute/one-off',
+		},
+		secondaryCta: {
+			type: 'Custom' as const,
+			cta: {
+				ctaText: 'Learn more',
+				ctaUrl: 'https://support.theguardian.com/contribute/recurring',
+			},
+		},
+	},
+};
+
+const tracking = {
+	ophanPageId: 'kbluzw2csbf83eabedel',
+	componentType: 'ACQUISITIONS_ENGAGEMENT_BANNER' as OphanComponentType,
+	platformId: 'GUARDIAN_WEB',
+	referrerUrl: 'http://localhost:3030/Article',
+	abTestName: 'UsEoyAppealBannerSupporters',
+	abTestVariant: 'control',
+	campaignCode: 'UsEoyAppealBanner_control',
+	products: [],
+};
+
+const tickerSettings = {
+	currencySymbol: '£',
+	copy: {
+		countLabel: '',
+		goalCopy: 'Goal',
+	},
+	tickerData: {
+		total: 500000,
+		goal: 1000000,
+	},
+	name: 'US' as const,
+};
+
+const headerImage = {
+	mobileUrl:
+		'https://i.guim.co.uk/img/media/036510bc15ecdba97355f464006e3db5fbde9129/0_0_620_180/master/620.jpg?width=310&height=90&quality=100&s=01c604815a2f9980a1227c0d91ffa6b1',
+	tabletUrl:
+		'https://i.guim.co.uk/img/media/7030f9d98e368d6e5c7a34c643c76d7d1f5ac63c/0_0_1056_366/master/1056.jpg?width=528&height=183&quality=100&s=f0c02cddda84dfaf4ef261d91bd26159',
+	desktopUrl:
+		'https://i.guim.co.uk/img/media/3c1cb611785d3dccc2674636a6f692da1e2fcdb6/0_0_1392_366/master/1392.jpg?width=696&height=183&quality=100&s=5935c1ae5e8cbc5d9ed616bbadb3b09e',
+	altText: "Guardian: Our Planet can't Speak for itself",
+};
+
+const regularImage = {
+	kind: 'Image' as const,
+	mobileUrl:
+		'https://i.guim.co.uk/img/media/630a3735c02e195be89ab06fd1b8192959e282ab/0_0_1172_560/500.png?width=500&quality=75&s=937595b3f471d6591475955335c7c023',
+	tabletUrl:
+		'https://i.guim.co.uk/img/media/20cc6e0fa146574bb9c4ed410ac1a089fab02ce0/0_0_1428_1344/500.png?width=500&quality=75&s=fe64f647f74a3cb671f8035a473b895f',
+	desktopUrl:
+		'https://i.guim.co.uk/img/media/6c933a058d1ce37a5ad17f79895906150812dfee/0_0_1768_1420/500.png?width=500&quality=75&s=9277532ddf184a308e14218e3576543b',
+	altText: 'Example alt text',
+};
+
+const choiceCardsSettings = {
+	choiceCards: [
+		{
+			product: {
+				supportTier: 'Contribution' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £5/month',
+			isDefault: false,
+			benefits: [
+				{
+					copy: 'Give to the Guardian every month with Support',
+				},
+			],
+		},
+		{
+			product: {
+				supportTier: 'SupporterPlus' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £12/month',
+			isDefault: true,
+			benefitsLabel:
+				'Unlock <strong>All-access digital</strong> benefits:',
+			benefits: [
+				{
+					copy: '<strong>Unlimited</strong> access to the Guardian app',
+				},
+				{ copy: 'Unlimited access to our new Feast App' },
+				{ copy: 'Ad-free reading on all your devices' },
+				{
+					copy: 'Exclusive newsletter for supporters, sent every week from the Guardian newsroom',
+				},
+				{ copy: 'Far fewer asks for support' },
+			],
+			pill: {
+				copy: 'Recommended',
+			},
+		},
+		{
+			product: {
+				supportTier: 'OneOff' as const,
+			},
+			label: `Support with another amount`,
+			isDefault: false,
+			benefits: [
+				{
+					copy: 'We welcome support of any size, any time',
+				},
+			],
+		},
+	],
+	mobileChoiceCards: [
+		{
+			product: {
+				supportTier: 'Contribution' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £5/month',
+			isDefault: false,
+			benefits: [
+				{
+					copy: 'Give to the Guardian every month with Support',
+				},
+			],
+		},
+		{
+			product: {
+				supportTier: 'SupporterPlus' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £12/month',
+			isDefault: true,
+			benefitsLabel: 'Unlock All-access digital benefits:',
+			benefits: [
+				{ copy: 'Unlimited access to the Guardian app' },
+				{ copy: 'Unlimited access to our new Feast App' },
+			],
+			pill: {
+				copy: 'Recommended',
+			},
+		},
+		{
+			product: {
+				supportTier: 'OneOff' as const,
+			},
+			label: `Support with another amount`,
+			isDefault: false,
+			benefits: [
+				{
+					copy: 'We welcome support of any size, any time',
+				},
+			],
+		},
+	],
+};
+
+const choiceCardsWithMixedDestinations = {
+	choiceCards: [
+		{
+			product: {
+				supportTier: 'Contribution' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £5/month',
+			isDefault: false,
+			destination: 'LandingPage' as const,
+			benefits: [
+				{
+					copy: 'Give to the Guardian every month with Support',
+				},
+			],
+		},
+		{
+			product: {
+				supportTier: 'SupporterPlus' as const,
+				ratePlan: 'Monthly' as const,
+			},
+			label: 'Support £12/month',
+			isDefault: true,
+			destination: 'Checkout' as const,
+			benefitsLabel:
+				'Unlock <strong>All-access digital</strong> benefits:',
+			benefits: [
+				{
+					copy: '<strong>Unlimited</strong> access to the Guardian app',
+				},
+				{ copy: 'Unlimited access to our new Feast App' },
+				{ copy: 'Ad-free reading on all your devices' },
+				{
+					copy: 'Exclusive newsletters for subscribers',
+				},
+			],
+		},
+		{
+			product: {
+				supportTier: 'OneOff' as const,
+			},
+			label: 'One-time support',
+			isDefault: false,
+			destination: 'Checkout' as const,
+			benefits: [
+				{
+					copy: 'Support the Guardian with a one-time contribution',
+				},
+			],
+		},
+	],
+};
+
+const contentNoHeading = {
+	...content,
+	mainContent: {
+		...content.mainContent,
+		heading: null,
+	},
+	mobileContent: {
+		...content.mobileContent,
+		heading: null,
+	},
+};
+
+const contentWithReminder = {
+	...content,
+	mainContent: {
+		...content.mainContent,
+		secondaryCta: {
+			type: 'ContributionsReminder' as const,
+		},
+	},
+};
+
+export const Default: Story = {
+	name: 'Basic DesignableBanner',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerCtas />
+			<BannerVisual />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		design: design as any,
+		content: content as any,
+		tracking,
+		articleCounts: {
+			forTargetedWeeks: 0,
+			for52Weeks: 0,
+		},
+		submitComponentEvent: () => Promise.resolve(),
+		onCloseClick: () => {
+			/* close */
+		},
+		onCollapseClick: () => {
+			/* collapse */
+		},
+		onExpandClick: () => {
+			/* expand */
+		},
+		onCtaClick: () => {
+			/* cta */
+		},
+		onSecondaryCtaClick: () => {
+			/* secondary cta */
+		},
+		onNotNowClick: () => {
+			/* not now */
+		},
+		reminderTracking: {
+			onReminderCtaClick: () => {
+				/* reminder cta */
+			},
+			onReminderSetClick: () => {
+				/* reminder set */
+			},
+			onReminderCloseClick: () => {
+				/* reminder close */
+			},
+		},
+		bannerChannel: 'contributions' as const,
+	},
+};
+
+export const WithThreeTierChoiceCards: Story = {
+	name: 'With three tier choice cards',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...Default.args,
+		design: {
+			...design,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('F1F8FC'),
+			},
+		} as any,
+		tracking: {
+			...tracking,
+			abTestVariant: 'THREE_TIER_CHOICE_CARDS',
+		},
+		choiceCardsSettings: choiceCardsSettings as any,
+	},
+};
+
+export const ThreeTierChoiceCardsWithHeaderImageAndCopy: Story = {
+	name: 'With three tier choice cards + header image + header copy',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		design: {
+			...design,
+			headerImage,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('F1F8FC'),
+			},
+		} as any,
+	},
+};
+
+export const HeaderImageOnly: Story = {
+	name: 'With header image and no header copy',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		content: contentNoHeading as any,
+		design: {
+			...design,
+			headerImage,
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('FFFFFF'),
+			},
+			colours: {
+				...design.colours,
+				basic: {
+					...design.colours.basic,
+					background: stringToHexColour('FFFFFF'),
+				},
+			},
+		} as any,
+	},
+};
+
+export const MainImage: Story = {
+	name: 'With main image',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerCtas />
+			<BannerVisual />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...Default.args,
+		design: {
+			...design,
+			visual: regularImage,
+		} as any,
+		tracking: {
+			...tracking,
+			abTestVariant: 'MAIN_IMAGE',
+		},
+	},
+};
+
+export const WithTickerAndThreeTierChoiceCards: Story = {
+	name: 'With ticker + three tier choice cards',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerTicker />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		tickerSettings: tickerSettings as any,
+	},
+};
+
+export const WithThreeTierChoiceCardsAndArticleCount: Story = {
+	name: 'With article count + three tier choice cards',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerArticleCount />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		separateArticleCountSettings: {
+			type: 'above',
+		} as any,
+	},
+};
+
+export const NoChoiceCardOrImage: Story = {
+	name: 'With no choice cards or image',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...Default.args,
+		design: {
+			...design,
+			visual: undefined,
+		} as any,
+	},
+};
+
+export const CollapsableWithThreeTierChoiceCards: Story = {
+	name: 'Collapsable with three tier choice cards',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerArticleCount />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		tickerSettings: tickerSettings as any,
+		separateArticleCountSettings: {
+			type: 'above',
+		} as any,
+		isCollapsible: true,
+	},
+};
+
+export const CollapsableWithMainImage: Story = {
+	name: 'Collapsable with main image',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerCtas />
+			<BannerVisual />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...MainImage.args,
+		isCollapsible: true,
+	},
+};
+
+export const WithReminder: Story = {
+	name: 'With contributions reminder',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+				<BannerReminder />
+			</BannerContent>
+			<BannerCtas />
+			<BannerVisual />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...Default.args,
+		content: contentWithReminder as any,
+	},
+};
+
+export const CollapsableMaybeLaterVariant: Story = {
+	name: 'Collapsable - Maybe later variant',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerCtas />
+			<BannerVisual />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...CollapsableWithMainImage.args,
+	},
+};
+
+export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
+	name: 'Collapsable with three tier choice cards - Maybe later variant',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerArticleCount />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...CollapsableWithThreeTierChoiceCards.args,
+	},
+};
+
+export const WithMixedDestinations: Story = {
+	name: 'With destinationUrl on all choice cards',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		choiceCardsSettings: choiceCardsWithMixedDestinations as any,
+	},
+};
+
+export const DesignThreeAnimatedHeaderImage: Story = {
+	name: 'With animated header image',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		content: contentNoHeading as any,
+		design: {
+			...design,
+			headerImage: {
+				mobileUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				tabletUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				desktopUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				altText: 'Guardian: News provider of the year',
+			},
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('FFFFFF'),
+			},
+			colours: {
+				...design.colours,
+				basic: {
+					...design.colours.basic,
+					background: stringToHexColour('FFFFFF'),
+				},
+			},
+		} as any,
+	},
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
new file mode 100644
index 00000000000..7eb539abfea
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
@@ -0,0 +1,306 @@
+import type { OphanComponentType } from '@guardian/libs';
+import type {
+	ConfigurableDesign,
+	HexColour,
+	TickerName,
+} from '@guardian/support-dotcom-components/dist/shared/types';
+import '@testing-library/jest-dom';
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { BannerRenderProps } from '../../../common/types';
+import {
+	BannerArticleCount,
+	BannerBody,
+	BannerChoiceCards,
+	BannerCloseButton,
+	BannerComponent,
+	BannerContent,
+	BannerCtas,
+	BannerHeader,
+	BannerTicker,
+} from '../index';
+
+jest.mock('../../../../../../lib/useMatchMedia', () => ({
+	useMatchMedia: jest.fn(() => true),
+	removeMediaRulePrefix: jest.fn(() => ''),
+}));
+
+const hex = (r: string, g: string, b: string): HexColour =>
+	({
+		r,
+		g,
+		b,
+		kind: 'hex',
+	}) as any;
+
+const mockProps: BannerRenderProps = {
+	onCtaClick: jest.fn(),
+	onSecondaryCtaClick: jest.fn(),
+	onNotNowClick: jest.fn(),
+	onCloseClick: jest.fn(),
+	onCollapseClick: jest.fn(),
+	onExpandClick: jest.fn(),
+	submitComponentEvent: jest.fn(() => Promise.resolve()),
+	reminderTracking: {
+		onReminderCtaClick: jest.fn(),
+		onReminderSetClick: jest.fn(),
+		onReminderCloseClick: jest.fn(),
+	},
+	content: {
+		mainContent: {
+			heading: <span>Main Heading</span>,
+			paragraphs: [<span key="1">Main Paragraph 1</span>],
+			highlightedText: <span>Main Highlighted</span>,
+			primaryCta: {
+				ctaText: 'Main CTA',
+				ctaUrl: 'https://example.com/main',
+			},
+			secondaryCta: null,
+		},
+		mobileContent: {
+			heading: <span>Mobile Heading</span>,
+			paragraphs: [<span key="1">Mobile Paragraph 1</span>],
+			highlightedText: null,
+			primaryCta: {
+				ctaText: 'Mobile CTA',
+				ctaUrl: 'https://example.com/mobile',
+			},
+			secondaryCta: null,
+		},
+	},
+	tracking: {
+		abTestName: 'test',
+		abTestVariant: 'variant',
+		campaignCode: 'campaign',
+		componentType: 'ACQUISITIONS_HEADER' as OphanComponentType,
+		products: [],
+		ophanPageId: 'page-id',
+		platformId: 'platform-id',
+		referrerUrl: 'referrer-url',
+	},
+	articleCounts: {
+		forTargetedWeeks: 0,
+		for52Weeks: 0,
+	},
+	design: {
+		colours: {
+			basic: {
+				background: hex('F6', 'F6', 'F6'),
+				bodyText: hex('12', '12', '12'),
+				headerText: hex('12', '12', '12'),
+				articleCountText: hex('12', '12', '12'),
+				logo: hex('05', '29', '62'),
+			},
+			primaryCta: {
+				default: {
+					background: hex('05', '29', '62'),
+					text: hex('FF', 'FF', 'FF'),
+				},
+			},
+			secondaryCta: {
+				default: {
+					background: hex('FF', 'FF', 'FF'),
+					text: hex('05', '29', '62'),
+					border: hex('05', '29', '62'),
+				},
+			},
+			highlightedText: {
+				text: hex('12', '12', '12'),
+				highlight: hex('FF', 'E5', '00'),
+			},
+			closeButton: {
+				default: {
+					background: hex('FF', 'FF', 'FF'),
+					text: hex('05', '29', '62'),
+					border: hex('05', '29', '62'),
+				},
+			},
+			ticker: {
+				filledProgress: hex('05', '29', '62'),
+				progressBarBackground: hex('FF', 'FF', 'FF'),
+				headlineColour: hex('12', '12', '12'),
+				totalColour: hex('05', '29', '62'),
+				goalColour: hex('05', '29', '62'),
+			},
+		},
+	} as ConfigurableDesign,
+	bannerChannel: 'contributions',
+};
+
+describe('DesignableBanner V2', () => {
+	it('renders the banner with heading and body', () => {
+		render(
+			<BannerComponent {...mockProps}>
+				<BannerContent>
+					<BannerHeader />
+					<BannerBody />
+					<BannerCtas />
+				</BannerContent>
+			</BannerComponent>,
+		);
+
+		expect(screen.getByText('Main Heading')).toBeInTheDocument();
+		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
+		expect(screen.getByText('Main Highlighted')).toBeInTheDocument();
+	});
+
+	it('calls onCtaClick when the primary CTA is clicked', () => {
+		render(
+			<BannerComponent {...mockProps}>
+				<BannerContent>
+					<BannerCtas />
+				</BannerContent>
+			</BannerComponent>,
+		);
+
+		const cta = screen.getByText('Main CTA');
+		fireEvent.click(cta);
+
+		expect(mockProps.onCtaClick).toHaveBeenCalled();
+	});
+
+	it('calls onCloseClick when the close button is clicked', () => {
+		render(
+			<BannerComponent {...mockProps}>
+				<BannerCloseButton />
+			</BannerComponent>,
+		);
+
+		const closeButton = screen.getByRole('button', { name: /Close/i });
+		fireEvent.click(closeButton);
+
+		expect(mockProps.onCloseClick).toHaveBeenCalled();
+	});
+
+	it('renders as collapsed when isCollapsible is true', () => {
+		render(
+			<BannerComponent {...mockProps} isCollapsible={true}>
+				<BannerContent>
+					<BannerHeader />
+					<BannerBody />
+				</BannerContent>
+			</BannerComponent>,
+		);
+
+		// When collapsed, the body is usually hidden or different
+		// Based on BannerBody.tsx: {!isCollapsed && (...)}
+		expect(screen.queryByText('Main Paragraph 1')).not.toBeInTheDocument();
+		// Header renders mobile content when collapsed
+		expect(screen.getByText('Mobile Heading')).toBeInTheDocument();
+	});
+
+	it('toggles collapse when the toggle button is clicked', () => {
+		render(
+			<BannerComponent {...mockProps} isCollapsible={true}>
+				<BannerHeader />
+				<BannerBody />
+				<BannerCloseButton />
+			</BannerComponent>,
+		);
+
+		expect(screen.queryByText('Main Paragraph 1')).not.toBeInTheDocument();
+
+		const toggleButton = screen.getByRole('button', {
+			name: /Expand banner/i,
+		});
+		fireEvent.click(toggleButton);
+
+		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
+		expect(mockProps.onExpandClick).toHaveBeenCalled();
+	});
+
+	it('renders the ticker when tickerSettings are provided', () => {
+		const tickerProps: BannerRenderProps = {
+			...mockProps,
+			tickerSettings: {
+				name: 'US_2024' as TickerName,
+				tickerData: { total: 100, goal: 200 },
+				currencySymbol: '£',
+				copy: {
+					countLabel: 'Total raised',
+					goalCopy: 'Goal',
+				},
+			},
+		};
+
+		render(
+			<BannerComponent {...tickerProps}>
+				<BannerTicker />
+			</BannerComponent>,
+		);
+
+		// Ticker is a complex component, we just check if the container is there
+		// or if we should mock it. For now, let's see if it renders something recognizable.
+		expect(screen.getByText('Total raised')).toBeInTheDocument();
+	});
+
+	it('renders choice cards when choiceCardSettings are provided', () => {
+		const choiceCardProps: BannerRenderProps = {
+			...mockProps,
+			choiceCardsSettings: {
+				choiceCards: [
+					{
+						product: {
+							supportTier: 'Contribution',
+							ratePlan: 'Monthly',
+						},
+						label: '£10',
+						isDefault: true,
+						benefits: [],
+					},
+					{
+						product: {
+							supportTier: 'Contribution',
+							ratePlan: 'Monthly',
+						},
+						label: '£20',
+						isDefault: false,
+						benefits: [],
+					},
+				],
+			} as any,
+			design: {
+				...mockProps.design!,
+				visual: {
+					kind: 'ChoiceCards',
+					buttonColour: hex('FF', 'FF', 'FF'),
+					buttonTextColour: hex('00', '00', '00'),
+					buttonBorderColour: hex('00', '00', '00'),
+					buttonSelectColour: hex('00', '00', '00'),
+					buttonSelectTextColour: hex('FF', 'FF', 'FF'),
+					buttonSelectBorderColour: hex('00', '00', '00'),
+				} as any,
+			},
+		};
+
+		render(
+			<BannerComponent {...choiceCardProps}>
+				<BannerChoiceCards />
+			</BannerComponent>,
+		);
+
+		expect(screen.getByText('£10')).toBeInTheDocument();
+		expect(screen.getByText('£20')).toBeInTheDocument();
+	});
+
+	it('renders article count when separateArticleCount is true', () => {
+		const articleCountProps: BannerRenderProps = {
+			...mockProps,
+			separateArticleCount: true,
+			articleCounts: {
+				forTargetedWeeks: 5,
+				for52Weeks: 10,
+			},
+		};
+
+		render(
+			<BannerComponent {...articleCountProps}>
+				<BannerArticleCount />
+			</BannerComponent>,
+		);
+
+		// We look for the article count text
+		// Usually it's something like "You've read 5 articles..."
+		expect(screen.getByText(/You've read/)).toBeInTheDocument();
+		expect(screen.getByText(/5/)).toBeInTheDocument();
+	});
+});
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts
new file mode 100644
index 00000000000..131478684b5
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts
@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import { BannerContext, type BannerContextType } from './BannerContext';
+
+export const useBanner = (): BannerContextType => {
+	const context = useContext(BannerContext);
+	if (!context) {
+		throw new Error(
+			'Banner sub-components must be rendered within a <Banner /> provider',
+		);
+	}
+	return context;
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/utils/withCloseable.tsx b/dotcom-rendering/src/components/marketing/banners/utils/withCloseable.tsx
index 639fa03ab1e..deb6a6aa581 100644
--- a/dotcom-rendering/src/components/marketing/banners/utils/withCloseable.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/utils/withCloseable.tsx
@@ -11,6 +11,7 @@ import { setChannelClosedTimestamp } from './localStorage';
 
 export interface CloseableBannerProps extends BannerProps {
 	onClose: () => void;
+	children?: React.ReactNode;
 }
 
 const withCloseable = (
diff --git a/dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx b/dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx
index 6930bd0b954..70291b5a6e8 100644
--- a/dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx
+++ b/dotcom-rendering/src/components/marketing/shared/ThreeTierChoiceCards.tsx
@@ -117,7 +117,7 @@ type ThreeTierChoiceCardsProps = {
 	setSelectedChoiceCard: Dispatch<SetStateAction<ChoiceCard | undefined>>;
 	choices: ChoiceCard[];
 	id: 'epic' | 'banner'; // uniquely identify this choice cards component to avoid conflicting with others
-	submitComponentEvent?: (componentEvent: ComponentEvent) => void;
+	submitComponentEvent?: (componentEvent: ComponentEvent) => Promise<void>;
 	choiceCardSettings?: ChoiceCardSettings;
 };
 

From 687aeb8cdf6688a6a036991814d1da70776daade Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Fri, 16 Jan 2026 16:38:13 +0000
Subject: [PATCH 2/7] refactor(designable-banner-v2): add close handling,
 tracking integration, and layout improvements

- Add close button functionality with channel timestamp storage and custom event dispatch
- Integrate tracking handlers for close, collapse, expand, and CTA clicks
- Add isOpen state to control banner visibility
- Reset selectedChoiceCard when choiceCards change
- Initialize isCollapsed to false instead of using isCollapsableBanner
- Create combined handlers that run both tracking and prop callbacks
---
 .../banners/designableBanner/v2/Banner.tsx    | 500 +++++++++++-------
 .../designableBanner/v2/componentIds.ts       |  14 +
 .../v2/components/BannerBody.tsx              |  28 +-
 .../v2/components/BannerChoiceCards.tsx       |  23 +-
 .../v2/components/BannerCloseButton.tsx       |  18 -
 .../v2/components/BannerContent.tsx           |   1 -
 .../v2/components/BannerCtas.tsx              |  12 +-
 .../v2/components/BannerVisual.tsx            |  20 +-
 .../v2/stories/DesignableBannerV2.stories.tsx |  14 +-
 .../designableBanner/v2/tests/Banner.test.tsx |  20 +-
 10 files changed, 401 insertions(+), 249 deletions(-)
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
index 3941eb11c7b..f8c9bf9973d 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -1,5 +1,11 @@
 import { css } from '@emotion/react';
-import { from, neutral, space, until } from '@guardian/source/foundations';
+import {
+	between,
+	from,
+	neutral,
+	space,
+	until,
+} from '@guardian/source/foundations';
 import { hexColourToString } from '@guardian/support-dotcom-components';
 import type {
 	BannerDesignHeaderImage,
@@ -14,13 +20,16 @@ import {
 	useMatchMedia,
 } from '../../../../../lib/useMatchMedia';
 import { getChoiceCards } from '../../../lib/choiceCards';
+import { createClickEventFromTracking } from '../../../lib/tracking';
 import {
 	bannerWrapper,
 	validatedBannerWrapper,
 } from '../../common/BannerWrapper';
 import type { BannerRenderProps } from '../../common/types';
+import { setChannelClosedTimestamp } from '../../utils/localStorage';
 import type { BannerTemplateSettings, ChoiceCardSettings } from '../settings';
 import { BannerContext, type BannerContextType } from './BannerContext';
+import { getComponentIds } from './componentIds';
 import { BannerArticleCount } from './components/BannerArticleCount';
 import { BannerBody } from './components/BannerBody';
 import { BannerChoiceCards } from './components/BannerChoiceCards';
@@ -115,6 +124,196 @@ interface BannerComponentProps extends BannerRenderProps {
 	children?: React.ReactNode;
 }
 
+const phabletContentMaxWidth = '492px';
+
+const styles = {
+	outerContainer: (background: string, textColor: string = 'inherit') => css`
+		background: ${background};
+		color: ${textColor};
+		bottom: 0px;
+		max-height: 65vh;
+		max-height: 65svh;
+
+		* {
+			box-sizing: border-box;
+		}
+		${from.phablet} {
+			border-top: 1px solid ${neutral[0]};
+		}
+		b,
+		strong {
+			font-weight: bold;
+		}
+		padding: 0 auto;
+	`,
+	layoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
+		display: grid;
+		background: inherit;
+		position: relative;
+		bottom: 0px;
+
+		/* mobile first */
+		${until.phablet} {
+			max-width: 660px;
+			margin: 0 auto;
+			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
+			grid-template-areas:
+				'.	.									.'
+				'.	copy-container						close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
+				'.	cta-container						cta-container';
+		}
+		${from.phablet} {
+			max-width: 740px;
+			margin: 0 auto;
+			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: minmax(0, 0.5fr) ${phabletContentMaxWidth} max-content minmax(
+					0,
+					0.5fr
+				);
+			grid-template-rows: auto auto auto;
+			grid-template-areas:
+				'.	copy-container						close-button			close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
+				'.	cta-container						cta-container						.';
+		}
+		${from.desktop} {
+			max-width: 980px;
+			align-self: stretch;
+			padding: ${space[3]}px ${space[1]}px 0 ${space[3]}px;
+			grid-template-columns: auto 380px auto;
+			grid-template-rows: auto auto;
+
+			grid-template-areas:
+				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
+				'cta-container		${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.leftCol} {
+			max-width: 1140px;
+			bottom: 0px;
+			/* the vertical line aligns with that of standard article */
+			grid-column-gap: 10px;
+			grid-template-columns: 140px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.wide} {
+			max-width: 1300px;
+			/* the vertical line aligns with that of standard article */
+			grid-template-columns: 219px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+	`,
+	collapsedLayoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
+		display: grid;
+		background: inherit;
+		position: relative;
+		bottom: 0px;
+
+		/* mobile first */
+		${until.phablet} {
+			max-width: 660px;
+			margin: 0 auto;
+			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
+			grid-template-areas: ${`
+				'.	.									.'
+				'.	copy-container						close-button'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
+				'.	cta-container						cta-container'
+				`};
+		}
+		${from.phablet} {
+			max-width: 740px;
+			margin: 0 auto;
+			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
+			grid-template-columns:
+				minmax(0, 0.5fr)
+				${phabletContentMaxWidth}
+				1fr
+				0;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'.	copy-container						close-button						.'
+				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
+				'.	cta-container						cta-container						.';
+		}
+		${from.desktop} {
+			max-width: 980px;
+			padding: ${space[1]}px ${space[1]}px 0 ${space[3]}px;
+			grid-template-columns: auto 380px minmax(100px, auto);
+			grid-template-rows: auto auto;
+
+			grid-template-areas:
+				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
+				'cta-container		${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.leftCol} {
+			max-width: 1140px;
+			bottom: 0px;
+			/* the vertical line aligns with that of standard article */
+			grid-column-gap: 10px;
+			grid-template-columns: 140px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+		${from.wide} {
+			max-width: 1300px;
+			/* the vertical line aligns with that of standard article */
+			grid-template-columns: 219px 1px min(460px) min(380px) auto;
+			grid-template-rows: auto auto;
+			grid-template-areas:
+				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
+				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
+		}
+	`,
+	bannerVisualContainer: css`
+		grid-area: main-image;
+
+		margin-left: ${space[2]}px;
+		margin-right: ${space[2]}px;
+
+		${from.phablet} {
+			max-width: ${phabletContentMaxWidth};
+			justify-self: center;
+		}
+		${from.desktop} {
+			margin-top: ${space[6]}px;
+			padding-left: ${space[2]}px;
+			justify-self: end;
+		}
+		${between.desktop.and.wide} {
+			max-width: 380px;
+		}
+		${from.wide} {
+			max-width: 485px;
+			align-self: start;
+		}
+	`,
+	verticalLine: css`
+		grid-area: vert-line;
+		pointer-events: none;
+
+		${until.leftCol} {
+			display: none;
+		}
+		${from.leftCol} {
+			background-color: ${neutral[0]};
+			width: 1px;
+			opacity: 0.2;
+			margin: ${space[6]}px ${space[2]}px 0 ${space[2]}px;
+		}
+	`,
+};
+
 const Banner = ({
 	content,
 	onCloseClick,
@@ -139,6 +338,7 @@ const Banner = ({
 }: BannerComponentProps): JSX.Element | null => {
 	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
 	const bannerRef = useRef<HTMLDivElement>(null);
+	const [isOpen, setIsOpen] = useState(true);
 
 	useEffect(() => {
 		if (bannerRef.current) {
@@ -157,13 +357,30 @@ const Banner = ({
 		ChoiceCard | undefined
 	>(defaultChoiceCard);
 
+	// Reset selectedChoiceCard when choiceCards change
+	useEffect(() => {
+		if (!choiceCards || choiceCards.length === 0) {
+			setSelectedChoiceCard(undefined);
+		}
+	}, [choiceCards]);
+
 	const isCollapsableBanner: boolean =
 		isCollapsible ??
 		(tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
 			tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER'));
 
-	const [isCollapsed, setIsCollapsed] =
-		useState<boolean>(isCollapsableBanner);
+	const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+	const handleClose = useCallback((): void => {
+		setChannelClosedTimestamp(bannerChannel);
+		setIsOpen(false);
+		document.body.focus();
+		document.dispatchEvent(
+			new CustomEvent('banner:close', {
+				detail: { bannerId: 'designable-banner' },
+			}),
+		);
+	}, [bannerChannel]);
 
 	const handleToggleCollapse = useCallback(() => {
 		const nextCollapsed = !isCollapsed;
@@ -255,6 +472,91 @@ const Banner = ({
 		};
 	}, [design]);
 
+	// Create tracking handlers that always run
+	const componentIds = getComponentIds('designable-banner');
+	const trackingHandlers = useMemo(() => {
+		if (!tracking || !submitComponentEvent) {
+			return {
+				onCloseClick: () => {},
+				onCollapseClick: () => {},
+				onExpandClick: () => {},
+				onCtaClick: () => {},
+				onSecondaryCtaClick: () => {},
+			};
+		}
+
+		const clickHandlerFor = (componentId: string, close: boolean) => {
+			return (): void => {
+				const componentClickEvent = createClickEventFromTracking(
+					tracking,
+					componentId,
+				);
+				void submitComponentEvent(componentClickEvent);
+				if (close) {
+					// This would need the onClose function from withCloseable HOC
+					// For now, just handle tracking
+				}
+			};
+		};
+
+		return {
+			onCloseClick: clickHandlerFor(componentIds.close, true),
+			onCollapseClick: clickHandlerFor(componentIds.collapse, false),
+			onExpandClick: clickHandlerFor(componentIds.expand, false),
+			onCtaClick: clickHandlerFor(componentIds.cta, true),
+			onSecondaryCtaClick: clickHandlerFor(
+				componentIds.secondaryCta,
+				true,
+			),
+		};
+	}, [
+		tracking,
+		submitComponentEvent,
+		componentIds.close,
+		componentIds.collapse,
+		componentIds.expand,
+		componentIds.cta,
+		componentIds.secondaryCta,
+	]);
+
+	// Create combined handlers that run both tracking and prop handlers
+	const combinedHandlers = useMemo(() => {
+		return {
+			onClose: () => {
+				// Always run tracking
+				trackingHandlers.onCloseClick();
+				// Also run prop handler if it exists
+				onCloseClick();
+				// Run the close handler
+				handleClose();
+			},
+			onCtaClick: () => {
+				trackingHandlers.onCtaClick();
+				onCtaClick();
+			},
+			onSecondaryCtaClick: () => {
+				trackingHandlers.onSecondaryCtaClick();
+				onSecondaryCtaClick();
+			},
+			onCollapseClick: () => {
+				trackingHandlers.onCollapseClick();
+				onCollapseClick();
+			},
+			onExpandClick: () => {
+				trackingHandlers.onExpandClick();
+				onExpandClick();
+			},
+		};
+	}, [
+		trackingHandlers,
+		onCloseClick,
+		onCtaClick,
+		onSecondaryCtaClick,
+		onCollapseClick,
+		onExpandClick,
+		handleClose,
+	]);
+
 	const contextValue: BannerContextType | null = useMemo(() => {
 		if (!design || !settings) {
 			return null;
@@ -278,10 +580,10 @@ const Banner = ({
 			choices: choiceCards,
 			selectedChoiceCard,
 			actions: {
-				onClose: onCloseClick,
+				onClose: combinedHandlers.onClose,
 				onToggleCollapse: handleToggleCollapse,
-				onCtaClick,
-				onSecondaryCtaClick,
+				onCtaClick: combinedHandlers.onCtaClick,
+				onSecondaryCtaClick: combinedHandlers.onSecondaryCtaClick,
 				onChoiceCardChange: setSelectedChoiceCard,
 				submitComponentEvent,
 			},
@@ -301,17 +603,15 @@ const Banner = ({
 		isTabletOrAbove,
 		choiceCards,
 		selectedChoiceCard,
-		onCloseClick,
+		combinedHandlers,
 		handleToggleCollapse,
-		onCtaClick,
-		onSecondaryCtaClick,
 		submitComponentEvent,
 		separateArticleCount,
 		reminderTracking,
 		bannerChannel,
 	]);
 
-	if (!design || !settings || !contextValue) {
+	if (!isOpen) {
 		return null;
 	}
 
@@ -321,19 +621,23 @@ const Banner = ({
 			? 'maybe-later'
 			: '';
 
-	const cardsImageOrSpaceTemplateString = isCollapsableBanner
-		? 'main-image'
+	const cardsImageOrSpaceTemplateString = settings
+		? settings.choiceCardSettings
+			? 'choice-cards-container'
+			: settings.imageSettings
+			? 'main-image'
+			: '.'
 		: '.';
 
 	return (
-		<BannerContext.Provider value={contextValue}>
+		<BannerContext.Provider value={contextValue ?? undefined}>
 			<div
 				ref={bannerRef}
 				role="alert"
 				tabIndex={-1}
 				css={styles.outerContainer(
-					settings.containerSettings.backgroundColour,
-					settings.containerSettings.textColor,
+					settings?.containerSettings?.backgroundColour ?? '',
+					settings?.containerSettings?.textColor ?? 'inherit',
 				)}
 				className={contextClassName}
 			>
@@ -370,172 +674,6 @@ const Banner = ({
 	);
 };
 
-const phabletContentMaxWidth = '492px';
-
-const styles = {
-	outerContainer: (background: string, textColor: string = 'inherit') => css`
-		background: ${background};
-		color: ${textColor};
-		bottom: 0px;
-		max-height: 65vh;
-		max-height: 65svh;
-
-		* {
-			box-sizing: border-box;
-		}
-		${from.phablet} {
-			border-top: 1px solid ${neutral[0]};
-		}
-		b,
-		strong {
-			font-weight: bold;
-		}
-		padding: 0 auto;
-	`,
-	layoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
-		display: grid;
-		background: inherit;
-		position: relative;
-		bottom: 0px;
-
-		/* mobile first */
-		${until.phablet} {
-			max-width: 660px;
-			margin: 0 auto;
-			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
-			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
-			grid-template-areas:
-				'.	.									.'
-				'.	copy-container						close-button'
-				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
-				'.	cta-container						cta-container';
-		}
-		${from.phablet} {
-			max-width: 740px;
-			margin: 0 auto;
-			padding: ${space[3]}px ${space[3]}px 0 ${space[3]}px;
-			grid-template-columns: minmax(0, 0.5fr) ${phabletContentMaxWidth} max-content minmax(
-					0,
-					0.5fr
-				);
-			grid-template-rows: auto auto auto;
-			grid-template-areas:
-				'.	copy-container						close-button			close-button'
-				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
-				'.	cta-container						cta-container						.';
-		}
-		${from.desktop} {
-			max-width: 980px;
-			align-self: stretch;
-			padding: ${space[3]}px ${space[1]}px 0 ${space[3]}px;
-			grid-template-columns: auto 380px auto;
-			grid-template-rows: auto auto;
-
-			grid-template-areas:
-				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
-				'cta-container		${cardsImageOrSpaceTemplateString}	.';
-		}
-		${from.leftCol} {
-			max-width: 1140px;
-			bottom: 0px;
-			/* the vertical line aligns with that of standard article */
-			grid-column-gap: 10px;
-			grid-template-columns: 140px 1px min(460px) min(380px) auto;
-			grid-template-rows: auto auto;
-			grid-template-areas:
-				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
-				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
-		}
-		${from.wide} {
-			max-width: 1300px;
-			/* the vertical line aligns with that of standard article */
-			grid-template-columns: 219px 1px min(460px) min(380px) auto;
-			grid-template-rows: auto auto;
-			grid-template-areas:
-				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button'
-				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
-		}
-	`,
-	collapsedLayoutOverrides: (cardsImageOrSpaceTemplateString: string) => css`
-		display: grid;
-		background: inherit;
-		position: relative;
-		bottom: 0px;
-
-		/* mobile first */
-		${until.phablet} {
-			max-width: 660px;
-			margin: 0 auto;
-			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
-			grid-template-columns: auto max(${phabletContentMaxWidth} auto);
-			grid-template-areas: ${`
-				'.	.									.'
-				'.	copy-container						close-button'
-				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}'
-				'.	cta-container						cta-container'
-				`};
-		}
-		${from.phablet} {
-			max-width: 740px;
-			margin: 0 auto;
-			padding: ${space[2]}px ${space[3]}px 0 ${space[3]}px;
-			grid-template-columns:
-				minmax(0, 0.5fr)
-				${phabletContentMaxWidth}
-				1fr
-				0;
-			grid-template-rows: auto auto;
-			grid-template-areas:
-				'.	copy-container						close-button						.'
-				'.	${cardsImageOrSpaceTemplateString}	${cardsImageOrSpaceTemplateString}	.'
-				'.	cta-container						cta-container						.';
-		}
-		${from.desktop} {
-			max-width: 980px;
-			padding: ${space[1]}px ${space[1]}px 0 ${space[3]}px;
-			grid-template-columns: auto 380px minmax(100px, auto);
-			grid-template-rows: auto auto;
-
-			grid-template-areas:
-				'copy-container		${cardsImageOrSpaceTemplateString}	close-button'
-				'cta-container		${cardsImageOrSpaceTemplateString}	.';
-		}
-		${from.leftCol} {
-			max-width: 1140px;
-			bottom: 0px;
-			/* the vertical line aligns with that of standard article */
-			grid-column-gap: 10px;
-			grid-template-columns: 140px 1px min(460px) min(380px) auto;
-			grid-template-rows: auto auto;
-			grid-template-areas:
-				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
-				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
-		}
-		${from.wide} {
-			max-width: 1300px;
-			/* the vertical line aligns with that of standard article */
-			grid-template-columns: 219px 1px min(460px) min(380px) auto;
-			grid-template-rows: auto auto;
-			grid-template-areas:
-				'logo	vert-line	copy-container	${cardsImageOrSpaceTemplateString}	close-button '
-				'.		vert-line	cta-container	${cardsImageOrSpaceTemplateString}	.';
-		}
-	`,
-	verticalLine: css`
-		grid-area: vert-line;
-
-		${until.leftCol} {
-			display: none;
-		}
-		${from.leftCol} {
-			background-color: ${neutral[0]};
-			width: 1px;
-			opacity: 0.2;
-			margin: ${space[6]}px ${space[2]}px 0 ${space[2]}px;
-		}
-	`,
-};
-
 const unvalidated = bannerWrapper(Banner, 'designable-banner');
 const validated = validatedBannerWrapper(Banner, 'designable-banner');
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts
new file mode 100644
index 00000000000..28b7bdaaf5b
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts
@@ -0,0 +1,14 @@
+import type { BannerId } from '../../common/types';
+
+export const getComponentIds = (bannerId: BannerId) => ({
+	close: `${bannerId} : close`,
+	cta: `${bannerId} : cta`,
+	secondaryCta: `${bannerId} : secondary-cta`,
+	notNow: `${bannerId} : not now`,
+	signIn: `${bannerId} : sign in`,
+	reminderCta: `${bannerId} : reminder-cta`,
+	reminderSet: `${bannerId} : reminder-set`,
+	reminderClose: `${bannerId} : reminder-close`,
+	collapse: `${bannerId} : collapse`,
+	expand: `${bannerId} : expand`,
+});
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
index 51e3d705dd3..70aba78d8b7 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
@@ -1,22 +1,25 @@
 import { css } from '@emotion/react';
-import {
-	from,
-	textEgyptian15,
-	textEgyptian17,
-	textEgyptianBold15,
-	textEgyptianBold17,
-} from '@guardian/source/foundations';
+import { from, space, textSans15 } from '@guardian/source/foundations';
 import { createBannerBodyCopy } from '../../components/BannerText';
 import { useBanner } from '../useBanner';
 
 const getStyles = (textColour: string, highlightColour?: string) => ({
 	container: css`
+		margin-bottom: ${space[4]}px;
+
+		${from.tablet} {
+			margin-bottom: ${space[6]}px;
+		}
+
 		p {
 			margin: 0 0 0.5em 0;
 		}
-		${textEgyptian15};
-		${from.desktop} {
-			${textEgyptian17};
+		${textSans15};
+		span {
+			${textSans15};
+		}
+		.rr_banner_highlight > span {
+			font-weight: 700;
 		}
 	`,
 	highlightedText: css`
@@ -30,11 +33,6 @@ const getStyles = (textColour: string, highlightColour?: string) => ({
             box-decoration-break: clone;
         `
 			: ''}
-
-		${textEgyptianBold15};
-		${from.desktop} {
-			${textEgyptianBold17};
-		}
 	`,
 });
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
index 6c575314b97..fbd0cf57a73 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
@@ -10,11 +10,14 @@ import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
+import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { enrichSupportUrl, getChoiceCardUrl } from '../../../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../../../shared/ThreeTierChoiceCards';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
 import { useBanner } from '../useBanner';
 
+const phabletContentMaxWidth = '492px';
+
 const styles = {
 	threeTierChoiceCardsContainer: css`
 		grid-area: choice-cards-container;
@@ -24,7 +27,7 @@ const styles = {
 			margin-top: -${space[6]}px;
 		}
 		${from.phablet} {
-			max-width: 492px; // phabletContentMaxWidth
+			max-width: ${phabletContentMaxWidth};
 		}
 		${from.desktop} {
 			justify-self: end;
@@ -181,6 +184,24 @@ export const BannerChoiceCards = (): JSX.Element | null => {
 						? mainOrMobileContent.primaryCta?.ctaText
 						: 'Continue'}
 				</LinkButton>
+				{!isCollapsed &&
+					mainOrMobileContent.secondaryCta?.type ===
+						SecondaryCtaType.Custom && (
+						<LinkButton
+							href={mainOrMobileContent.secondaryCta.cta.ctaUrl}
+							onClick={actions.onSecondaryCtaClick}
+							priority="secondary"
+							cssOverrides={buttonStyles(
+								settings.secondaryCtaSettings,
+							)}
+							theme={buttonThemes(
+								settings.secondaryCtaSettings,
+								'secondary',
+							)}
+						>
+							{mainOrMobileContent.secondaryCta.cta.ctaText}
+						</LinkButton>
+					)}
 				{isCollapsed && (
 					<div css={styles.maybeLaterButtonSizing}>
 						<LinkButton
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
index 38400844463..d3f49313ece 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source/foundations';
 import {
 	Button,
-	LinkButton,
 	SvgChevronDownSingle,
 	SvgChevronUpSingle,
 	SvgCross,
@@ -132,23 +131,6 @@ export const BannerCloseButton = (): JSX.Element => {
 						{isCollapsed ? 'Expand banner' : 'Collapse banner'}
 					</Button>
 				</div>
-				{isCollapsed && (
-					<LinkButton
-						onClick={actions.onClose}
-						cssOverrides={buttonStyles(
-							settings.closeButtonSettings,
-							styles.closeABTestButtonOverrides,
-						)}
-						priority="tertiary"
-						theme={buttonThemes(
-							settings.closeButtonSettings,
-							'tertiary',
-						)}
-						size="small"
-					>
-						Close
-					</LinkButton>
-				)}
 			</div>
 		);
 	}
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
index 2021a02063e..5124f4e96c9 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
@@ -16,7 +16,6 @@ const styles = {
 		}
 		${from.desktop} {
 			padding-right: ${space[5]}px;
-			margin-bottom: ${space[2]}px;
 		}
 		${from.leftCol} {
 			padding-left: ${space[3]}px;
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
index 48e15aa3c5d..72ec2012ec4 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source/foundations';
 import { LinkButton } from '@guardian/source/react-components';
-import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
 import { useBanner } from '../useBanner';
 
@@ -100,6 +99,15 @@ export const BannerCtas = (): JSX.Element | null => {
 
 	const { primaryCta, secondaryCta } = mainOrMobileContent;
 
+	// Check if secondaryCta has the expected structure
+	const hasCustomCta =
+		secondaryCta &&
+		'type' in secondaryCta &&
+		'cta' in secondaryCta &&
+		typeof secondaryCta.cta === 'object' &&
+		'ctaUrl' in secondaryCta.cta &&
+		'ctaText' in secondaryCta.cta;
+
 	if (!primaryCta && !secondaryCta && !isCollapsed) {
 		return null;
 	}
@@ -122,7 +130,7 @@ export const BannerCtas = (): JSX.Element | null => {
 						{primaryCta.ctaText}
 					</LinkButton>
 				)}
-				{secondaryCta?.type === SecondaryCtaType.Custom && (
+				{hasCustomCta && (
 					<LinkButton
 						href={secondaryCta.cta.ctaUrl}
 						onClick={actions.onSecondaryCtaClick}
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
index d2d3c2fe8da..5e3c7853327 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { between, from, space } from '@guardian/source/foundations';
+import { between, from } from '@guardian/source/foundations';
 import type { Image } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ImageAttrs } from '../../../../shared/ResponsiveImage';
 import { ResponsiveImage } from '../../../../shared/ResponsiveImage';
@@ -42,7 +42,6 @@ const getStyles = (isHeaderImage = false) => {
 	}
 	return {
 		container: css`
-			grid-area: main-image;
 			display: block;
 			width: calc(100% + 20px);
 			margin-left: -10px;
@@ -68,23 +67,6 @@ const getStyles = (isHeaderImage = false) => {
 				width: 100%;
 				align-items: center;
 			}
-
-			${from.phablet} {
-				max-width: 492px; // phabletContentMaxWidth
-				justify-self: center;
-			}
-			${from.desktop} {
-				margin-top: ${space[6]}px;
-				padding-left: ${space[2]}px;
-				justify-self: end;
-			}
-			${between.desktop.and.wide} {
-				max-width: 380px;
-			}
-			${from.wide} {
-				max-width: 485px;
-				align-self: start;
-			}
 		`,
 	};
 };
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
index ff3f3a806f6..46bf329aaa4 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
@@ -394,8 +394,8 @@ export const Default: Story = {
 		content: content as any,
 		tracking,
 		articleCounts: {
-			forTargetedWeeks: 0,
-			for52Weeks: 0,
+			forTargetedWeeks: 12,
+			for52Weeks: 12,
 		},
 		submitComponentEvent: () => Promise.resolve(),
 		onCloseClick: () => {
@@ -624,6 +624,7 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
+				<BannerTicker />
 				<BannerArticleCount />
 				<BannerBody />
 			</BannerContent>
@@ -699,6 +700,10 @@ export const CollapsableMaybeLaterVariant: Story = {
 	),
 	args: {
 		...CollapsableWithMainImage.args,
+		tracking: {
+			...tracking,
+			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
+		},
 	},
 };
 
@@ -709,6 +714,7 @@ export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
+				<BannerTicker />
 				<BannerArticleCount />
 				<BannerBody />
 			</BannerContent>
@@ -719,6 +725,10 @@ export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
 	),
 	args: {
 		...CollapsableWithThreeTierChoiceCards.args,
+		tracking: {
+			...tracking,
+			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
+		},
 	},
 };
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
index 7eb539abfea..c19ddda9c8d 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
@@ -171,7 +171,7 @@ describe('DesignableBanner V2', () => {
 		expect(mockProps.onCloseClick).toHaveBeenCalled();
 	});
 
-	it('renders as collapsed when isCollapsible is true', () => {
+	it('renders as uncollapsed by default when isCollapsible is true', () => {
 		render(
 			<BannerComponent {...mockProps} isCollapsible={true}>
 				<BannerContent>
@@ -181,11 +181,9 @@ describe('DesignableBanner V2', () => {
 			</BannerComponent>,
 		);
 
-		// When collapsed, the body is usually hidden or different
-		// Based on BannerBody.tsx: {!isCollapsed && (...)}
-		expect(screen.queryByText('Main Paragraph 1')).not.toBeInTheDocument();
-		// Header renders mobile content when collapsed
-		expect(screen.getByText('Mobile Heading')).toBeInTheDocument();
+		// Now starts uncollapsed by default
+		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
+		expect(screen.getByText('Main Heading')).toBeInTheDocument();
 	});
 
 	it('toggles collapse when the toggle button is clicked', () => {
@@ -197,15 +195,17 @@ describe('DesignableBanner V2', () => {
 			</BannerComponent>,
 		);
 
-		expect(screen.queryByText('Main Paragraph 1')).not.toBeInTheDocument();
+		// Starts uncollapsed
+		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
 
 		const toggleButton = screen.getByRole('button', {
-			name: /Expand banner/i,
+			name: /Collapse banner/i,
 		});
 		fireEvent.click(toggleButton);
 
-		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
-		expect(mockProps.onExpandClick).toHaveBeenCalled();
+		// Now should be collapsed
+		expect(screen.queryByText('Main Paragraph 1')).not.toBeInTheDocument();
+		expect(mockProps.onCollapseClick).toHaveBeenCalled();
 	});
 
 	it('renders the ticker when tickerSettings are provided', () => {

From 6adfdf91450056504e0924d975e78033cb3e9969 Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Mon, 19 Jan 2026 10:56:03 +0000
Subject: [PATCH 3/7] refactor(designable-banner-v2): improve mobile layout and
 conditional rendering

---
 .../banners/designableBanner/v2/Banner.tsx    |  16 +-
 .../v2/components/BannerArticleCount.tsx      |  16 +-
 .../v2/components/BannerVisual.tsx            |  40 +++--
 .../v2/stories/DesignableBannerV2.stories.tsx | 158 +++++++++---------
 4 files changed, 125 insertions(+), 105 deletions(-)

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
index f8c9bf9973d..76c7986c7c7 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -475,23 +475,13 @@ const Banner = ({
 	// Create tracking handlers that always run
 	const componentIds = getComponentIds('designable-banner');
 	const trackingHandlers = useMemo(() => {
-		if (!tracking || !submitComponentEvent) {
-			return {
-				onCloseClick: () => {},
-				onCollapseClick: () => {},
-				onExpandClick: () => {},
-				onCtaClick: () => {},
-				onSecondaryCtaClick: () => {},
-			};
-		}
-
 		const clickHandlerFor = (componentId: string, close: boolean) => {
 			return (): void => {
 				const componentClickEvent = createClickEventFromTracking(
 					tracking,
 					componentId,
 				);
-				void submitComponentEvent(componentClickEvent);
+				void submitComponentEvent?.(componentClickEvent);
 				if (close) {
 					// This would need the onClose function from withCloseable HOC
 					// For now, just handle tracking
@@ -636,8 +626,8 @@ const Banner = ({
 				role="alert"
 				tabIndex={-1}
 				css={styles.outerContainer(
-					settings?.containerSettings?.backgroundColour ?? '',
-					settings?.containerSettings?.textColor ?? 'inherit',
+					settings?.containerSettings.backgroundColour ?? '',
+					settings?.containerSettings.textColor ?? 'inherit',
 				)}
 				className={contextClassName}
 			>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
index 35d49869c75..081104b1e5a 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
@@ -3,6 +3,7 @@ import {
 	from,
 	headlineBold15,
 	headlineBold17,
+	space,
 } from '@guardian/source/foundations';
 import { CustomArticleCountCopy } from '../../components/CustomArticleCountCopy';
 import { DesignableBannerArticleCountOptOut } from '../../components/DesignableBannerArticleCountOptOut';
@@ -14,6 +15,7 @@ const containsArticleCountTemplate = (copy: string): boolean =>
 const styles = {
 	container: (textColor: string = 'inherit') => css`
 		margin: 0;
+		margin-bottom: ${space[3]}px;
 		color: ${textColor};
 		${headlineBold15}
 		${from.desktop} {
@@ -23,8 +25,18 @@ const styles = {
 };
 
 export const BannerArticleCount = (): JSX.Element | null => {
-	const { articleCounts, settings, separateArticleCountSettings } =
-		useBanner();
+	const {
+		articleCounts,
+		settings,
+		separateArticleCountSettings,
+		isCollapsed,
+	} = useBanner();
+
+	// Don't render article count when banner is collapsed
+	if (isCollapsed) {
+		return null;
+	}
+
 	const numArticles = articleCounts.forTargetedWeeks;
 	const copy = separateArticleCountSettings?.copy;
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
index 5e3c7853327..49e3c6fd4a7 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { between, from } from '@guardian/source/foundations';
+import { between, from, space } from '@guardian/source/foundations';
 import type { Image } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ImageAttrs } from '../../../../shared/ResponsiveImage';
 import { ResponsiveImage } from '../../../../shared/ResponsiveImage';
@@ -42,10 +42,27 @@ const getStyles = (isHeaderImage = false) => {
 	}
 	return {
 		container: css`
-			display: block;
-			width: calc(100% + 20px);
-			margin-left: -10px;
-			margin-right: -10px;
+			grid-area: main-image;
+
+			margin-left: ${space[2]}px;
+			margin-right: ${space[2]}px;
+
+			${from.phablet} {
+				max-width: 492px;
+				justify-self: center;
+			}
+			${from.desktop} {
+				margin-top: ${space[6]}px;
+				padding-left: ${space[2]}px;
+				justify-self: end;
+			}
+			${between.desktop.and.wide} {
+				max-width: 380px;
+			}
+			${from.wide} {
+				max-width: 485px;
+				align-self: start;
+			}
 
 			img {
 				width: 100%;
@@ -136,11 +153,12 @@ export const BannerVisual = ({
 	}
 
 	return (
-		<ResponsiveImage
-			baseImage={baseImage}
-			images={images}
-			bannerId={bannerSettings.bannerId}
-			cssOverrides={styles.container}
-		/>
+		<div css={styles.container}>
+			<ResponsiveImage
+				baseImage={baseImage}
+				images={images}
+				bannerId={bannerSettings.bannerId}
+			/>
+		</div>
 	);
 };
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
index 46bf329aaa4..0c0b9a521d1 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
@@ -551,6 +551,49 @@ export const MainImage: Story = {
 	},
 };
 
+export const DesignThreeAnimatedHeaderImage: Story = {
+	name: 'With animated header image',
+	render: (args) => (
+		<BannerComponent {...args}>
+			<BannerLogo />
+			<BannerContent>
+				<BannerHeader />
+				<BannerBody />
+			</BannerContent>
+			<BannerChoiceCards />
+			<BannerCtas />
+			<BannerCloseButton />
+		</BannerComponent>
+	),
+	args: {
+		...WithThreeTierChoiceCards.args,
+		content: contentNoHeading as any,
+		design: {
+			...design,
+			headerImage: {
+				mobileUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				tabletUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				desktopUrl:
+					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
+				altText: 'Guardian: News provider of the year',
+			},
+			visual: {
+				kind: 'ChoiceCards',
+				buttonColour: stringToHexColour('FFFFFF'),
+			},
+			colours: {
+				...design.colours,
+				basic: {
+					...design.colours.basic,
+					background: stringToHexColour('FFFFFF'),
+				},
+			},
+		} as any,
+	},
+};
+
 export const WithTickerAndThreeTierChoiceCards: Story = {
 	name: 'With ticker + three tier choice cards',
 	render: (args) => (
@@ -617,15 +660,13 @@ export const NoChoiceCardOrImage: Story = {
 	},
 };
 
-export const CollapsableWithThreeTierChoiceCards: Story = {
-	name: 'Collapsable with three tier choice cards',
+export const WithMixedDestinations: Story = {
+	name: 'With destinationUrl on all choice cards',
 	render: (args) => (
 		<BannerComponent {...args}>
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
-				<BannerTicker />
-				<BannerArticleCount />
 				<BannerBody />
 			</BannerContent>
 			<BannerChoiceCards />
@@ -635,31 +676,7 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
 	),
 	args: {
 		...WithThreeTierChoiceCards.args,
-		tickerSettings: tickerSettings as any,
-		separateArticleCountSettings: {
-			type: 'above',
-		} as any,
-		isCollapsible: true,
-	},
-};
-
-export const CollapsableWithMainImage: Story = {
-	name: 'Collapsable with main image',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
-	args: {
-		...MainImage.args,
-		isCollapsible: true,
+		choiceCardsSettings: choiceCardsWithMixedDestinations as any,
 	},
 };
 
@@ -684,56 +701,54 @@ export const WithReminder: Story = {
 	},
 };
 
-export const CollapsableMaybeLaterVariant: Story = {
-	name: 'Collapsable - Maybe later variant',
+export const CollapsableWithThreeTierChoiceCards: Story = {
+	name: 'Collapsable with three tier choice cards',
 	render: (args) => (
 		<BannerComponent {...args}>
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
+				<BannerArticleCount />
+				<BannerTicker />
 				<BannerBody />
 			</BannerContent>
+			<BannerChoiceCards />
 			<BannerCtas />
-			<BannerVisual />
 			<BannerCloseButton />
 		</BannerComponent>
 	),
 	args: {
-		...CollapsableWithMainImage.args,
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
-		},
+		...WithThreeTierChoiceCards.args,
+		tickerSettings: tickerSettings as any,
+		separateArticleCountSettings: {
+			type: 'above',
+		} as any,
+		isCollapsible: true,
 	},
 };
 
-export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
-	name: 'Collapsable with three tier choice cards - Maybe later variant',
+export const CollapsableWithMainImage: Story = {
+	name: 'Collapsable with main image',
 	render: (args) => (
 		<BannerComponent {...args}>
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
-				<BannerTicker />
-				<BannerArticleCount />
 				<BannerBody />
 			</BannerContent>
-			<BannerChoiceCards />
 			<BannerCtas />
+			<BannerVisual />
 			<BannerCloseButton />
 		</BannerComponent>
 	),
 	args: {
-		...CollapsableWithThreeTierChoiceCards.args,
-		tracking: {
-			...tracking,
-			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
-		},
+		...MainImage.args,
+		isCollapsible: true,
 	},
 };
 
-export const WithMixedDestinations: Story = {
-	name: 'With destinationUrl on all choice cards',
+export const CollapsableMaybeLaterVariant: Story = {
+	name: 'Collapsable - Maybe later variant',
 	render: (args) => (
 		<BannerComponent {...args}>
 			<BannerLogo />
@@ -741,24 +756,29 @@ export const WithMixedDestinations: Story = {
 				<BannerHeader />
 				<BannerBody />
 			</BannerContent>
-			<BannerChoiceCards />
 			<BannerCtas />
+			<BannerVisual />
 			<BannerCloseButton />
 		</BannerComponent>
 	),
 	args: {
-		...WithThreeTierChoiceCards.args,
-		choiceCardsSettings: choiceCardsWithMixedDestinations as any,
+		...CollapsableWithMainImage.args,
+		tracking: {
+			...tracking,
+			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
+		},
 	},
 };
 
-export const DesignThreeAnimatedHeaderImage: Story = {
-	name: 'With animated header image',
+export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
+	name: 'Collapsable with three tier choice cards - Maybe later variant',
 	render: (args) => (
 		<BannerComponent {...args}>
 			<BannerLogo />
 			<BannerContent>
 				<BannerHeader />
+				<BannerArticleCount />
+				<BannerTicker />
 				<BannerBody />
 			</BannerContent>
 			<BannerChoiceCards />
@@ -767,30 +787,10 @@ export const DesignThreeAnimatedHeaderImage: Story = {
 		</BannerComponent>
 	),
 	args: {
-		...WithThreeTierChoiceCards.args,
-		content: contentNoHeading as any,
-		design: {
-			...design,
-			headerImage: {
-				mobileUrl:
-					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
-				tabletUrl:
-					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
-				desktopUrl:
-					'https://uploads.guim.co.uk/2024/05/13/GuardianLogo.svg',
-				altText: 'Guardian: News provider of the year',
-			},
-			visual: {
-				kind: 'ChoiceCards',
-				buttonColour: stringToHexColour('FFFFFF'),
-			},
-			colours: {
-				...design.colours,
-				basic: {
-					...design.colours.basic,
-					background: stringToHexColour('FFFFFF'),
-				},
-			},
-		} as any,
+		...CollapsableWithThreeTierChoiceCards.args,
+		tracking: {
+			...tracking,
+			abTestVariant: 'COLLAPSABLE_V2_MAYBE_LATER',
+		},
 	},
 };

From e1683761a1736745bfc4b1c4a6f0db8bb5fbabeb Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Tue, 20 Jan 2026 15:38:29 +0000
Subject: [PATCH 4/7] refactor(designable-banner-v2): replace context with prop
 drilling for banner data

---
 .../banners/designableBanner/v2/Banner.tsx    |  83 ++++----
 .../v2/{BannerContext.tsx => BannerProps.ts}  |   7 +-
 .../v2/components/BannerArticleCount.tsx      |  32 +--
 .../v2/components/BannerBody.tsx              |  23 +-
 .../v2/components/BannerChoiceCards.tsx       |  90 ++++----
 .../v2/components/BannerCloseButton.tsx       |  42 ++--
 .../v2/components/BannerContent.tsx           |   8 +-
 .../v2/components/BannerCtas.tsx              |  51 +++--
 .../v2/components/BannerHeader.tsx            |  45 ++--
 .../v2/components/BannerLogo.tsx              |  16 +-
 .../v2/components/BannerReminder.tsx          |  23 +-
 .../v2/components/BannerTicker.tsx            |  28 +--
 .../v2/components/BannerVisual.tsx            |  18 +-
 .../banners/designableBanner/v2/index.ts      |   2 +-
 .../v2/stories/DesignableBannerV2.stories.tsx | 201 +-----------------
 .../designableBanner/v2/tests/Banner.test.tsx |  71 +------
 .../banners/designableBanner/v2/useBanner.ts  |  12 --
 17 files changed, 254 insertions(+), 498 deletions(-)
 rename dotcom-rendering/src/components/marketing/banners/designableBanner/v2/{BannerContext.tsx => BannerProps.ts} (89%)
 delete mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
index 76c7986c7c7..75896cde290 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -28,7 +28,7 @@ import {
 import type { BannerRenderProps } from '../../common/types';
 import { setChannelClosedTimestamp } from '../../utils/localStorage';
 import type { BannerTemplateSettings, ChoiceCardSettings } from '../settings';
-import { BannerContext, type BannerContextType } from './BannerContext';
+import type { BannerData } from './BannerProps';
 import { getComponentIds } from './componentIds';
 import { BannerArticleCount } from './components/BannerArticleCount';
 import { BannerBody } from './components/BannerBody';
@@ -120,10 +120,6 @@ const buildChoiceCardSettings = (
 	};
 };
 
-interface BannerComponentProps extends BannerRenderProps {
-	children?: React.ReactNode;
-}
-
 const phabletContentMaxWidth = '492px';
 
 const styles = {
@@ -334,8 +330,7 @@ const Banner = ({
 	promoCodes,
 	separateArticleCount,
 	isCollapsible,
-	children,
-}: BannerComponentProps): JSX.Element | null => {
+}: BannerRenderProps): JSX.Element | null => {
 	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
 	const bannerRef = useRef<HTMLDivElement>(null);
 	const [isOpen, setIsOpen] = useState(true);
@@ -547,7 +542,7 @@ const Banner = ({
 		handleClose,
 	]);
 
-	const contextValue: BannerContextType | null = useMemo(() => {
+	const bannerData: BannerData | null = useMemo(() => {
 		if (!design || !settings) {
 			return null;
 		}
@@ -601,7 +596,7 @@ const Banner = ({
 		bannerChannel,
 	]);
 
-	if (!isOpen) {
+	if (!isOpen || !bannerData) {
 		return null;
 	}
 
@@ -620,47 +615,41 @@ const Banner = ({
 		: '.';
 
 	return (
-		<BannerContext.Provider value={contextValue ?? undefined}>
+		<div
+			ref={bannerRef}
+			role="alert"
+			tabIndex={-1}
+			css={styles.outerContainer(
+				bannerData.settings.containerSettings.backgroundColour ?? '',
+				bannerData.settings.containerSettings.textColor ?? 'inherit',
+			)}
+			className={contextClassName}
+		>
 			<div
-				ref={bannerRef}
-				role="alert"
-				tabIndex={-1}
-				css={styles.outerContainer(
-					settings?.containerSettings.backgroundColour ?? '',
-					settings?.containerSettings.textColor ?? 'inherit',
-				)}
-				className={contextClassName}
+				css={
+					isCollapsableBanner && isCollapsed
+						? styles.collapsedLayoutOverrides(
+								cardsImageOrSpaceTemplateString,
+						  )
+						: styles.layoutOverrides(
+								cardsImageOrSpaceTemplateString,
+						  )
+				}
 			>
-				<div
-					css={
-						isCollapsableBanner && isCollapsed
-							? styles.collapsedLayoutOverrides(
-									cardsImageOrSpaceTemplateString,
-							  )
-							: styles.layoutOverrides(
-									cardsImageOrSpaceTemplateString,
-							  )
-					}
-				>
-					<div css={styles.verticalLine} />
-					{children ?? (
-						<>
-							<BannerLogo />
-							<BannerContent>
-								<BannerHeader />
-								<BannerTicker />
-								<BannerArticleCount />
-								<BannerBody />
-							</BannerContent>
-							<BannerChoiceCards />
-							<BannerCtas />
-							<BannerVisual />
-							<BannerCloseButton />
-						</>
-					)}
-				</div>
+				<div css={styles.verticalLine} />
+				<BannerLogo bannerData={bannerData} />
+				<BannerContent bannerData={bannerData}>
+					<BannerHeader bannerData={bannerData} />
+					<BannerArticleCount bannerData={bannerData} />
+					<BannerTicker bannerData={bannerData} />
+					<BannerBody bannerData={bannerData} />
+				</BannerContent>
+				<BannerChoiceCards bannerData={bannerData} />
+				<BannerCtas bannerData={bannerData} />
+				<BannerVisual bannerData={bannerData} />
+				<BannerCloseButton bannerData={bannerData} />
 			</div>
-		</BannerContext.Provider>
+		</div>
 	);
 };
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
similarity index 89%
rename from dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx
rename to dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
index 63f26c7db0a..7c4ef119215 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerContext.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
@@ -1,14 +1,13 @@
 import type { BannerChannel } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
 import type { Dispatch, SetStateAction } from 'react';
-import { createContext } from 'react';
 import type {
 	BannerRenderProps,
 	ContributionsReminderTracking,
 } from '../../common/types';
 import type { BannerTemplateSettings } from '../settings';
 
-export interface BannerContextType {
+export interface BannerData {
 	// --- Raw Data ---
 	bannerChannel: BannerChannel;
 	content: BannerRenderProps['content'];
@@ -42,7 +41,3 @@ export interface BannerContextType {
 		submitComponentEvent: BannerRenderProps['submitComponentEvent'];
 	};
 }
-
-export const BannerContext = createContext<BannerContextType | undefined>(
-	undefined,
-);
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
index 081104b1e5a..64c7d469edf 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
@@ -7,7 +7,7 @@ import {
 } from '@guardian/source/foundations';
 import { CustomArticleCountCopy } from '../../components/CustomArticleCountCopy';
 import { DesignableBannerArticleCountOptOut } from '../../components/DesignableBannerArticleCountOptOut';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const containsArticleCountTemplate = (copy: string): boolean =>
 	copy.includes('%%ARTICLE_COUNT%%');
@@ -24,41 +24,41 @@ const styles = {
 	`,
 };
 
-export const BannerArticleCount = (): JSX.Element | null => {
-	const {
-		articleCounts,
-		settings,
-		separateArticleCountSettings,
-		isCollapsed,
-	} = useBanner();
-
-	// Don't render article count when banner is collapsed
-	if (isCollapsed) {
+export const BannerArticleCount = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	if (
+		bannerData.isCollapsed ||
+		(!bannerData.separateArticleCount &&
+			!bannerData.separateArticleCountSettings)
+	) {
 		return null;
 	}
 
-	const numArticles = articleCounts.forTargetedWeeks;
-	const copy = separateArticleCountSettings?.copy;
+	const numArticles = bannerData.articleCounts.forTargetedWeeks;
+	const copy = bannerData.separateArticleCountSettings?.copy;
 
 	if (copy && containsArticleCountTemplate(copy)) {
 		return (
 			<CustomArticleCountCopy
 				numArticles={numArticles}
 				copy={copy}
-				settings={settings}
+				settings={bannerData.settings}
 			/>
 		);
 	}
 
 	return (
-		<div css={styles.container(settings.articleCountTextColour)}>
+		<div css={styles.container(bannerData.settings.articleCountTextColour)}>
 			{numArticles >= 50
 				? "Congratulations on being one of our top readers globally - you've read "
 				: "You've read "}
 			<DesignableBannerArticleCountOptOut
 				numArticles={numArticles}
 				nextWord=" articles"
-				settings={settings}
+				settings={bannerData.settings}
 			/>{' '}
 			in the last year
 		</div>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
index 70aba78d8b7..b7f657a30de 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import { from, space, textSans15 } from '@guardian/source/foundations';
 import { createBannerBodyCopy } from '../../components/BannerText';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const getStyles = (textColour: string, highlightColour?: string) => ({
 	container: css`
@@ -36,21 +36,24 @@ const getStyles = (textColour: string, highlightColour?: string) => ({
 	`,
 });
 
-export const BannerBody = (): JSX.Element | null => {
-	const { content, settings, isTabletOrAbove, isCollapsed } = useBanner();
-
-	const textColour = settings.containerSettings.textColor ?? '';
-	const highlightColour = settings.highlightedTextSettings.highlightColour;
+export const BannerBody = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	const textColour = bannerData.settings.containerSettings.textColor ?? '';
+	const highlightColour =
+		bannerData.settings.highlightedTextSettings.highlightColour;
 
 	const styles = getStyles(textColour, highlightColour);
 
-	const mainOrMobileContent = isTabletOrAbove
-		? content.mainContent
-		: content.mobileContent;
+	const mainOrMobileContent = bannerData.isTabletOrAbove
+		? bannerData.content.mainContent
+		: bannerData.content.mobileContent;
 
 	return (
 		<div css={styles.container}>
-			{!isCollapsed &&
+			{!bannerData.isCollapsed &&
 				createBannerBodyCopy(
 					mainOrMobileContent.paragraphs,
 					mainOrMobileContent.highlightedText,
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
index fbd0cf57a73..40bb02f58df 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
@@ -14,7 +14,7 @@ import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { enrichSupportUrl, getChoiceCardUrl } from '../../../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../../../shared/ThreeTierChoiceCards';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const phabletContentMaxWidth = '492px';
 
@@ -124,95 +124,101 @@ const styles = {
 	`,
 };
 
-export const BannerChoiceCards = (): JSX.Element | null => {
-	const {
-		settings,
-		isCollapsed,
-		choices,
-		selectedChoiceCard,
-		actions,
-		tracking,
-		promoCodes,
-		countryCode,
-		content,
-		isTabletOrAbove,
-	} = useBanner();
-
-	if (!settings.choiceCardSettings || !selectedChoiceCard || !choices) {
+export const BannerChoiceCards = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	if (
+		!bannerData.settings.choiceCardSettings ||
+		!bannerData.selectedChoiceCard ||
+		!bannerData.choices
+	) {
 		return null;
 	}
 
-	const mainOrMobileContent = isTabletOrAbove
-		? content.mainContent
-		: content.mobileContent;
+	const mainOrMobileContent = bannerData.isTabletOrAbove
+		? bannerData.content.mainContent
+		: bannerData.content.mobileContent;
 
 	return (
 		<div css={styles.threeTierChoiceCardsContainer}>
-			{!isCollapsed && (
+			{!bannerData.isCollapsed && (
 				<ThreeTierChoiceCards
-					selectedChoiceCard={selectedChoiceCard}
-					setSelectedChoiceCard={actions.onChoiceCardChange}
-					choices={choices}
+					selectedChoiceCard={bannerData.selectedChoiceCard}
+					setSelectedChoiceCard={
+						bannerData.actions.onChoiceCardChange
+					}
+					choices={bannerData.choices}
 					id={'banner'}
-					submitComponentEvent={actions.submitComponentEvent}
-					choiceCardSettings={settings.choiceCardSettings}
+					submitComponentEvent={
+						bannerData.actions.submitComponentEvent
+					}
+					choiceCardSettings={bannerData.settings.choiceCardSettings}
 				/>
 			)}
 			<div
 				css={styles.ctaContainer(
-					isCollapsed,
-					settings.containerSettings.backgroundColour,
+					bannerData.isCollapsed,
+					bannerData.settings.containerSettings.backgroundColour,
 				)}
 			>
 				<LinkButton
 					href={enrichSupportUrl({
-						baseUrl: getChoiceCardUrl(selectedChoiceCard),
-						tracking,
-						promoCodes: promoCodes ?? [],
-						countryCode,
+						baseUrl: getChoiceCardUrl(
+							bannerData.selectedChoiceCard,
+						),
+						tracking: bannerData.tracking,
+						promoCodes: bannerData.promoCodes ?? [],
+						countryCode: bannerData.countryCode,
 					})}
-					onClick={actions.onCtaClick}
+					onClick={bannerData.actions.onCtaClick}
 					priority="primary"
 					cssOverrides={[styles.linkButtonStyles]}
-					theme={buttonThemes(settings.primaryCtaSettings, 'primary')}
+					theme={buttonThemes(
+						bannerData.settings.primaryCtaSettings,
+						'primary',
+					)}
 					icon={<SvgArrowRightStraight />}
 					iconSide="right"
 					target="_blank"
 					rel="noopener noreferrer"
 				>
-					{isCollapsed
+					{bannerData.isCollapsed
 						? mainOrMobileContent.primaryCta?.ctaText
 						: 'Continue'}
 				</LinkButton>
-				{!isCollapsed &&
+				{!bannerData.isCollapsed &&
 					mainOrMobileContent.secondaryCta?.type ===
 						SecondaryCtaType.Custom && (
 						<LinkButton
 							href={mainOrMobileContent.secondaryCta.cta.ctaUrl}
-							onClick={actions.onSecondaryCtaClick}
+							onClick={bannerData.actions.onSecondaryCtaClick}
 							priority="secondary"
 							cssOverrides={buttonStyles(
-								settings.secondaryCtaSettings,
+								bannerData.settings.secondaryCtaSettings,
 							)}
 							theme={buttonThemes(
-								settings.secondaryCtaSettings,
+								bannerData.settings.secondaryCtaSettings,
 								'secondary',
 							)}
 						>
 							{mainOrMobileContent.secondaryCta.cta.ctaText}
 						</LinkButton>
 					)}
-				{isCollapsed && (
+				{bannerData.isCollapsed && (
 					<div css={styles.maybeLaterButtonSizing}>
 						<LinkButton
-							onClick={actions.onClose}
+							onClick={bannerData.actions.onClose}
 							priority="tertiary"
 							cssOverrides={[
-								buttonStyles(settings.secondaryCtaSettings),
+								buttonStyles(
+									bannerData.settings.secondaryCtaSettings,
+								),
 								styles.maybeLaterButton,
 							]}
 							theme={buttonThemes(
-								settings.secondaryCtaSettings,
+								bannerData.settings.secondaryCtaSettings,
 								'tertiary',
 							)}
 						>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
index d3f49313ece..624b8042205 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCloseButton.tsx
@@ -7,7 +7,7 @@ import {
 	SvgCross,
 } from '@guardian/source/react-components';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const styles = {
 	closeButtonContainer: css`
@@ -97,25 +97,32 @@ const styles = {
 	`,
 };
 
-export const BannerCloseButton = (): JSX.Element => {
-	const { isCollapsible, isCollapsed, settings, actions } = useBanner();
-
-	if (isCollapsible) {
+export const BannerCloseButton = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element => {
+	if (bannerData.isCollapsible) {
 		return (
-			<div css={styles.closeAndCollapseButtonContainer(isCollapsed)}>
+			<div
+				css={styles.closeAndCollapseButtonContainer(
+					bannerData.isCollapsed,
+				)}
+			>
 				<div css={styles.collapsableButtonContainer}>
 					<Button
-						onClick={actions.onToggleCollapse}
+						onClick={bannerData.actions.onToggleCollapse}
 						cssOverrides={[
 							styles.iconOverrides(
-								settings.closeButtonSettings.default
+								bannerData.settings.closeButtonSettings.default
 									.backgroundColour,
-								settings.closeButtonSettings.default.textColour,
+								bannerData.settings.closeButtonSettings.default
+									.textColour,
 							),
 						]}
 						priority="secondary"
 						icon={
-							isCollapsed ? (
+							bannerData.isCollapsed ? (
 								<SvgChevronUpSingle />
 							) : (
 								<SvgChevronDownSingle />
@@ -123,12 +130,14 @@ export const BannerCloseButton = (): JSX.Element => {
 						}
 						size="small"
 						theme={buttonThemes(
-							settings.closeButtonSettings,
+							bannerData.settings.closeButtonSettings,
 							'secondary',
 						)}
 						hideLabel={true}
 					>
-						{isCollapsed ? 'Expand banner' : 'Collapse banner'}
+						{bannerData.isCollapsed
+							? 'Expand banner'
+							: 'Collapse banner'}
 					</Button>
 				</div>
 			</div>
@@ -138,13 +147,16 @@ export const BannerCloseButton = (): JSX.Element => {
 	return (
 		<div css={styles.closeButtonContainer}>
 			<Button
-				onClick={actions.onClose}
+				onClick={bannerData.actions.onClose}
 				cssOverrides={buttonStyles(
-					settings.closeButtonSettings,
+					bannerData.settings.closeButtonSettings,
 					styles.closeButtonOverrides,
 				)}
 				priority="tertiary"
-				theme={buttonThemes(settings.closeButtonSettings, 'tertiary')}
+				theme={buttonThemes(
+					bannerData.settings.closeButtonSettings,
+					'tertiary',
+				)}
 				icon={<SvgCross />}
 				size="small"
 				hideLabel={true}
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
index 5124f4e96c9..662c985f84f 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerContent.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { from, space } from '@guardian/source/foundations';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const phabletContentMaxWidth = '492px';
 
@@ -25,12 +25,12 @@ const styles = {
 
 export const BannerContent = ({
 	children,
+	bannerData,
 }: {
 	children: React.ReactNode;
+	bannerData: BannerData;
 }): JSX.Element | null => {
-	const { design } = useBanner();
-
-	if (!design) {
+	if (!bannerData.design) {
 		return null;
 	}
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
index 72ec2012ec4..9b24114fb65 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source/foundations';
 import { LinkButton } from '@guardian/source/react-components';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const styles = {
 	/* ctas for use with main images */
@@ -79,23 +79,18 @@ const styles = {
 	`,
 };
 
-export const BannerCtas = (): JSX.Element | null => {
-	const {
-		content,
-		settings,
-		actions,
-		isTabletOrAbove,
-		selectedChoiceCard,
-		isCollapsed,
-	} = useBanner();
-
-	if (selectedChoiceCard) {
+export const BannerCtas = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	if (bannerData.selectedChoiceCard) {
 		return null;
 	}
 
-	const mainOrMobileContent = isTabletOrAbove
-		? content.mainContent
-		: content.mobileContent;
+	const mainOrMobileContent = bannerData.isTabletOrAbove
+		? bannerData.content.mainContent
+		: bannerData.content.mobileContent;
 
 	const { primaryCta, secondaryCta } = mainOrMobileContent;
 
@@ -108,7 +103,7 @@ export const BannerCtas = (): JSX.Element | null => {
 		'ctaUrl' in secondaryCta.cta &&
 		'ctaText' in secondaryCta.cta;
 
-	if (!primaryCta && !secondaryCta && !isCollapsed) {
+	if (!primaryCta && !secondaryCta && !bannerData.isCollapsed) {
 		return null;
 	}
 
@@ -118,12 +113,14 @@ export const BannerCtas = (): JSX.Element | null => {
 				{primaryCta && (
 					<LinkButton
 						href={primaryCta.ctaUrl}
-						onClick={actions.onCtaClick}
+						onClick={bannerData.actions.onCtaClick}
 						size="small"
 						priority="primary"
-						cssOverrides={buttonStyles(settings.primaryCtaSettings)}
+						cssOverrides={buttonStyles(
+							bannerData.settings.primaryCtaSettings,
+						)}
 						theme={buttonThemes(
-							settings.primaryCtaSettings,
+							bannerData.settings.primaryCtaSettings,
 							'primary',
 						)}
 					>
@@ -133,30 +130,32 @@ export const BannerCtas = (): JSX.Element | null => {
 				{hasCustomCta && (
 					<LinkButton
 						href={secondaryCta.cta.ctaUrl}
-						onClick={actions.onSecondaryCtaClick}
+						onClick={bannerData.actions.onSecondaryCtaClick}
 						size="small"
 						priority="secondary"
 						cssOverrides={buttonStyles(
-							settings.secondaryCtaSettings,
+							bannerData.settings.secondaryCtaSettings,
 						)}
 						theme={buttonThemes(
-							settings.secondaryCtaSettings,
+							bannerData.settings.secondaryCtaSettings,
 							'secondary',
 						)}
 					>
 						{secondaryCta.cta.ctaText}
 					</LinkButton>
 				)}
-				{isCollapsed && (
+				{bannerData.isCollapsed && (
 					<LinkButton
-						onClick={actions.onClose}
+						onClick={bannerData.actions.onClose}
 						size="small"
 						priority="tertiary"
 						cssOverrides={[
-							buttonStyles(settings.secondaryCtaSettings),
+							buttonStyles(
+								bannerData.settings.secondaryCtaSettings,
+							),
 						]}
 						theme={buttonThemes(
-							settings.secondaryCtaSettings,
+							bannerData.settings.secondaryCtaSettings,
 							'tertiary',
 						)}
 					>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
index fd349dae0dc..38e070e918b 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
@@ -11,7 +11,7 @@ import {
 	until,
 } from '@guardian/source/foundations';
 import type { JSX } from 'react';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 import { BannerVisual } from './BannerVisual';
 
 const getStyles = (
@@ -100,25 +100,26 @@ const getStyles = (
 	};
 };
 
-export const BannerHeader = (): JSX.Element | null => {
-	const { content, design, settings, isCollapsed, isTabletOrAbove } =
-		useBanner();
-
-	if (!design) {
+export const BannerHeader = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	if (!bannerData.design) {
 		return null;
 	}
 
-	const headlineSize = design.fonts?.heading.size ?? 'medium';
+	const headlineSize = bannerData.design.fonts?.heading.size ?? 'medium';
 	const styles = getStyles(
-		settings.headerSettings?.textColour,
-		settings.containerSettings.backgroundColour,
+		bannerData.settings.headerSettings?.textColour,
+		bannerData.settings.containerSettings.backgroundColour,
 		headlineSize,
-		isCollapsed,
-		!!settings.headerSettings?.headerImage,
-		!!settings.imageSettings,
+		bannerData.isCollapsed,
+		!!bannerData.settings.headerSettings?.headerImage,
+		!!bannerData.settings.imageSettings,
 	);
 
-	const containerCss = settings.headerSettings?.headerImage
+	const containerCss = bannerData.settings.headerSettings?.headerImage
 		? styles.headerWithImageContainer
 		: styles.headerContainer;
 
@@ -126,18 +127,22 @@ export const BannerHeader = (): JSX.Element | null => {
 		<div css={containerCss}>
 			<div css={styles.container}>
 				<header css={styles.header}>
-					{settings.headerSettings?.headerImage && (
+					{bannerData.settings.headerSettings?.headerImage && (
 						<BannerVisual
-							settings={settings.headerSettings.headerImage}
+							bannerData={bannerData}
+							settings={
+								bannerData.settings.headerSettings.headerImage
+							}
 							isHeaderImage={true}
 						/>
 					)}
-					{(content.mainContent.heading ??
-						content.mobileContent.heading) && (
+					{(bannerData.content.mainContent.heading ??
+						bannerData.content.mobileContent.heading) && (
 						<h2>
-							{isTabletOrAbove && !isCollapsed
-								? content.mainContent.heading
-								: content.mobileContent.heading}
+							{bannerData.isTabletOrAbove &&
+							!bannerData.isCollapsed
+								? bannerData.content.mainContent.heading
+								: bannerData.content.mobileContent.heading}
 						</h2>
 					)}
 				</header>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
index 128e4ff4cee..1428dbec25c 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerLogo.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/react';
 import { from, space, until } from '@guardian/source/foundations';
 import { SvgGuardianLogo } from '@guardian/source/react-components';
 import { hexColourToString } from '@guardian/support-dotcom-components';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const styles = {
 	guardianLogoContainer: css`
@@ -21,17 +21,21 @@ const styles = {
 	`,
 };
 
-export const BannerLogo = (): JSX.Element | null => {
-	const { design } = useBanner();
-
-	if (!design) {
+export const BannerLogo = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	if (!bannerData.design) {
 		return null;
 	}
 
 	return (
 		<div css={styles.guardianLogoContainer}>
 			<SvgGuardianLogo
-				textColor={hexColourToString(design.colours.basic.logo)}
+				textColor={hexColourToString(
+					bannerData.design.colours.basic.logo,
+				)}
 			/>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
index d70919a7787..4492c9ecd47 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
@@ -3,7 +3,7 @@ import { space } from '@guardian/source/foundations';
 import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { useContributionsReminderSignup } from '../../../../hooks/useContributionsReminderSignup';
 import { DesignableBannerReminderSignedOut } from '../../components/DesignableBannerReminderSignedOut';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 const styles = {
 	container: css`
@@ -14,13 +14,14 @@ const styles = {
 	`,
 };
 
-export const BannerReminder = (): JSX.Element | null => {
-	const { content, reminderTracking, settings, isTabletOrAbove } =
-		useBanner();
-
-	const mainOrMobileContent = isTabletOrAbove
-		? content.mainContent
-		: content.mobileContent;
+export const BannerReminder = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
+	const mainOrMobileContent = bannerData.isTabletOrAbove
+		? bannerData.content.mainContent
+		: bannerData.content.mobileContent;
 
 	const { secondaryCta } = mainOrMobileContent;
 
@@ -42,7 +43,7 @@ export const BannerReminder = (): JSX.Element | null => {
 	}
 
 	const onReminderSetClick = (email: string) => {
-		reminderTracking.onReminderSetClick();
+		bannerData.reminderTracking.onReminderSetClick();
 		createReminder(email);
 	};
 
@@ -52,7 +53,9 @@ export const BannerReminder = (): JSX.Element | null => {
 				reminderCta={secondaryCta}
 				reminderStatus={reminderStatus}
 				onReminderSetClick={onReminderSetClick}
-				setReminderCtaSettings={settings.secondaryCtaSettings}
+				setReminderCtaSettings={
+					bannerData.settings.secondaryCtaSettings
+				}
 			/>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
index d9fb56f4d00..3567e121365 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
@@ -1,14 +1,16 @@
 import { Ticker } from '@guardian/source-development-kitchen/react-components';
 import { templateSpacing } from '../../styles/templateStyles';
-import { useBanner } from '../useBanner';
-
-export const BannerTicker = (): JSX.Element | null => {
-	const { tickerSettings, settings, isCollapsed } = useBanner();
+import type { BannerData } from '../BannerProps';
 
+export const BannerTicker = ({
+	bannerData,
+}: {
+	bannerData: BannerData;
+}): JSX.Element | null => {
 	if (
-		!tickerSettings?.tickerData ||
-		isCollapsed ||
-		!settings.tickerStylingSettings
+		!bannerData.tickerSettings?.tickerData ||
+		bannerData.isCollapsed ||
+		!bannerData.settings.tickerStylingSettings
 	) {
 		return null;
 	}
@@ -16,13 +18,15 @@ export const BannerTicker = (): JSX.Element | null => {
 	return (
 		<div css={templateSpacing.bannerTicker}>
 			<Ticker
-				currencySymbol={tickerSettings.currencySymbol}
+				currencySymbol={bannerData.tickerSettings.currencySymbol}
 				copy={{
-					headline: tickerSettings.copy.countLabel,
-					goalCopy: tickerSettings.copy.goalCopy,
+					headline: bannerData.tickerSettings.copy.countLabel,
+					goalCopy: bannerData.tickerSettings.copy.goalCopy,
 				}}
-				tickerData={tickerSettings.tickerData}
-				tickerStylingSettings={settings.tickerStylingSettings}
+				tickerData={bannerData.tickerSettings.tickerData}
+				tickerStylingSettings={
+					bannerData.settings.tickerStylingSettings
+				}
 				size={'medium'}
 			/>
 		</div>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
index 49e3c6fd4a7..3183700b3cf 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -3,9 +3,10 @@ import { between, from, space } from '@guardian/source/foundations';
 import type { Image } from '@guardian/support-dotcom-components/dist/shared/types';
 import type { ImageAttrs } from '../../../../shared/ResponsiveImage';
 import { ResponsiveImage } from '../../../../shared/ResponsiveImage';
-import { useBanner } from '../useBanner';
+import type { BannerData } from '../BannerProps';
 
 interface BannerVisualProps {
+	bannerData: BannerData;
 	settings?: Image;
 	isHeaderImage?: boolean;
 }
@@ -89,14 +90,13 @@ const getStyles = (isHeaderImage = false) => {
 };
 
 export const BannerVisual = ({
+	bannerData,
 	settings,
 	isHeaderImage,
 }: BannerVisualProps): JSX.Element | null => {
-	const { settings: bannerSettings, isCollapsed } = useBanner();
+	const imageSettings = settings ?? bannerData.settings.imageSettings;
 
-	const imageSettings = settings ?? bannerSettings.imageSettings;
-
-	if (!imageSettings || (isCollapsed && !isHeaderImage)) {
+	if (!imageSettings || (bannerData.isCollapsed && !isHeaderImage)) {
 		return null;
 	}
 
@@ -118,7 +118,7 @@ export const BannerVisual = ({
 	if (imageSettings.tabletUrl) {
 		images.push({
 			url: getImageUrl(
-				isCollapsed,
+				bannerData.isCollapsed,
 				imageSettings.mobileUrl,
 				imageSettings.tabletUrl,
 			),
@@ -128,7 +128,7 @@ export const BannerVisual = ({
 	if (imageSettings.desktopUrl) {
 		images.push({
 			url: getImageUrl(
-				isCollapsed,
+				bannerData.isCollapsed,
 				imageSettings.tabletUrl,
 				imageSettings.desktopUrl,
 			),
@@ -144,7 +144,7 @@ export const BannerVisual = ({
 	if (imageSettings.wideUrl) {
 		images.push({
 			url: getImageUrl(
-				isCollapsed,
+				bannerData.isCollapsed,
 				imageSettings.tabletUrl,
 				imageSettings.wideUrl,
 			),
@@ -157,7 +157,7 @@ export const BannerVisual = ({
 			<ResponsiveImage
 				baseImage={baseImage}
 				images={images}
-				bannerId={bannerSettings.bannerId}
+				bannerId={bannerData.settings.bannerId}
 			/>
 		</div>
 	);
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
index 5ee91650a6d..524218229a5 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
@@ -3,6 +3,7 @@ export {
 	DesignableBannerUnvalidated as BannerUnvalidated,
 	BannerComponent,
 } from './Banner';
+export type { BannerData } from './BannerProps';
 export { BannerHeader } from './components/BannerHeader';
 export { BannerBody } from './components/BannerBody';
 export { BannerVisual } from './components/BannerVisual';
@@ -14,4 +15,3 @@ export { BannerArticleCount } from './components/BannerArticleCount';
 export { BannerLogo } from './components/BannerLogo';
 export { BannerContent } from './components/BannerContent';
 export { BannerReminder } from './components/BannerReminder';
-export { useBanner } from './useBanner';
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
index 0c0b9a521d1..f3f4a8cefa4 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
@@ -1,19 +1,6 @@
 import type { OphanComponentType } from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import {
-	BannerArticleCount,
-	BannerBody,
-	BannerChoiceCards,
-	BannerCloseButton,
-	BannerComponent,
-	BannerContent,
-	BannerCtas,
-	BannerHeader,
-	BannerLogo,
-	BannerReminder,
-	BannerTicker,
-	BannerVisual,
-} from '../index';
+import { BannerComponent } from '../index';
 
 const meta: Meta<typeof BannerComponent> = {
 	title: 'Components/Marketing/DesignableBannerV2',
@@ -377,18 +364,6 @@ const contentWithReminder = {
 
 export const Default: Story = {
 	name: 'Basic DesignableBanner',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		design: design as any,
 		content: content as any,
@@ -433,18 +408,6 @@ export const Default: Story = {
 
 export const WithThreeTierChoiceCards: Story = {
 	name: 'With three tier choice cards',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...Default.args,
 		design: {
@@ -464,18 +427,6 @@ export const WithThreeTierChoiceCards: Story = {
 
 export const ThreeTierChoiceCardsWithHeaderImageAndCopy: Story = {
 	name: 'With three tier choice cards + header image + header copy',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		design: {
@@ -491,18 +442,6 @@ export const ThreeTierChoiceCardsWithHeaderImageAndCopy: Story = {
 
 export const HeaderImageOnly: Story = {
 	name: 'With header image and no header copy',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		content: contentNoHeading as any,
@@ -526,18 +465,6 @@ export const HeaderImageOnly: Story = {
 
 export const MainImage: Story = {
 	name: 'With main image',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...Default.args,
 		design: {
@@ -553,18 +480,6 @@ export const MainImage: Story = {
 
 export const DesignThreeAnimatedHeaderImage: Story = {
 	name: 'With animated header image',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		content: contentNoHeading as any,
@@ -596,19 +511,6 @@ export const DesignThreeAnimatedHeaderImage: Story = {
 
 export const WithTickerAndThreeTierChoiceCards: Story = {
 	name: 'With ticker + three tier choice cards',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerTicker />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		tickerSettings: tickerSettings as any,
@@ -617,19 +519,6 @@ export const WithTickerAndThreeTierChoiceCards: Story = {
 
 export const WithThreeTierChoiceCardsAndArticleCount: Story = {
 	name: 'With article count + three tier choice cards',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerArticleCount />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		separateArticleCountSettings: {
@@ -640,17 +529,6 @@ export const WithThreeTierChoiceCardsAndArticleCount: Story = {
 
 export const NoChoiceCardOrImage: Story = {
 	name: 'With no choice cards or image',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...Default.args,
 		design: {
@@ -662,18 +540,6 @@ export const NoChoiceCardOrImage: Story = {
 
 export const WithMixedDestinations: Story = {
 	name: 'With destinationUrl on all choice cards',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		choiceCardsSettings: choiceCardsWithMixedDestinations as any,
@@ -682,19 +548,6 @@ export const WithMixedDestinations: Story = {
 
 export const WithReminder: Story = {
 	name: 'With contributions reminder',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-				<BannerReminder />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...Default.args,
 		content: contentWithReminder as any,
@@ -703,20 +556,6 @@ export const WithReminder: Story = {
 
 export const CollapsableWithThreeTierChoiceCards: Story = {
 	name: 'Collapsable with three tier choice cards',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerArticleCount />
-				<BannerTicker />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...WithThreeTierChoiceCards.args,
 		tickerSettings: tickerSettings as any,
@@ -729,18 +568,6 @@ export const CollapsableWithThreeTierChoiceCards: Story = {
 
 export const CollapsableWithMainImage: Story = {
 	name: 'Collapsable with main image',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...MainImage.args,
 		isCollapsible: true,
@@ -749,18 +576,6 @@ export const CollapsableWithMainImage: Story = {
 
 export const CollapsableMaybeLaterVariant: Story = {
 	name: 'Collapsable - Maybe later variant',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerBody />
-			</BannerContent>
-			<BannerCtas />
-			<BannerVisual />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...CollapsableWithMainImage.args,
 		tracking: {
@@ -772,20 +587,6 @@ export const CollapsableMaybeLaterVariant: Story = {
 
 export const CollapsableWithThreeTierChoiceCardsMaybeLaterVariant: Story = {
 	name: 'Collapsable with three tier choice cards - Maybe later variant',
-	render: (args) => (
-		<BannerComponent {...args}>
-			<BannerLogo />
-			<BannerContent>
-				<BannerHeader />
-				<BannerArticleCount />
-				<BannerTicker />
-				<BannerBody />
-			</BannerContent>
-			<BannerChoiceCards />
-			<BannerCtas />
-			<BannerCloseButton />
-		</BannerComponent>
-	),
 	args: {
 		...CollapsableWithThreeTierChoiceCards.args,
 		tracking: {
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
index c19ddda9c8d..1fb0355c268 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
@@ -7,17 +7,7 @@ import type {
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { BannerRenderProps } from '../../../common/types';
-import {
-	BannerArticleCount,
-	BannerBody,
-	BannerChoiceCards,
-	BannerCloseButton,
-	BannerComponent,
-	BannerContent,
-	BannerCtas,
-	BannerHeader,
-	BannerTicker,
-} from '../index';
+import { BannerComponent } from '../index';
 
 jest.mock('../../../../../../lib/useMatchMedia', () => ({
 	useMatchMedia: jest.fn(() => true),
@@ -128,15 +118,7 @@ const mockProps: BannerRenderProps = {
 
 describe('DesignableBanner V2', () => {
 	it('renders the banner with heading and body', () => {
-		render(
-			<BannerComponent {...mockProps}>
-				<BannerContent>
-					<BannerHeader />
-					<BannerBody />
-					<BannerCtas />
-				</BannerContent>
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...mockProps} />);
 
 		expect(screen.getByText('Main Heading')).toBeInTheDocument();
 		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
@@ -144,13 +126,7 @@ describe('DesignableBanner V2', () => {
 	});
 
 	it('calls onCtaClick when the primary CTA is clicked', () => {
-		render(
-			<BannerComponent {...mockProps}>
-				<BannerContent>
-					<BannerCtas />
-				</BannerContent>
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...mockProps} />);
 
 		const cta = screen.getByText('Main CTA');
 		fireEvent.click(cta);
@@ -159,11 +135,7 @@ describe('DesignableBanner V2', () => {
 	});
 
 	it('calls onCloseClick when the close button is clicked', () => {
-		render(
-			<BannerComponent {...mockProps}>
-				<BannerCloseButton />
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...mockProps} />);
 
 		const closeButton = screen.getByRole('button', { name: /Close/i });
 		fireEvent.click(closeButton);
@@ -172,14 +144,7 @@ describe('DesignableBanner V2', () => {
 	});
 
 	it('renders as uncollapsed by default when isCollapsible is true', () => {
-		render(
-			<BannerComponent {...mockProps} isCollapsible={true}>
-				<BannerContent>
-					<BannerHeader />
-					<BannerBody />
-				</BannerContent>
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...mockProps} isCollapsible={true} />);
 
 		// Now starts uncollapsed by default
 		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
@@ -187,13 +152,7 @@ describe('DesignableBanner V2', () => {
 	});
 
 	it('toggles collapse when the toggle button is clicked', () => {
-		render(
-			<BannerComponent {...mockProps} isCollapsible={true}>
-				<BannerHeader />
-				<BannerBody />
-				<BannerCloseButton />
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...mockProps} isCollapsible={true} />);
 
 		// Starts uncollapsed
 		expect(screen.getByText('Main Paragraph 1')).toBeInTheDocument();
@@ -222,11 +181,7 @@ describe('DesignableBanner V2', () => {
 			},
 		};
 
-		render(
-			<BannerComponent {...tickerProps}>
-				<BannerTicker />
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...tickerProps} />);
 
 		// Ticker is a complex component, we just check if the container is there
 		// or if we should mock it. For now, let's see if it renders something recognizable.
@@ -272,11 +227,7 @@ describe('DesignableBanner V2', () => {
 			},
 		};
 
-		render(
-			<BannerComponent {...choiceCardProps}>
-				<BannerChoiceCards />
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...choiceCardProps} />);
 
 		expect(screen.getByText('£10')).toBeInTheDocument();
 		expect(screen.getByText('£20')).toBeInTheDocument();
@@ -292,11 +243,7 @@ describe('DesignableBanner V2', () => {
 			},
 		};
 
-		render(
-			<BannerComponent {...articleCountProps}>
-				<BannerArticleCount />
-			</BannerComponent>,
-		);
+		render(<BannerComponent {...articleCountProps} />);
 
 		// We look for the article count text
 		// Usually it's something like "You've read 5 articles..."
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts
deleted file mode 100644
index 131478684b5..00000000000
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useBanner.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { useContext } from 'react';
-import { BannerContext, type BannerContextType } from './BannerContext';
-
-export const useBanner = (): BannerContextType => {
-	const context = useContext(BannerContext);
-	if (!context) {
-		throw new Error(
-			'Banner sub-components must be rendered within a <Banner /> provider',
-		);
-	}
-	return context;
-};

From 72eca7c91e95abe0c333e0ffe622407aa1993844 Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Tue, 20 Jan 2026 16:28:26 +0000
Subject: [PATCH 5/7] refactor(designable-banner-v2): rename index.ts to
 exports.ts and update imports

---
 .../banners/designableBanner/v2/{index.ts => exports.ts}        | 0
 .../designableBanner/v2/stories/DesignableBannerV2.stories.tsx  | 2 +-
 .../marketing/banners/designableBanner/v2/tests/Banner.test.tsx | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename dotcom-rendering/src/components/marketing/banners/designableBanner/v2/{index.ts => exports.ts} (100%)

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/exports.ts
similarity index 100%
rename from dotcom-rendering/src/components/marketing/banners/designableBanner/v2/index.ts
rename to dotcom-rendering/src/components/marketing/banners/designableBanner/v2/exports.ts
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
index f3f4a8cefa4..a82891ca26c 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/stories/DesignableBannerV2.stories.tsx
@@ -1,6 +1,6 @@
 import type { OphanComponentType } from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { BannerComponent } from '../index';
+import { BannerComponent } from '../exports';
 
 const meta: Meta<typeof BannerComponent> = {
 	title: 'Components/Marketing/DesignableBannerV2',
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
index 1fb0355c268..3e5098c701c 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/tests/Banner.test.tsx
@@ -7,7 +7,7 @@ import type {
 import '@testing-library/jest-dom';
 import { fireEvent, render, screen } from '@testing-library/react';
 import type { BannerRenderProps } from '../../../common/types';
-import { BannerComponent } from '../index';
+import { BannerComponent } from '../exports';
 
 jest.mock('../../../../../../lib/useMatchMedia', () => ({
 	useMatchMedia: jest.fn(() => true),

From 41a88199bc193e2d2dac3743b83dfc99dbeeae00 Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Tue, 20 Jan 2026 16:40:39 +0000
Subject: [PATCH 6/7] refactor(designable-banner-v2): add explicit return type
 to getComponentIds function

---
 .../banners/designableBanner/v2/componentIds.ts   | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts
index 28b7bdaaf5b..6c1d90ba4c1 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/componentIds.ts
@@ -1,6 +1,19 @@
 import type { BannerId } from '../../common/types';
 
-export const getComponentIds = (bannerId: BannerId) => ({
+export const getComponentIds = (
+	bannerId: BannerId,
+): {
+	close: string;
+	cta: string;
+	secondaryCta: string;
+	notNow: string;
+	signIn: string;
+	reminderCta: string;
+	reminderSet: string;
+	reminderClose: string;
+	collapse: string;
+	expand: string;
+} => ({
 	close: `${bannerId} : close`,
 	cta: `${bannerId} : cta`,
 	secondaryCta: `${bannerId} : secondary-cta`,

From 11cbd678fcfa76191750ebb46c1de0ea50200c5d Mon Sep 17 00:00:00 2001
From: Juarez Mota <juarez.mota.mindera@guardian.co.uk>
Date: Wed, 21 Jan 2026 15:46:42 +0000
Subject: [PATCH 7/7] refactor(designable-banner-v2): extract banner model
 logic into custom hook

Move banner state management and data transformation logic from Banner component into useDesignableBannerModel hook. Extract selector logic into separate bannerSelectors module for better separation of concerns.
---
 .../banners/designableBanner/v2/Banner.tsx    | 399 +----------------
 .../designableBanner/v2/BannerProps.ts        |  20 +
 .../designableBanner/v2/bannerSelectors.ts    |  81 ++++
 .../v2/components/BannerArticleCount.tsx      |   6 +-
 .../v2/components/BannerBody.tsx              |  11 +-
 .../v2/components/BannerChoiceCards.tsx       |  46 +-
 .../v2/components/BannerCtas.tsx              |  28 +-
 .../v2/components/BannerHeader.tsx            |  22 +-
 .../v2/components/BannerReminder.tsx          |  16 +-
 .../v2/components/BannerTicker.tsx            |  23 +-
 .../v2/components/BannerVisual.tsx            |   6 +-
 .../v2/useDesignableBannerModel.ts            | 400 ++++++++++++++++++
 12 files changed, 574 insertions(+), 484 deletions(-)
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/bannerSelectors.ts
 create mode 100644 dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useDesignableBannerModel.ts

diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
index 75896cde290..bbb775ca593 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/Banner.tsx
@@ -6,30 +6,12 @@ import {
 	space,
 	until,
 } from '@guardian/source/foundations';
-import { hexColourToString } from '@guardian/support-dotcom-components';
-import type {
-	BannerDesignHeaderImage,
-	BannerDesignImage,
-	ConfigurableDesign,
-	Image,
-} from '@guardian/support-dotcom-components/dist/shared/types';
-import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-	removeMediaRulePrefix,
-	useMatchMedia,
-} from '../../../../../lib/useMatchMedia';
-import { getChoiceCards } from '../../../lib/choiceCards';
-import { createClickEventFromTracking } from '../../../lib/tracking';
+import { useEffect, useRef } from 'react';
 import {
 	bannerWrapper,
 	validatedBannerWrapper,
 } from '../../common/BannerWrapper';
 import type { BannerRenderProps } from '../../common/types';
-import { setChannelClosedTimestamp } from '../../utils/localStorage';
-import type { BannerTemplateSettings, ChoiceCardSettings } from '../settings';
-import type { BannerData } from './BannerProps';
-import { getComponentIds } from './componentIds';
 import { BannerArticleCount } from './components/BannerArticleCount';
 import { BannerBody } from './components/BannerBody';
 import { BannerChoiceCards } from './components/BannerChoiceCards';
@@ -40,85 +22,7 @@ import { BannerHeader } from './components/BannerHeader';
 import { BannerLogo } from './components/BannerLogo';
 import { BannerTicker } from './components/BannerTicker';
 import { BannerVisual } from './components/BannerVisual';
-
-const buildImageSettings = (
-	design: BannerDesignImage | BannerDesignHeaderImage,
-): Image | undefined => {
-	return {
-		mainUrl: design.mobileUrl,
-		mobileUrl: design.mobileUrl,
-		tabletUrl: design.tabletUrl,
-		desktopUrl: design.desktopUrl,
-		wideUrl: design.desktopUrl,
-		altText: design.altText,
-	};
-};
-
-const buildMainImageSettings = (
-	design: ConfigurableDesign,
-): Image | undefined => {
-	if (design.visual?.kind !== 'Image') {
-		return undefined;
-	}
-	return buildImageSettings(design.visual);
-};
-
-const buildHeaderImageSettings = (
-	design: ConfigurableDesign,
-): Image | undefined => {
-	if (!design.headerImage) {
-		return undefined;
-	}
-	return buildImageSettings(design.headerImage);
-};
-
-const buildChoiceCardSettings = (
-	design: ConfigurableDesign,
-): ChoiceCardSettings | undefined => {
-	if (design.visual?.kind !== 'ChoiceCards') {
-		return undefined;
-	}
-	const {
-		buttonColour,
-		buttonTextColour,
-		buttonBorderColour,
-		buttonSelectColour,
-		buttonSelectTextColour,
-		buttonSelectBorderColour,
-		buttonSelectMarkerColour,
-		pillTextColour,
-		pillBackgroundColour,
-	} = design.visual;
-	return {
-		buttonColour: buttonColour
-			? hexColourToString(buttonColour)
-			: undefined,
-		buttonTextColour: buttonTextColour
-			? hexColourToString(buttonTextColour)
-			: undefined,
-		buttonBorderColour: buttonBorderColour
-			? hexColourToString(buttonBorderColour)
-			: undefined,
-		buttonSelectColour: buttonSelectColour
-			? hexColourToString(buttonSelectColour)
-			: undefined,
-		buttonSelectTextColour: buttonSelectTextColour
-			? hexColourToString(buttonSelectTextColour)
-			: undefined,
-		buttonSelectBorderColour: buttonSelectBorderColour
-			? hexColourToString(buttonSelectBorderColour)
-			: undefined,
-		buttonSelectMarkerColour: buttonSelectMarkerColour
-			? hexColourToString(buttonSelectMarkerColour)
-			: undefined,
-		pillTextColour: pillTextColour
-			? hexColourToString(pillTextColour)
-			: undefined,
-		pillBackgroundColour: pillBackgroundColour
-			? hexColourToString(pillBackgroundColour)
-			: undefined,
-	};
-};
+import { useDesignableBannerModel } from './useDesignableBannerModel';
 
 const phabletContentMaxWidth = '492px';
 
@@ -310,30 +214,9 @@ const styles = {
 	`,
 };
 
-const Banner = ({
-	content,
-	onCloseClick,
-	onCollapseClick,
-	onExpandClick,
-	articleCounts,
-	onCtaClick,
-	onSecondaryCtaClick,
-	bannerChannel,
-	reminderTracking,
-	separateArticleCountSettings,
-	tickerSettings,
-	choiceCardsSettings,
-	submitComponentEvent,
-	tracking,
-	design,
-	countryCode,
-	promoCodes,
-	separateArticleCount,
-	isCollapsible,
-}: BannerRenderProps): JSX.Element | null => {
-	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
+const Banner = (props: BannerRenderProps): JSX.Element | null => {
 	const bannerRef = useRef<HTMLDivElement>(null);
-	const [isOpen, setIsOpen] = useState(true);
+	const { isOpen, bannerData } = useDesignableBannerModel(props);
 
 	useEffect(() => {
 		if (bannerRef.current) {
@@ -341,277 +224,21 @@ const Banner = ({
 		}
 	}, []);
 
-	const choiceCards = useMemo(
-		() => getChoiceCards(isTabletOrAbove, choiceCardsSettings),
-		[isTabletOrAbove, choiceCardsSettings],
-	);
-
-	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
-
-	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
-		ChoiceCard | undefined
-	>(defaultChoiceCard);
-
-	// Reset selectedChoiceCard when choiceCards change
-	useEffect(() => {
-		if (!choiceCards || choiceCards.length === 0) {
-			setSelectedChoiceCard(undefined);
-		}
-	}, [choiceCards]);
-
-	const isCollapsableBanner: boolean =
-		isCollapsible ??
-		(tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
-			tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER'));
-
-	const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
-
-	const handleClose = useCallback((): void => {
-		setChannelClosedTimestamp(bannerChannel);
-		setIsOpen(false);
-		document.body.focus();
-		document.dispatchEvent(
-			new CustomEvent('banner:close', {
-				detail: { bannerId: 'designable-banner' },
-			}),
-		);
-	}, [bannerChannel]);
-
-	const handleToggleCollapse = useCallback(() => {
-		const nextCollapsed = !isCollapsed;
-		setIsCollapsed(nextCollapsed);
-		if (nextCollapsed) {
-			onCollapseClick();
-		} else {
-			onExpandClick();
-		}
-	}, [isCollapsed, onCollapseClick, onExpandClick]);
-
-	const settings = useMemo((): BannerTemplateSettings | undefined => {
-		if (!design) {
-			return undefined;
-		}
-
-		const {
-			basic,
-			primaryCta,
-			secondaryCta,
-			highlightedText,
-			closeButton,
-			ticker,
-		} = design.colours;
-
-		const imageSettings = buildMainImageSettings(design);
-		const choiceCardSettings = buildChoiceCardSettings(design);
-
-		return {
-			containerSettings: {
-				backgroundColour: hexColourToString(basic.background),
-				textColor: hexColourToString(basic.bodyText),
-			},
-			headerSettings: {
-				textColour: hexColourToString(basic.headerText),
-				headerImage: buildHeaderImageSettings(design),
-			},
-			primaryCtaSettings: {
-				default: {
-					backgroundColour: hexColourToString(
-						primaryCta.default.background,
-					),
-					textColour: hexColourToString(primaryCta.default.text),
-				},
-			},
-			secondaryCtaSettings: {
-				default: {
-					backgroundColour: hexColourToString(
-						secondaryCta.default.background,
-					),
-					textColour: hexColourToString(secondaryCta.default.text),
-					border: `1px solid ${
-						secondaryCta.default.border
-							? hexColourToString(secondaryCta.default.border)
-							: undefined
-					}`,
-				},
-			},
-			closeButtonSettings: {
-				default: {
-					backgroundColour: hexColourToString(
-						closeButton.default.background,
-					),
-					textColour: hexColourToString(closeButton.default.text),
-					border: `1px solid ${
-						closeButton.default.border
-							? hexColourToString(closeButton.default.border)
-							: '#DCDCDC' // Fallback to specialReport[100] equivalent if needed, but let's use a safe hex for now
-					}`,
-				},
-			},
-			highlightedTextSettings: {
-				textColour: hexColourToString(highlightedText.text),
-				highlightColour: hexColourToString(highlightedText.highlight),
-			},
-			articleCountTextColour: hexColourToString(basic.articleCountText),
-			choiceCardSettings,
-			imageSettings,
-			bannerId: 'designable-banner',
-			tickerStylingSettings: {
-				filledProgressColour: hexColourToString(ticker.filledProgress),
-				progressBarBackgroundColour: hexColourToString(
-					ticker.progressBarBackground,
-				),
-				headlineColour: hexColourToString(ticker.headlineColour),
-				totalColour: hexColourToString(ticker.totalColour),
-				goalColour: hexColourToString(ticker.goalColour),
-			},
-		};
-	}, [design]);
-
-	// Create tracking handlers that always run
-	const componentIds = getComponentIds('designable-banner');
-	const trackingHandlers = useMemo(() => {
-		const clickHandlerFor = (componentId: string, close: boolean) => {
-			return (): void => {
-				const componentClickEvent = createClickEventFromTracking(
-					tracking,
-					componentId,
-				);
-				void submitComponentEvent?.(componentClickEvent);
-				if (close) {
-					// This would need the onClose function from withCloseable HOC
-					// For now, just handle tracking
-				}
-			};
-		};
-
-		return {
-			onCloseClick: clickHandlerFor(componentIds.close, true),
-			onCollapseClick: clickHandlerFor(componentIds.collapse, false),
-			onExpandClick: clickHandlerFor(componentIds.expand, false),
-			onCtaClick: clickHandlerFor(componentIds.cta, true),
-			onSecondaryCtaClick: clickHandlerFor(
-				componentIds.secondaryCta,
-				true,
-			),
-		};
-	}, [
-		tracking,
-		submitComponentEvent,
-		componentIds.close,
-		componentIds.collapse,
-		componentIds.expand,
-		componentIds.cta,
-		componentIds.secondaryCta,
-	]);
-
-	// Create combined handlers that run both tracking and prop handlers
-	const combinedHandlers = useMemo(() => {
-		return {
-			onClose: () => {
-				// Always run tracking
-				trackingHandlers.onCloseClick();
-				// Also run prop handler if it exists
-				onCloseClick();
-				// Run the close handler
-				handleClose();
-			},
-			onCtaClick: () => {
-				trackingHandlers.onCtaClick();
-				onCtaClick();
-			},
-			onSecondaryCtaClick: () => {
-				trackingHandlers.onSecondaryCtaClick();
-				onSecondaryCtaClick();
-			},
-			onCollapseClick: () => {
-				trackingHandlers.onCollapseClick();
-				onCollapseClick();
-			},
-			onExpandClick: () => {
-				trackingHandlers.onExpandClick();
-				onExpandClick();
-			},
-		};
-	}, [
-		trackingHandlers,
-		onCloseClick,
-		onCtaClick,
-		onSecondaryCtaClick,
-		onCollapseClick,
-		onExpandClick,
-		handleClose,
-	]);
-
-	const bannerData: BannerData | null = useMemo(() => {
-		if (!design || !settings) {
-			return null;
-		}
-		return {
-			bannerChannel,
-			content,
-			design,
-			tracking,
-			articleCounts,
-			tickerSettings,
-			separateArticleCount,
-			separateArticleCountSettings,
-			promoCodes,
-			countryCode,
-			reminderTracking,
-			settings,
-			isCollapsed,
-			isCollapsible: isCollapsableBanner,
-			isTabletOrAbove,
-			choices: choiceCards,
-			selectedChoiceCard,
-			actions: {
-				onClose: combinedHandlers.onClose,
-				onToggleCollapse: handleToggleCollapse,
-				onCtaClick: combinedHandlers.onCtaClick,
-				onSecondaryCtaClick: combinedHandlers.onSecondaryCtaClick,
-				onChoiceCardChange: setSelectedChoiceCard,
-				submitComponentEvent,
-			},
-		};
-	}, [
-		content,
-		design,
-		tracking,
-		articleCounts,
-		tickerSettings,
-		separateArticleCountSettings,
-		promoCodes,
-		countryCode,
-		settings,
-		isCollapsed,
-		isCollapsableBanner,
-		isTabletOrAbove,
-		choiceCards,
-		selectedChoiceCard,
-		combinedHandlers,
-		handleToggleCollapse,
-		submitComponentEvent,
-		separateArticleCount,
-		reminderTracking,
-		bannerChannel,
-	]);
-
 	if (!isOpen || !bannerData) {
 		return null;
 	}
 
 	const contextClassName =
-		isCollapsableBanner ||
-		tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER')
+		bannerData.isCollapsible ||
+		bannerData.tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER')
 			? 'maybe-later'
 			: '';
 
-	const cardsImageOrSpaceTemplateString = settings
-		? settings.choiceCardSettings
-			? 'choice-cards-container'
-			: settings.imageSettings
-			? 'main-image'
-			: '.'
+	const cardsImageOrSpaceTemplateString = bannerData.settings
+		.choiceCardSettings
+		? 'choice-cards-container'
+		: bannerData.settings.imageSettings
+		? 'main-image'
 		: '.';
 
 	return (
@@ -620,14 +247,14 @@ const Banner = ({
 			role="alert"
 			tabIndex={-1}
 			css={styles.outerContainer(
-				bannerData.settings.containerSettings.backgroundColour ?? '',
+				bannerData.settings.containerSettings.backgroundColour,
 				bannerData.settings.containerSettings.textColor ?? 'inherit',
 			)}
 			className={contextClassName}
 		>
 			<div
 				css={
-					isCollapsableBanner && isCollapsed
+					bannerData.isCollapsible && bannerData.isCollapsed
 						? styles.collapsedLayoutOverrides(
 								cardsImageOrSpaceTemplateString,
 						  )
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
index 7c4ef119215..03c0aa96e8b 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/BannerProps.ts
@@ -2,11 +2,28 @@ import type { BannerChannel } from '@guardian/support-dotcom-components/dist/sha
 import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
 import type { Dispatch, SetStateAction } from 'react';
 import type {
+	BannerEnrichedCustomCta,
+	BannerEnrichedReminderCta,
 	BannerRenderProps,
 	ContributionsReminderTracking,
 } from '../../common/types';
 import type { BannerTemplateSettings } from '../settings';
 
+export interface BannerSelectors {
+	copyForViewport: BannerRenderProps['content']['mainContent'];
+	headingCopy: BannerRenderProps['content']['mainContent'];
+	showBody: boolean;
+	showTicker: boolean;
+	showArticleCount: boolean;
+	showChoiceCardCtas: boolean;
+	showChoiceCardSelector: boolean;
+	showStandardCtas: boolean;
+	showBodyVisual: boolean;
+	showHeaderImage: boolean;
+	customSecondaryCta: BannerEnrichedCustomCta | null;
+	reminderCta: BannerEnrichedReminderCta | null;
+}
+
 export interface BannerData {
 	// --- Raw Data ---
 	bannerChannel: BannerChannel;
@@ -40,4 +57,7 @@ export interface BannerData {
 		onChoiceCardChange: Dispatch<SetStateAction<ChoiceCard | undefined>>;
 		submitComponentEvent: BannerRenderProps['submitComponentEvent'];
 	};
+
+	// --- Selectors ---
+	selectors: BannerSelectors;
 }
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/bannerSelectors.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/bannerSelectors.ts
new file mode 100644
index 00000000000..b05c9112f7c
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/bannerSelectors.ts
@@ -0,0 +1,81 @@
+import { SecondaryCtaType } from '@guardian/support-dotcom-components';
+import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
+import type { BannerRenderProps } from '../../common/types';
+import type { BannerTemplateSettings } from '../settings';
+import type { BannerSelectors } from './BannerProps';
+
+type BuildBannerSelectorsArgs = {
+	content: BannerRenderProps['content'];
+	isTabletOrAbove: boolean;
+	isCollapsed: boolean;
+	choiceCards: ChoiceCard[] | undefined;
+	selectedChoiceCard: ChoiceCard | undefined;
+	settings: BannerTemplateSettings;
+	tickerSettings?: BannerRenderProps['tickerSettings'];
+	separateArticleCount?: boolean;
+	separateArticleCountSettings?: BannerRenderProps['separateArticleCountSettings'];
+};
+
+export const buildBannerSelectors = ({
+	content,
+	isTabletOrAbove,
+	isCollapsed,
+	choiceCards,
+	selectedChoiceCard,
+	settings,
+	tickerSettings,
+	separateArticleCount,
+	separateArticleCountSettings,
+}: BuildBannerSelectorsArgs): BannerSelectors => {
+	const copyForViewport = isTabletOrAbove
+		? content.mainContent
+		: content.mobileContent;
+	const headingCopy =
+		isTabletOrAbove && !isCollapsed
+			? content.mainContent
+			: content.mobileContent;
+	const hasChoiceCards =
+		!!settings.choiceCardSettings && (choiceCards?.length ?? 0) > 0;
+	const hasSelectedChoiceCard = hasChoiceCards && !!selectedChoiceCard;
+	const customSecondaryCta =
+		copyForViewport.secondaryCta?.type === SecondaryCtaType.Custom
+			? copyForViewport.secondaryCta
+			: null;
+	const reminderCta =
+		copyForViewport.secondaryCta?.type ===
+		SecondaryCtaType.ContributionsReminder
+			? copyForViewport.secondaryCta
+			: null;
+	const showChoiceCardCtas = hasSelectedChoiceCard;
+	const showChoiceCardSelector = showChoiceCardCtas && !isCollapsed;
+	const showStandardCtas =
+		!hasSelectedChoiceCard &&
+		(!!copyForViewport.primaryCta ||
+			!!copyForViewport.secondaryCta ||
+			isCollapsed);
+	const showBody = !isCollapsed;
+	const showTicker =
+		!!tickerSettings?.tickerData &&
+		!isCollapsed &&
+		!!settings.tickerStylingSettings;
+	const showArticleCount =
+		!isCollapsed &&
+		Boolean(separateArticleCountSettings ?? separateArticleCount);
+	const showBodyVisual = !!settings.imageSettings && !isCollapsed;
+	const showHeaderImage = !!settings.headerSettings?.headerImage;
+
+	return {
+		copyForViewport,
+		headingCopy,
+		showBody,
+		showTicker,
+		showArticleCount,
+		showChoiceCardCtas,
+		showChoiceCardSelector,
+		showStandardCtas,
+		showBodyVisual,
+		showHeaderImage,
+		customSecondaryCta,
+		reminderCta,
+	};
+};
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
index 64c7d469edf..a0fdf6dbea9 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerArticleCount.tsx
@@ -29,11 +29,7 @@ export const BannerArticleCount = ({
 }: {
 	bannerData: BannerData;
 }): JSX.Element | null => {
-	if (
-		bannerData.isCollapsed ||
-		(!bannerData.separateArticleCount &&
-			!bannerData.separateArticleCountSettings)
-	) {
+	if (!bannerData.selectors.showArticleCount) {
 		return null;
 	}
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
index b7f657a30de..9a6c70ce5c7 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerBody.tsx
@@ -46,17 +46,14 @@ export const BannerBody = ({
 		bannerData.settings.highlightedTextSettings.highlightColour;
 
 	const styles = getStyles(textColour, highlightColour);
-
-	const mainOrMobileContent = bannerData.isTabletOrAbove
-		? bannerData.content.mainContent
-		: bannerData.content.mobileContent;
+	const { copyForViewport, showBody } = bannerData.selectors;
 
 	return (
 		<div css={styles.container}>
-			{!bannerData.isCollapsed &&
+			{showBody &&
 				createBannerBodyCopy(
-					mainOrMobileContent.paragraphs,
-					mainOrMobileContent.highlightedText,
+					copyForViewport.paragraphs,
+					copyForViewport.highlightedText,
 					styles,
 				)}
 		</div>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
index 40bb02f58df..2d14286301c 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerChoiceCards.tsx
@@ -10,7 +10,6 @@ import {
 	LinkButton,
 	SvgArrowRightStraight,
 } from '@guardian/source/react-components';
-import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { enrichSupportUrl, getChoiceCardUrl } from '../../../../lib/tracking';
 import { ThreeTierChoiceCards } from '../../../../shared/ThreeTierChoiceCards';
 import { buttonStyles, buttonThemes } from '../../styles/buttonStyles';
@@ -130,20 +129,19 @@ export const BannerChoiceCards = ({
 	bannerData: BannerData;
 }): JSX.Element | null => {
 	if (
-		!bannerData.settings.choiceCardSettings ||
+		!bannerData.selectors.showChoiceCardCtas ||
 		!bannerData.selectedChoiceCard ||
 		!bannerData.choices
 	) {
 		return null;
 	}
 
-	const mainOrMobileContent = bannerData.isTabletOrAbove
-		? bannerData.content.mainContent
-		: bannerData.content.mobileContent;
+	const { copyForViewport, customSecondaryCta, showChoiceCardSelector } =
+		bannerData.selectors;
 
 	return (
 		<div css={styles.threeTierChoiceCardsContainer}>
-			{!bannerData.isCollapsed && (
+			{showChoiceCardSelector && (
 				<ThreeTierChoiceCards
 					selectedChoiceCard={bannerData.selectedChoiceCard}
 					setSelectedChoiceCard={
@@ -185,27 +183,25 @@ export const BannerChoiceCards = ({
 					rel="noopener noreferrer"
 				>
 					{bannerData.isCollapsed
-						? mainOrMobileContent.primaryCta?.ctaText
+						? copyForViewport.primaryCta?.ctaText
 						: 'Continue'}
 				</LinkButton>
-				{!bannerData.isCollapsed &&
-					mainOrMobileContent.secondaryCta?.type ===
-						SecondaryCtaType.Custom && (
-						<LinkButton
-							href={mainOrMobileContent.secondaryCta.cta.ctaUrl}
-							onClick={bannerData.actions.onSecondaryCtaClick}
-							priority="secondary"
-							cssOverrides={buttonStyles(
-								bannerData.settings.secondaryCtaSettings,
-							)}
-							theme={buttonThemes(
-								bannerData.settings.secondaryCtaSettings,
-								'secondary',
-							)}
-						>
-							{mainOrMobileContent.secondaryCta.cta.ctaText}
-						</LinkButton>
-					)}
+				{!bannerData.isCollapsed && customSecondaryCta && (
+					<LinkButton
+						href={customSecondaryCta.cta.ctaUrl}
+						onClick={bannerData.actions.onSecondaryCtaClick}
+						priority="secondary"
+						cssOverrides={buttonStyles(
+							bannerData.settings.secondaryCtaSettings,
+						)}
+						theme={buttonThemes(
+							bannerData.settings.secondaryCtaSettings,
+							'secondary',
+						)}
+					>
+						{customSecondaryCta.cta.ctaText}
+					</LinkButton>
+				)}
 				{bannerData.isCollapsed && (
 					<div css={styles.maybeLaterButtonSizing}>
 						<LinkButton
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
index 9b24114fb65..4c6e67b046a 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerCtas.tsx
@@ -84,28 +84,12 @@ export const BannerCtas = ({
 }: {
 	bannerData: BannerData;
 }): JSX.Element | null => {
-	if (bannerData.selectedChoiceCard) {
+	if (!bannerData.selectors.showStandardCtas) {
 		return null;
 	}
 
-	const mainOrMobileContent = bannerData.isTabletOrAbove
-		? bannerData.content.mainContent
-		: bannerData.content.mobileContent;
-
-	const { primaryCta, secondaryCta } = mainOrMobileContent;
-
-	// Check if secondaryCta has the expected structure
-	const hasCustomCta =
-		secondaryCta &&
-		'type' in secondaryCta &&
-		'cta' in secondaryCta &&
-		typeof secondaryCta.cta === 'object' &&
-		'ctaUrl' in secondaryCta.cta &&
-		'ctaText' in secondaryCta.cta;
-
-	if (!primaryCta && !secondaryCta && !bannerData.isCollapsed) {
-		return null;
-	}
+	const { copyForViewport, customSecondaryCta } = bannerData.selectors;
+	const { primaryCta } = copyForViewport;
 
 	return (
 		<div css={styles.outerImageCtaContainer}>
@@ -127,9 +111,9 @@ export const BannerCtas = ({
 						{primaryCta.ctaText}
 					</LinkButton>
 				)}
-				{hasCustomCta && (
+				{customSecondaryCta && (
 					<LinkButton
-						href={secondaryCta.cta.ctaUrl}
+						href={customSecondaryCta.cta.ctaUrl}
 						onClick={bannerData.actions.onSecondaryCtaClick}
 						size="small"
 						priority="secondary"
@@ -141,7 +125,7 @@ export const BannerCtas = ({
 							'secondary',
 						)}
 					>
-						{secondaryCta.cta.ctaText}
+						{customSecondaryCta.cta.ctaText}
 					</LinkButton>
 				)}
 				{bannerData.isCollapsed && (
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
index 38e070e918b..da3737c00a2 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerHeader.tsx
@@ -115,36 +115,28 @@ export const BannerHeader = ({
 		bannerData.settings.containerSettings.backgroundColour,
 		headlineSize,
 		bannerData.isCollapsed,
-		!!bannerData.settings.headerSettings?.headerImage,
+		bannerData.selectors.showHeaderImage,
 		!!bannerData.settings.imageSettings,
 	);
 
-	const containerCss = bannerData.settings.headerSettings?.headerImage
+	const containerCss = bannerData.selectors.showHeaderImage
 		? styles.headerWithImageContainer
 		: styles.headerContainer;
+	const { headingCopy } = bannerData.selectors;
+	const headerImage = bannerData.settings.headerSettings?.headerImage;
 
 	return (
 		<div css={containerCss}>
 			<div css={styles.container}>
 				<header css={styles.header}>
-					{bannerData.settings.headerSettings?.headerImage && (
+					{bannerData.selectors.showHeaderImage && headerImage && (
 						<BannerVisual
 							bannerData={bannerData}
-							settings={
-								bannerData.settings.headerSettings.headerImage
-							}
+							settings={headerImage}
 							isHeaderImage={true}
 						/>
 					)}
-					{(bannerData.content.mainContent.heading ??
-						bannerData.content.mobileContent.heading) && (
-						<h2>
-							{bannerData.isTabletOrAbove &&
-							!bannerData.isCollapsed
-								? bannerData.content.mainContent.heading
-								: bannerData.content.mobileContent.heading}
-						</h2>
-					)}
+					{headingCopy.heading && <h2>{headingCopy.heading}</h2>}
 				</header>
 			</div>
 		</div>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
index 4492c9ecd47..fde8ffdd754 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerReminder.tsx
@@ -1,6 +1,5 @@
 import { css } from '@emotion/react';
 import { space } from '@guardian/source/foundations';
-import { SecondaryCtaType } from '@guardian/support-dotcom-components';
 import { useContributionsReminderSignup } from '../../../../hooks/useContributionsReminderSignup';
 import { DesignableBannerReminderSignedOut } from '../../components/DesignableBannerReminderSignedOut';
 import type { BannerData } from '../BannerProps';
@@ -19,16 +18,7 @@ export const BannerReminder = ({
 }: {
 	bannerData: BannerData;
 }): JSX.Element | null => {
-	const mainOrMobileContent = bannerData.isTabletOrAbove
-		? bannerData.content.mainContent
-		: bannerData.content.mobileContent;
-
-	const { secondaryCta } = mainOrMobileContent;
-
-	const reminderFields =
-		secondaryCta?.type === SecondaryCtaType.ContributionsReminder
-			? secondaryCta.reminderFields
-			: undefined;
+	const reminderFields = bannerData.selectors.reminderCta?.reminderFields;
 
 	const { reminderStatus, createReminder } = useContributionsReminderSignup(
 		reminderFields?.reminderPeriod ?? '',
@@ -38,7 +28,7 @@ export const BannerReminder = ({
 		reminderFields?.reminderOption,
 	);
 
-	if (secondaryCta?.type !== SecondaryCtaType.ContributionsReminder) {
+	if (!bannerData.selectors.reminderCta) {
 		return null;
 	}
 
@@ -50,7 +40,7 @@ export const BannerReminder = ({
 	return (
 		<div css={styles.container}>
 			<DesignableBannerReminderSignedOut
-				reminderCta={secondaryCta}
+				reminderCta={bannerData.selectors.reminderCta}
 				reminderStatus={reminderStatus}
 				onReminderSetClick={onReminderSetClick}
 				setReminderCtaSettings={
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
index 3567e121365..f6b145d4ee6 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerTicker.tsx
@@ -7,10 +7,15 @@ export const BannerTicker = ({
 }: {
 	bannerData: BannerData;
 }): JSX.Element | null => {
+	const tickerSettings = bannerData.tickerSettings;
+	const tickerStylingSettings = bannerData.settings.tickerStylingSettings;
+	const tickerData = tickerSettings?.tickerData;
+
 	if (
-		!bannerData.tickerSettings?.tickerData ||
-		bannerData.isCollapsed ||
-		!bannerData.settings.tickerStylingSettings
+		!bannerData.selectors.showTicker ||
+		!tickerSettings ||
+		!tickerStylingSettings ||
+		!tickerData
 	) {
 		return null;
 	}
@@ -18,15 +23,13 @@ export const BannerTicker = ({
 	return (
 		<div css={templateSpacing.bannerTicker}>
 			<Ticker
-				currencySymbol={bannerData.tickerSettings.currencySymbol}
+				currencySymbol={tickerSettings.currencySymbol}
 				copy={{
-					headline: bannerData.tickerSettings.copy.countLabel,
-					goalCopy: bannerData.tickerSettings.copy.goalCopy,
+					headline: tickerSettings.copy.countLabel,
+					goalCopy: tickerSettings.copy.goalCopy,
 				}}
-				tickerData={bannerData.tickerSettings.tickerData}
-				tickerStylingSettings={
-					bannerData.settings.tickerStylingSettings
-				}
+				tickerData={tickerData}
+				tickerStylingSettings={tickerStylingSettings}
 				size={'medium'}
 			/>
 		</div>
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
index 3183700b3cf..eb8d01f3bb8 100644
--- a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/components/BannerVisual.tsx
@@ -96,7 +96,11 @@ export const BannerVisual = ({
 }: BannerVisualProps): JSX.Element | null => {
 	const imageSettings = settings ?? bannerData.settings.imageSettings;
 
-	if (!imageSettings || (bannerData.isCollapsed && !isHeaderImage)) {
+	if (!imageSettings) {
+		return null;
+	}
+
+	if (!isHeaderImage && !bannerData.selectors.showBodyVisual) {
 		return null;
 	}
 
diff --git a/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useDesignableBannerModel.ts b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useDesignableBannerModel.ts
new file mode 100644
index 00000000000..2543360b7f8
--- /dev/null
+++ b/dotcom-rendering/src/components/marketing/banners/designableBanner/v2/useDesignableBannerModel.ts
@@ -0,0 +1,400 @@
+import { from } from '@guardian/source/foundations';
+import { hexColourToString } from '@guardian/support-dotcom-components';
+import type {
+	BannerDesignHeaderImage,
+	BannerDesignImage,
+	ConfigurableDesign,
+	Image,
+} from '@guardian/support-dotcom-components/dist/shared/types';
+import type { ChoiceCard } from '@guardian/support-dotcom-components/dist/shared/types/props/choiceCards';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+	removeMediaRulePrefix,
+	useMatchMedia,
+} from '../../../../../lib/useMatchMedia';
+import { getChoiceCards } from '../../../lib/choiceCards';
+import { createClickEventFromTracking } from '../../../lib/tracking';
+import type { BannerRenderProps } from '../../common/types';
+import { setChannelClosedTimestamp } from '../../utils/localStorage';
+import type { BannerTemplateSettings, ChoiceCardSettings } from '../settings';
+import type { BannerData } from './BannerProps';
+import { buildBannerSelectors } from './bannerSelectors';
+import { getComponentIds } from './componentIds';
+
+const buildImageSettings = (
+	design: BannerDesignImage | BannerDesignHeaderImage,
+): Image | undefined => {
+	return {
+		mainUrl: design.mobileUrl,
+		mobileUrl: design.mobileUrl,
+		tabletUrl: design.tabletUrl,
+		desktopUrl: design.desktopUrl,
+		wideUrl: design.desktopUrl,
+		altText: design.altText,
+	};
+};
+
+const buildMainImageSettings = (
+	design: ConfigurableDesign,
+): Image | undefined => {
+	if (design.visual?.kind !== 'Image') {
+		return undefined;
+	}
+	return buildImageSettings(design.visual);
+};
+
+const buildHeaderImageSettings = (
+	design: ConfigurableDesign,
+): Image | undefined => {
+	if (!design.headerImage) {
+		return undefined;
+	}
+	return buildImageSettings(design.headerImage);
+};
+
+const buildChoiceCardSettings = (
+	design: ConfigurableDesign,
+): ChoiceCardSettings | undefined => {
+	if (design.visual?.kind !== 'ChoiceCards') {
+		return undefined;
+	}
+	const {
+		buttonColour,
+		buttonTextColour,
+		buttonBorderColour,
+		buttonSelectColour,
+		buttonSelectTextColour,
+		buttonSelectBorderColour,
+		buttonSelectMarkerColour,
+		pillTextColour,
+		pillBackgroundColour,
+	} = design.visual;
+	return {
+		buttonColour: buttonColour
+			? hexColourToString(buttonColour)
+			: undefined,
+		buttonTextColour: buttonTextColour
+			? hexColourToString(buttonTextColour)
+			: undefined,
+		buttonBorderColour: buttonBorderColour
+			? hexColourToString(buttonBorderColour)
+			: undefined,
+		buttonSelectColour: buttonSelectColour
+			? hexColourToString(buttonSelectColour)
+			: undefined,
+		buttonSelectTextColour: buttonSelectTextColour
+			? hexColourToString(buttonSelectTextColour)
+			: undefined,
+		buttonSelectBorderColour: buttonSelectBorderColour
+			? hexColourToString(buttonSelectBorderColour)
+			: undefined,
+		buttonSelectMarkerColour: buttonSelectMarkerColour
+			? hexColourToString(buttonSelectMarkerColour)
+			: undefined,
+		pillTextColour: pillTextColour
+			? hexColourToString(pillTextColour)
+			: undefined,
+		pillBackgroundColour: pillBackgroundColour
+			? hexColourToString(pillBackgroundColour)
+			: undefined,
+	};
+};
+
+export const useDesignableBannerModel = ({
+	content,
+	onCloseClick,
+	onCollapseClick,
+	onExpandClick,
+	articleCounts,
+	onCtaClick,
+	onSecondaryCtaClick,
+	bannerChannel,
+	reminderTracking,
+	separateArticleCountSettings,
+	tickerSettings,
+	choiceCardsSettings,
+	submitComponentEvent,
+	tracking,
+	design,
+	countryCode,
+	promoCodes,
+	separateArticleCount,
+	isCollapsible,
+}: BannerRenderProps): {
+	isOpen: boolean;
+	bannerData: BannerData | null;
+} => {
+	const isTabletOrAbove = useMatchMedia(removeMediaRulePrefix(from.tablet));
+	const [isOpen, setIsOpen] = useState(true);
+
+	const choiceCards = useMemo(
+		() => getChoiceCards(isTabletOrAbove, choiceCardsSettings),
+		[isTabletOrAbove, choiceCardsSettings],
+	);
+
+	const defaultChoiceCard = choiceCards?.find((cc) => cc.isDefault);
+
+	const [selectedChoiceCard, setSelectedChoiceCard] = useState<
+		ChoiceCard | undefined
+	>(defaultChoiceCard);
+
+	// Reset selectedChoiceCard when choiceCards change
+	useEffect(() => {
+		if (!choiceCards || choiceCards.length === 0) {
+			setSelectedChoiceCard(undefined);
+		}
+	}, [choiceCards]);
+
+	const isCollapsableBanner: boolean =
+		isCollapsible ??
+		(tracking.abTestVariant.includes('COLLAPSABLE_V1') ||
+			tracking.abTestVariant.includes('COLLAPSABLE_V2_MAYBE_LATER'));
+
+	const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
+
+	const handleClose = useCallback((): void => {
+		setChannelClosedTimestamp(bannerChannel);
+		setIsOpen(false);
+		document.body.focus();
+		document.dispatchEvent(
+			new CustomEvent('banner:close', {
+				detail: { bannerId: 'designable-banner' },
+			}),
+		);
+	}, [bannerChannel]);
+
+	const handleToggleCollapse = useCallback(() => {
+		const nextCollapsed = !isCollapsed;
+		setIsCollapsed(nextCollapsed);
+		if (nextCollapsed) {
+			onCollapseClick();
+		} else {
+			onExpandClick();
+		}
+	}, [isCollapsed, onCollapseClick, onExpandClick]);
+
+	const settings = useMemo((): BannerTemplateSettings | undefined => {
+		if (!design) {
+			return undefined;
+		}
+
+		const {
+			basic,
+			primaryCta,
+			secondaryCta,
+			highlightedText,
+			closeButton,
+			ticker,
+		} = design.colours;
+
+		const imageSettings = buildMainImageSettings(design);
+		const choiceCardSettings = buildChoiceCardSettings(design);
+
+		return {
+			containerSettings: {
+				backgroundColour: hexColourToString(basic.background),
+				textColor: hexColourToString(basic.bodyText),
+			},
+			headerSettings: {
+				textColour: hexColourToString(basic.headerText),
+				headerImage: buildHeaderImageSettings(design),
+			},
+			primaryCtaSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						primaryCta.default.background,
+					),
+					textColour: hexColourToString(primaryCta.default.text),
+				},
+			},
+			secondaryCtaSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						secondaryCta.default.background,
+					),
+					textColour: hexColourToString(secondaryCta.default.text),
+					border: `1px solid ${
+						secondaryCta.default.border
+							? hexColourToString(secondaryCta.default.border)
+							: undefined
+					}`,
+				},
+			},
+			closeButtonSettings: {
+				default: {
+					backgroundColour: hexColourToString(
+						closeButton.default.background,
+					),
+					textColour: hexColourToString(closeButton.default.text),
+					border: `1px solid ${
+						closeButton.default.border
+							? hexColourToString(closeButton.default.border)
+							: '#DCDCDC'
+					}`,
+				},
+			},
+			highlightedTextSettings: {
+				textColour: hexColourToString(highlightedText.text),
+				highlightColour: hexColourToString(highlightedText.highlight),
+			},
+			articleCountTextColour: hexColourToString(basic.articleCountText),
+			choiceCardSettings,
+			imageSettings,
+			bannerId: 'designable-banner',
+			tickerStylingSettings: {
+				filledProgressColour: hexColourToString(ticker.filledProgress),
+				progressBarBackgroundColour: hexColourToString(
+					ticker.progressBarBackground,
+				),
+				headlineColour: hexColourToString(ticker.headlineColour),
+				totalColour: hexColourToString(ticker.totalColour),
+				goalColour: hexColourToString(ticker.goalColour),
+			},
+		};
+	}, [design]);
+
+	// Create tracking handlers that always run
+	const componentIds = getComponentIds('designable-banner');
+	const trackingHandlers = useMemo(() => {
+		const clickHandlerFor = (componentId: string, close: boolean) => {
+			return (): void => {
+				const componentClickEvent = createClickEventFromTracking(
+					tracking,
+					componentId,
+				);
+				void submitComponentEvent?.(componentClickEvent);
+				if (close) {
+					// This would need the onClose function from withCloseable HOC
+					// For now, just handle tracking
+				}
+			};
+		};
+
+		return {
+			onCloseClick: clickHandlerFor(componentIds.close, true),
+			onCollapseClick: clickHandlerFor(componentIds.collapse, false),
+			onExpandClick: clickHandlerFor(componentIds.expand, false),
+			onCtaClick: clickHandlerFor(componentIds.cta, true),
+			onSecondaryCtaClick: clickHandlerFor(
+				componentIds.secondaryCta,
+				true,
+			),
+		};
+	}, [
+		tracking,
+		submitComponentEvent,
+		componentIds.close,
+		componentIds.collapse,
+		componentIds.expand,
+		componentIds.cta,
+		componentIds.secondaryCta,
+	]);
+
+	// Create combined handlers that run both tracking and prop handlers
+	const combinedHandlers = useMemo(() => {
+		return {
+			onClose: () => {
+				// Always run tracking
+				trackingHandlers.onCloseClick();
+				// Also run prop handler if it exists
+				onCloseClick();
+				// Run the close handler
+				handleClose();
+			},
+			onCtaClick: () => {
+				trackingHandlers.onCtaClick();
+				onCtaClick();
+			},
+			onSecondaryCtaClick: () => {
+				trackingHandlers.onSecondaryCtaClick();
+				onSecondaryCtaClick();
+			},
+			onCollapseClick: () => {
+				trackingHandlers.onCollapseClick();
+				onCollapseClick();
+			},
+			onExpandClick: () => {
+				trackingHandlers.onExpandClick();
+				onExpandClick();
+			},
+		};
+	}, [
+		trackingHandlers,
+		onCloseClick,
+		onCtaClick,
+		onSecondaryCtaClick,
+		onCollapseClick,
+		onExpandClick,
+		handleClose,
+	]);
+
+	const bannerData: BannerData | null = useMemo(() => {
+		if (!design || !settings) {
+			return null;
+		}
+
+		const selectors = buildBannerSelectors({
+			content,
+			isTabletOrAbove,
+			isCollapsed,
+			choiceCards,
+			selectedChoiceCard,
+			settings,
+			tickerSettings,
+			separateArticleCount,
+			separateArticleCountSettings,
+		});
+
+		return {
+			bannerChannel,
+			content,
+			design,
+			tracking,
+			articleCounts,
+			tickerSettings,
+			separateArticleCount,
+			separateArticleCountSettings,
+			promoCodes,
+			countryCode,
+			reminderTracking,
+			settings,
+			isCollapsed,
+			isCollapsible: isCollapsableBanner,
+			isTabletOrAbove,
+			choices: choiceCards,
+			selectedChoiceCard,
+			actions: {
+				onClose: combinedHandlers.onClose,
+				onToggleCollapse: handleToggleCollapse,
+				onCtaClick: combinedHandlers.onCtaClick,
+				onSecondaryCtaClick: combinedHandlers.onSecondaryCtaClick,
+				onChoiceCardChange: setSelectedChoiceCard,
+				submitComponentEvent,
+			},
+			selectors,
+		};
+	}, [
+		content,
+		design,
+		tracking,
+		articleCounts,
+		tickerSettings,
+		separateArticleCountSettings,
+		promoCodes,
+		countryCode,
+		settings,
+		isCollapsed,
+		isCollapsableBanner,
+		isTabletOrAbove,
+		choiceCards,
+		selectedChoiceCard,
+		combinedHandlers,
+		handleToggleCollapse,
+		submitComponentEvent,
+		separateArticleCount,
+		reminderTracking,
+		bannerChannel,
+	]);
+
+	return { isOpen, bannerData };
+};