From 849da364cd925028f7d7503b9f3c08a5bca7841c Mon Sep 17 00:00:00 2001
From: Dina Hafez <dina.hafez@guardian.co.uk>
Date: Tue, 17 Feb 2026 15:33:30 +0000
Subject: [PATCH 1/3] Include article body to HostedArticleLayout

---
 .../src/layouts/HostedArticleLayout.tsx       | 49 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
index c6e67b51f65..fd6e546ed30 100644
--- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
+++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
@@ -4,6 +4,9 @@ import {
 	palette as sourcePalette,
 	space,
 } from '@guardian/source/foundations';
+import { StraightLines } from '@guardian/source-development-kitchen/react-components';
+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';
@@ -15,7 +18,9 @@ import { ShareButton } from '../components/ShareButton.importable';
 import { Standfirst } from '../components/Standfirst';
 import { grid } from '../grid';
 import type { ArticleFormat } from '../lib/articleFormat';
+import { getContributionsServiceUrl } from '../lib/contributions';
 import { decideMainMediaCaption } from '../lib/decide-caption';
+import { palette as themePalette } from '../palette';
 import type { Article } from '../types/article';
 import type { RenderingTarget } from '../types/renderingTarget';
 import { Stuck } from './lib/stickiness';
@@ -59,6 +64,8 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 		format,
 	} = props;
 
+	const contributionsServiceUrl = getContributionsServiceUrl(frontendData);
+
 	const mainMedia = frontendData.mainMediaElements[0];
 	const mainMediaCaptionText = decideMainMediaCaption(mainMedia);
 
@@ -199,7 +206,47 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 							/>
 						</div>
 						<div id="maincontent" css={[grid.column.centre]}>
-							{'body'}
+							<ArticleContainer format={format}>
+								<ArticleBody
+									format={format}
+									blocks={frontendData.blocks}
+									editionId={frontendData.editionId}
+									host={frontendData.config.host}
+									pageId={frontendData.pageId}
+									webTitle={frontendData.webTitle}
+									ajaxUrl={frontendData.config.ajaxUrl}
+									isAdFreeUser={frontendData.isAdFreeUser}
+									switches={frontendData.config.switches}
+									sectionId={frontendData.config.section}
+									shouldHideReaderRevenue={
+										frontendData.shouldHideReaderRevenue
+									}
+									tags={frontendData.tags}
+									isPaidContent={
+										!!frontendData.config.isPaidContent
+									}
+									contributionsServiceUrl={
+										contributionsServiceUrl
+									}
+									contentType={frontendData.contentType}
+									keywordIds={frontendData.config.keywordIds}
+									idUrl={frontendData.config.idUrl}
+									isSensitive={
+										frontendData.config.isSensitive
+									}
+									isDev={frontendData.config.isDev}
+									abTests={frontendData.config.abTests}
+									shouldHideAds={frontendData.shouldHideAds}
+								/>
+							</ArticleContainer>
+							<StraightLines
+								data-print-layout="hide"
+								count={1}
+								cssOverrides={css`
+									display: block;
+								`}
+								color={themePalette('--straight-lines')}
+							/>
 						</div>
 					</div>
 

From c372e55c419ceddc92c5e9214895394907d0d541 Mon Sep 17 00:00:00 2001
From: Dina Hafez <dina.hafez@guardian.co.uk>
Date: Tue, 17 Feb 2026 16:13:41 +0000
Subject: [PATCH 2/3] Update h2 styles for hosted article

---
 .../src/components/ArticleBody.tsx            | 13 +++++++
 .../src/layouts/HostedArticleLayout.tsx       | 37 +++++++++++--------
 2 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/dotcom-rendering/src/components/ArticleBody.tsx b/dotcom-rendering/src/components/ArticleBody.tsx
index 25d010855aa..027ebba6061 100644
--- a/dotcom-rendering/src/components/ArticleBody.tsx
+++ b/dotcom-rendering/src/components/ArticleBody.tsx
@@ -4,6 +4,7 @@ import {
 	headlineBold24,
 	remSpace,
 	textEgyptian17,
+	textSansBold20,
 } from '@guardian/source/foundations';
 import {
 	ArticleDesign,
@@ -73,6 +74,16 @@ const globalOlStyles = () => css`
 	}
 `;
 
+const hostedContentH2Styles = (design: ArticleDesign) => css`
+	${design === ArticleDesign.HostedArticle &&
+	`
+		h2 {
+			${textSansBold20};
+			margin-bottom: ${remSpace[2]};
+		}
+	`}
+`;
+
 const globalH3Styles = (display: ArticleDisplay) => css`
 	${display === ArticleDisplay.NumberedList &&
 	`
@@ -145,6 +156,7 @@ export const ArticleBody = ({
 	const isInteractiveContent =
 		format.design === ArticleDesign.Interactive ||
 		format.design === ArticleDesign.Crossword;
+	const isHostedContent = format.design === ArticleDesign.HostedArticle;
 	const language = decideLanguage(lang);
 	const languageDirection = decideLanguageDirection(isRightToLeftLang);
 	const hasObserverPublicationTag = tags.find(
@@ -230,6 +242,7 @@ export const ArticleBody = ({
 				css={[
 					`margin-top: ${remSpace[3]}`,
 					isInteractiveContent ? null : bodyPadding,
+					isHostedContent && hostedContentH2Styles(format.design),
 					globalH3Styles(format.display),
 					globalOlStyles(),
 					globalStrongStyles,
diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
index fd6e546ed30..8042e00f8a7 100644
--- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
+++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
@@ -176,22 +176,6 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 								</Island>
 							)}
 						</div>
-						<div
-							css={[
-								grid.column.right,
-								css`
-									grid-row: 1;
-								`,
-							]}
-						>
-							<Caption
-								captionText={mainMediaCaptionText}
-								format={format}
-								isMainMedia={true}
-							/>
-
-							{'Onward content'}
-						</div>
 						<div
 							css={[
 								grid.column.centre,
@@ -248,6 +232,27 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 								color={themePalette('--straight-lines')}
 							/>
 						</div>
+						<div
+							css={[
+								grid.column.centre,
+								css`
+									grid-row: auto;
+
+									${from.leftCol} {
+										${grid.column.right}
+										grid-row: 1;
+									}
+								`,
+							]}
+						>
+							<Caption
+								captionText={mainMediaCaptionText}
+								format={format}
+								isMainMedia={true}
+							/>
+
+							{'Onward content'}
+						</div>
 					</div>
 
 					<div css={[grid.container, border]}>

From 634c217338c13a5d60e4dae119778731b7cab0d4 Mon Sep 17 00:00:00 2001
From: Dina Hafez <dina.hafez@guardian.co.uk>
Date: Tue, 17 Feb 2026 16:26:28 +0000
Subject: [PATCH 3/3] Fix typescript erros

---
 dotcom-rendering/src/layouts/HostedArticleLayout.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
index 8042e00f8a7..47b8ad37799 100644
--- a/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
+++ b/dotcom-rendering/src/layouts/HostedArticleLayout.tsx
@@ -213,12 +213,12 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 										contributionsServiceUrl
 									}
 									contentType={frontendData.contentType}
-									keywordIds={frontendData.config.keywordIds}
-									idUrl={frontendData.config.idUrl}
+									idUrl={frontendData.config.idUrl ?? ''}
 									isSensitive={
 										frontendData.config.isSensitive
 									}
-									isDev={frontendData.config.isDev}
+									isDev={!!frontendData.config.isDev}
+									keywordIds={frontendData.config.keywordIds}
 									abTests={frontendData.config.abTests}
 									shouldHideAds={frontendData.shouldHideAds}
 								/>