From c1577a81f2cb3db9aab633c01d09efb3403aa77e Mon Sep 17 00:00:00 2001
From: Imogen Hardy <imogen.hardy@guardian.co.uk>
Date: Tue, 3 Mar 2026 10:14:49 +0000
Subject: [PATCH 1/2] set up component and story

---
 .../HostedContentDisclaimer.stories.tsx       | 16 ++++++++++++++
 .../components/HostedContentDisclaimer.tsx    | 21 +++++++++++++++++++
 2 files changed, 37 insertions(+)
 create mode 100644 dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
 create mode 100644 dotcom-rendering/src/components/HostedContentDisclaimer.tsx

diff --git a/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx b/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
new file mode 100644
index 00000000000..90783ebd232
--- /dev/null
+++ b/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
@@ -0,0 +1,16 @@
+import { HostedContentDisclaimer } from './HostedContentDisclaimer';
+import { Section } from './Section';
+
+export default {
+	component: HostedContentDisclaimer,
+	title: 'Components/HostedContentDisclaimer',
+};
+
+export const Default = () => {
+	return (
+		<Section showSideBorders={false} showTopBorder={true} element="section">
+			<HostedContentDisclaimer />
+		</Section>
+	);
+};
+Default.storyName = 'default';
diff --git a/dotcom-rendering/src/components/HostedContentDisclaimer.tsx b/dotcom-rendering/src/components/HostedContentDisclaimer.tsx
new file mode 100644
index 00000000000..78c09d57453
--- /dev/null
+++ b/dotcom-rendering/src/components/HostedContentDisclaimer.tsx
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import {
+	palette as sourcePalette,
+	textSans12,
+} from '@guardian/source/foundations';
+
+const textStyles = css`
+	${textSans12};
+	color: ${sourcePalette.neutral[46]};
+`;
+
+export const HostedContentDisclaimer = () => {
+	return (
+		<p css={textStyles}>
+			This article was paid for, produced and controlled by the advertiser
+			rather than the publisher. It is subject to regulation by the
+			Advertising Standards Authority. This content is produced by the
+			advertiser with no involvement from Guardian News and Media staff.
+		</p>
+	);
+};

From d8efac819237e42470273b05b5ec11a17da58940 Mon Sep 17 00:00:00 2001
From: Imogen Hardy <imogen.hardy@guardian.co.uk>
Date: Tue, 3 Mar 2026 14:16:08 +0000
Subject: [PATCH 2/2] fix top border and container spacing

---
 .../HostedContentDisclaimer.stories.tsx       |  8 ++++++-
 .../components/HostedContentDisclaimer.tsx    | 22 ++++++++++++++-----
 .../src/layouts/HostedArticleLayout.tsx       | 13 ++---------
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx b/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
index 90783ebd232..7e8b346a956 100644
--- a/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
+++ b/dotcom-rendering/src/components/HostedContentDisclaimer.stories.tsx
@@ -8,9 +8,15 @@ export default {
 
 export const Default = () => {
 	return (
-		<Section showSideBorders={false} showTopBorder={true} element="section">
+		<Section
+			showSideBorders={false}
+			showTopBorder={false}
+			shouldCenter={false}
+			element="section"
+		>
 			<HostedContentDisclaimer />
 		</Section>
 	);
 };
+
 Default.storyName = 'default';
diff --git a/dotcom-rendering/src/components/HostedContentDisclaimer.tsx b/dotcom-rendering/src/components/HostedContentDisclaimer.tsx
index 78c09d57453..60a278740ae 100644
--- a/dotcom-rendering/src/components/HostedContentDisclaimer.tsx
+++ b/dotcom-rendering/src/components/HostedContentDisclaimer.tsx
@@ -1,9 +1,16 @@
 import { css } from '@emotion/react';
 import {
 	palette as sourcePalette,
+	space,
 	textSans12,
 } from '@guardian/source/foundations';
 
+const containerStyles = css`
+	border-top: 2px solid ${sourcePalette.neutral[46]};
+	margin-top: ${space[4]}px;
+	padding-top: ${space[2]}px;
+`;
+
 const textStyles = css`
 	${textSans12};
 	color: ${sourcePalette.neutral[46]};
@@ -11,11 +18,14 @@ const textStyles = css`
 
 export const HostedContentDisclaimer = () => {
 	return (
-		<p css={textStyles}>
-			This article was paid for, produced and controlled by the advertiser
-			rather than the publisher. It is subject to regulation by the
-			Advertising Standards Authority. This content is produced by the
-			advertiser with no involvement from Guardian News and Media staff.
-		</p>
+		<div css={containerStyles}>
+			<p css={textStyles}>
+				This article was paid for, produced and controlled by the
+				advertiser rather than the publisher. It is subject to
+				regulation by the Advertising Standards Authority. This content
+				is produced by the advertiser with no involvement from Guardian
+				News and Media staff.
+			</p>
+		</div>
 	);
 };
diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
index da1df85f9cc..a53c19e86d9 100644
--- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
+++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
@@ -4,13 +4,13 @@ import {
 	from,
 	palette as sourcePalette,
 	space,
-	textSans12,
 } from '@guardian/source/foundations';
 import { ArticleBody } from '../components/ArticleBody';
 import { ArticleContainer } from '../components/ArticleContainer';
 import { ArticleHeadline } from '../components/ArticleHeadline';
 import { CallToActionAtom } from '../components/CallToActionAtom';
 import { Caption } from '../components/Caption';
+import { HostedContentDisclaimer } from '../components/HostedContentDisclaimer';
 import { HostedContentHeader } from '../components/HostedContentHeader';
 import { Island } from '../components/Island';
 import { MainMedia } from '../components/MainMedia';
@@ -317,17 +317,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 										frontendData.isRightToLeftLang
 									}
 								/>
+								<HostedContentDisclaimer />
 							</ArticleContainer>
-
-							<span
-								css={css`
-									${textSans12}
-									color: ${sourcePalette.neutral[46]};
-									padding-bottom: ${space[4]}px;
-								`}
-							>
-								{'Placeholder - disclaimer text'}
-							</span>
 						</div>
 
 						<div css={onwardContentStyles}>