diff --git a/src/components/editions/article.tsx b/src/components/editions/article.tsx
index 3d43e9613..7893574bc 100644
--- a/src/components/editions/article.tsx
+++ b/src/components/editions/article.tsx
@@ -127,7 +127,7 @@ const Article: FC<Props> = ({ item }) => {
 				<article css={articleWrapperStyles(item)}>
 					<div css={headerBackgroundStyles(item)}>
 						<section css={getSectionStyles(item)}>
-							<Header item={item} />
+							<Header />
 						</section>
 					</div>
 					<div
diff --git a/src/components/editions/avatar.tsx b/src/components/editions/avatar.tsx
index 855c6a54b..b504bb1ce 100644
--- a/src/components/editions/avatar.tsx
+++ b/src/components/editions/avatar.tsx
@@ -4,17 +4,12 @@ import { css } from '@emotion/core';
 import type { Sizes } from '@guardian/image-rendering';
 import { Img } from '@guardian/image-rendering';
 import { map, none, some, withDefault } from '@guardian/types';
-import type { Item } from 'item';
-import { getFormat } from 'item';
+import { useItemExtras } from 'itemExtrasContext';
 import { pipe2 } from 'lib';
 import type { FC, ReactElement } from 'react';
 
 // ----- Component ----- //
 
-interface Props {
-	item: Item;
-}
-
 const imgStyles = css`
 	background: none;
 	width: 125px;
@@ -25,9 +20,11 @@ const sizes: Sizes = {
 	default: '105px',
 };
 
-const Avatar: FC<Props> = ({ item }) => {
-	const [contributor] = item.contributors;
-	const format = getFormat(item);
+const Avatar: FC = () => {
+	const {
+		contributors: [contributor],
+		format,
+	} = useItemExtras();
 
 	return pipe2(
 		contributor.image,
diff --git a/src/components/editions/byline.tsx b/src/components/editions/byline.tsx
index b88bc265e..6e0acd413 100644
--- a/src/components/editions/byline.tsx
+++ b/src/components/editions/byline.tsx
@@ -12,11 +12,9 @@ import type {
 } from '@guardian/src-foundations/typography/types';
 import type { Format } from '@guardian/types';
 import { Design, Display } from '@guardian/types';
-import type { Item } from 'item';
-import { getFormat } from 'item';
+import { useItemExtras } from 'itemExtrasContext';
 import { maybeRender } from 'lib';
 import type { FC, ReactNode } from 'react';
-import { getThemeStyles } from 'themeStyles';
 import EditionsAvatar from './avatar';
 import { ShareIcon } from './shareIcon';
 import {
@@ -192,7 +190,6 @@ const getStyles = (format: Format, kickerColor: string): SerializedStyles => {
 // ----- Component ----- //
 
 interface Props {
-	item: Item;
 	shareIcon?: boolean;
 	large?: boolean;
 	avatar?: boolean;
@@ -221,16 +218,19 @@ const renderText = (
 		}
 	});
 
-const Byline: FC<Props> = ({ item, shareIcon, large, avatar }) => {
-	const format = getFormat(item);
-	const { kicker: kickerColor } = getThemeStyles(format.theme);
+const Byline: FC<Props> = ({ shareIcon, large, avatar }) => {
+	const {
+		bylineHtml,
+		format,
+		themeStyles: { kicker: kickerColor },
+	} = useItemExtras();
 
 	const ignoreKickerColour = (format: Format): boolean =>
 		format.design === Design.Media || format.display === Display.Immersive;
 
 	const bylineColor = ignoreKickerColour(format) ? neutral[100] : kickerColor;
 
-	return maybeRender(item.bylineHtml, (byline) => (
+	return maybeRender(bylineHtml, (byline) => (
 		<div css={getStyles(format, bylineColor)}>
 			<address>{renderText(byline, bylineColor, large)}</address>
 			{shareIcon && (
@@ -240,7 +240,7 @@ const Byline: FC<Props> = ({ item, shareIcon, large, avatar }) => {
 			)}
 			{avatar && (
 				<div css={avatarWrapperStyles}>
-					<EditionsAvatar item={item} />
+					<EditionsAvatar />
 				</div>
 			)}
 		</div>
diff --git a/src/components/editions/galleryImage.tsx b/src/components/editions/galleryImage.tsx
index c0940c742..04f532510 100644
--- a/src/components/editions/galleryImage.tsx
+++ b/src/components/editions/galleryImage.tsx
@@ -5,24 +5,22 @@ import { Img } from '@guardian/image-rendering';
 import { neutral, remSpace } from '@guardian/src-foundations';
 import { from } from '@guardian/src-foundations/mq';
 import { textSans } from '@guardian/src-foundations/typography';
-import type { Format, Option } from '@guardian/types';
+import type { Option } from '@guardian/types';
 import { map, none, some, withDefault } from '@guardian/types';
 import type { Image } from 'bodyElement';
+import { useItemExtras } from 'itemExtrasContext';
 import { maybeRender, pipe2 } from 'lib';
 import type { FC } from 'react';
 import React from 'react';
-import { getThemeStyles } from 'themeStyles';
 
 const width = '100%';
 
 type Props = {
 	image: Image;
-	format: Format;
 };
 
 type CaptionProps = {
 	details: CaptionDetails;
-	format: Format;
 };
 
 type CaptionDetails = {
@@ -126,8 +124,10 @@ const CaptionDescription: FC<{ description: string }> = ({ description }) => {
 	return <p css={styles}>{description}</p>;
 };
 
-const GalleryImageCaption: FC<CaptionProps> = ({ details, format }) => {
-	const { kicker } = getThemeStyles(format.theme);
+const GalleryImageCaption: FC<CaptionProps> = ({ details }) => {
+	const {
+		themeStyles: { kicker },
+	} = useItemExtras();
 	const tabletWidth = '170px';
 	const styles = css`
 		${from.tablet} {
@@ -149,7 +149,8 @@ const GalleryImageCaption: FC<CaptionProps> = ({ details, format }) => {
 	);
 };
 
-const GalleryImage: FC<Props> = ({ image, format }) => {
+const GalleryImage: FC<Props> = ({ image }) => {
+	const { format } = useItemExtras();
 	return (
 		<figure css={styles} className="editions-gallery-figure">
 			<Img
@@ -164,10 +165,7 @@ const GalleryImage: FC<Props> = ({ image, format }) => {
 					credit: none,
 				})}
 			/>
-			<GalleryImageCaption
-				details={getCaptionDetails(image.caption)}
-				format={format}
-			/>
+			<GalleryImageCaption details={getCaptionDetails(image.caption)} />
 		</figure>
 	);
 };
diff --git a/src/components/editions/header.tsx b/src/components/editions/header.tsx
index 2a579d2a1..8c6117a96 100644
--- a/src/components/editions/header.tsx
+++ b/src/components/editions/header.tsx
@@ -13,7 +13,8 @@ import Series from 'components/editions/series';
 import Standfirst from 'components/editions/standfirst';
 import type { Item } from 'item';
 import { isPicture } from 'item';
-import type { FC, ReactElement } from 'react';
+import { useItemExtras } from 'itemExtrasContext';
+import type { FC } from 'react';
 import {
 	articleMarginStyles,
 	headerBackgroundColour,
@@ -32,10 +33,6 @@ const tablet = tabletContentWidth + 12;
 
 // ----- Component ----- //
 
-interface HeaderProps {
-	item: Item;
-}
-
 const headerStyles = css`
 	${sidePadding}
 `;
@@ -142,129 +139,128 @@ const linesBorderStyles = css`
 	border-right: 1px solid ${border.secondary};
 `;
 
-const StandardHeader: FC<HeaderProps> = ({ item }) => (
+const StandardHeader: FC = () => (
 	<header css={headerStyles}>
-		<HeaderMedia item={item} />
-		<Series item={item} />
-		<Headline item={item} />
-		<Standfirst item={item} />
+		<HeaderMedia />
+		<Series />
+		<Headline />
+		<Standfirst />
 		<Lines />
-		<Byline item={item} shareIcon />
+		<Byline shareIcon />
 	</header>
 );
 
-const ShowcaseHeader: FC<HeaderProps> = ({ item }) => (
+const ShowcaseHeader: FC = () => (
 	<header css={headerStyles}>
-		<Series item={item} />
-		<Headline item={item} />
-		<HeaderMedia item={item} />
-		<Standfirst item={item} />
+		<Series />
+		<Headline />
+		<HeaderMedia />
+		<Standfirst />
 		<Lines />
-		<Byline item={item} shareIcon />
+		<Byline shareIcon />
 	</header>
 );
 
-const AnalysisHeader: FC<HeaderProps> = ({ item }) => (
+const AnalysisHeader: FC = () => (
 	<header css={headerStyles}>
-		<HeaderMedia item={item} />
-		<Headline item={item} />
-		<Byline item={item} large />
+		<HeaderMedia />
+		<Headline />
+		<Byline large />
 		<Lines />
-		<Standfirst item={item} shareIcon />
+		<Standfirst shareIcon />
 	</header>
 );
 
-const CommentHeader: FC<HeaderProps> = ({ item }) => (
+const CommentHeader: FC = () => (
 	<header css={headerStyles}>
-		<HeaderMedia item={item} />
-		<Headline item={item} />
-		<Byline item={item} large avatar />
+		<HeaderMedia />
+		<Headline />
+		<Byline large avatar />
 		<Lines />
-		<Standfirst item={item} shareIcon />
+		<Standfirst shareIcon />
 	</header>
 );
 
-const InterviewHeader: FC<HeaderProps> = ({ item }) => (
-	<header>
-		<HeaderMedia item={item} />
-		<div css={interviewStyles(item)}>
-			<Headline item={item} />
-			<Standfirst item={item} />
-		</div>
-		<Lines className={linesBorderStyles} />
-		<Byline item={item} shareIcon />
-	</header>
-);
+const InterviewHeader: FC = () => {
+	const itemExtras = useItemExtras();
+	return (
+		<header>
+			<HeaderMedia />
+			<div css={interviewStyles(itemExtras)}>
+				<Headline />
+				<Standfirst />
+			</div>
+			<Lines className={linesBorderStyles} />
+			<Byline shareIcon />
+		</header>
+	);
+};
 
-const GalleryHeader: FC<HeaderProps> = ({ item }) => (
+const GalleryHeader: FC = () => (
 	<header css={galleryHeaderStyles}>
-		<HeaderMedia item={item} />
+		<HeaderMedia />
 		<div css={galleryInnerHeaderStyles}>
-			<Headline item={item} />
+			<Headline />
 			<div css={galleryHeaderBorderStyles}>
-				<Standfirst item={item} />
+				<Standfirst />
 				<Lines className={galleryLinesStyles} />
-				<Byline item={item} shareIcon />
+				<Byline shareIcon />
 			</div>
 		</div>
 	</header>
 );
 
-const PictureHeader: FC<HeaderProps> = ({ item }) => (
+const PictureHeader: FC = () => (
 	<header css={pictureHeaderStyles}>
 		<div css={galleryInnerHeaderStyles}>
 			<div css={galleryHeaderBorderStyles}>
-				<Headline item={item} />
-				<Standfirst item={item} />
+				<Headline />
+				<Standfirst />
 				<Lines className={galleryLinesStyles} />
-				<Byline item={item} shareIcon />
+				<Byline shareIcon />
 			</div>
 		</div>
-		<HeaderMedia item={item} />
+		<HeaderMedia />
 	</header>
 );
 
-const ImmersiveHeader: FC<HeaderProps> = ({ item }) => (
-	<header>
-		<HeaderMedia item={item} />
-		<div css={immersiveHeadlineStyles(item)}>
-			<Headline item={item} />
-		</div>
-		<div css={immersiveStandfirstStyles}>
-			<Standfirst item={item} />
-			<Lines />
-		</div>
-		<Byline item={item} shareIcon />
-	</header>
-);
+const ImmersiveHeader: FC = () => {
+	const itemExtras = useItemExtras();
+	return (
+		<header>
+			<HeaderMedia />
+			<div css={immersiveHeadlineStyles(itemExtras)}>
+				<Headline />
+			</div>
+			<div css={immersiveStandfirstStyles}>
+				<Standfirst />
+				<Lines />
+			</div>
+			<Byline shareIcon />
+		</header>
+	);
+};
 
-const renderArticleHeader = (item: Item): ReactElement<HeaderProps> => {
+const Container: FC = () => {
+	const { display, design, tags } = useItemExtras();
 	// Display.Immersive needs to come before Design.Interview
-	if (item.display === Display.Immersive) {
-		return <ImmersiveHeader item={item} />;
-	} else if (item.design === Design.Interview) {
-		return <InterviewHeader item={item} />;
-	} else if (item.display === Display.Showcase) {
-		return <ShowcaseHeader item={item} />;
-	} else if (item.design === Design.Analysis) {
-		return <AnalysisHeader item={item} />;
-	} else if (item.design === Design.Comment) {
-		return <CommentHeader item={item} />;
-	} else if (item.design === Design.Media) {
-		return isPicture(item.tags) ? (
-			<PictureHeader item={item} />
-		) : (
-			<GalleryHeader item={item} />
-		);
+	if (display === Display.Immersive) {
+		return <ImmersiveHeader />;
+	} else if (design === Design.Interview) {
+		return <InterviewHeader />;
+	} else if (display === Display.Showcase) {
+		return <ShowcaseHeader />;
+	} else if (design === Design.Analysis) {
+		return <AnalysisHeader />;
+	} else if (design === Design.Comment) {
+		return <CommentHeader />;
+	} else if (design === Design.Media) {
+		return isPicture(tags) ? <PictureHeader /> : <GalleryHeader />;
 	} else {
-		return <StandardHeader item={item} />;
+		return <StandardHeader />;
 	}
 };
 
-const Container: FC<HeaderProps> = ({ item }) => {
-	return <>{renderArticleHeader(item)}</>;
-};
-
 // ----- Exports ----- //
 
 export default Container;
diff --git a/src/components/editions/headerMedia.tsx b/src/components/editions/headerMedia.tsx
index 0285be52e..0bf1d352c 100644
--- a/src/components/editions/headerMedia.tsx
+++ b/src/components/editions/headerMedia.tsx
@@ -14,11 +14,10 @@ import HeaderImageCaption, {
 import StarRating from 'components/editions/starRating';
 import { MainMediaKind } from 'headerMedia';
 import type { Image } from 'image';
-import type { Item } from 'item';
-import { getFormat, isPicture } from 'item';
+import { isPicture } from 'item';
+import { useItemExtras } from 'itemExtrasContext';
 import { maybeRender } from 'lib';
 import type { FC } from 'react';
-import { getThemeStyles } from 'themeStyles';
 import {
 	sidePadding,
 	tabletArticleMargin,
@@ -146,10 +145,6 @@ const getImageStyle = (
 	`;
 };
 
-interface Props {
-	item: Item;
-}
-
 const sizes: Sizes = {
 	mediaQueries: [
 		{ breakpoint: 'tablet', size: '740px' },
@@ -163,14 +158,19 @@ const fullWidthSizes: Sizes = {
 	default: '100vw',
 };
 
-const HeaderMedia: FC<Props> = ({ item }) => {
-	const format = getFormat(item);
+const HeaderMedia: FC = () => {
+	const itemExtras = useItemExtras();
 	const {
-		cameraIcon: iconColor,
-		cameraIconBackground: iconBackgroundColor,
-	} = getThemeStyles(format.theme);
-
-	return maybeRender(item.mainMedia, (media) => {
+		format,
+		mainMedia,
+		tags,
+		themeStyles: {
+			cameraIcon: iconColor,
+			cameraIconBackground: iconBackgroundColor,
+		},
+	} = itemExtras;
+
+	return maybeRender(mainMedia, (media) => {
 		if (media.kind === MainMediaKind.Image) {
 			const {
 				image,
@@ -180,14 +180,14 @@ const HeaderMedia: FC<Props> = ({ item }) => {
 				<figure
 					css={[
 						getStyles(format),
-						isPicture(item.tags) ? pictureStyles : null,
+						isPicture(tags) ? pictureStyles : null,
 					]}
 					aria-labelledby={captionId}
 				>
 					<Img
 						image={image}
 						sizes={getImageSizes(format)}
-						format={item}
+						format={format}
 						className={some(getImageStyle(image, format))}
 						supportsDarkMode
 						lightbox={some({
@@ -203,7 +203,7 @@ const HeaderMedia: FC<Props> = ({ item }) => {
 						iconColor={iconColor}
 						iconBackgroundColor={iconBackgroundColor}
 					/>
-					<StarRating item={item} />
+					<StarRating />
 				</figure>
 			);
 		} else {
diff --git a/src/components/editions/headline/index.tsx b/src/components/editions/headline/index.tsx
index 1b23ff4c7..4971b1d5e 100644
--- a/src/components/editions/headline/index.tsx
+++ b/src/components/editions/headline/index.tsx
@@ -14,10 +14,9 @@ import { SvgQuote } from '@guardian/src-icons';
 import type { Format } from '@guardian/types';
 import { Design, Display } from '@guardian/types';
 import { headlineTextColour } from 'editorialStyles';
-import type { Item } from 'item';
-import { getFormat } from 'item';
+import type { ItemExtras } from 'itemExtrasContext';
+import { useItemExtras } from 'itemExtrasContext';
 import type { FC } from 'react';
-import { getThemeStyles } from 'themeStyles';
 import Series from '../series';
 import { articleWidthStyles } from '../styles';
 
@@ -126,16 +125,14 @@ const getSharedStyles = (format: Format): SerializedStyles => css`
 	margin: 0;
 `;
 
-const getQuoteStyles = (format: Format): SerializedStyles => {
-	const { kicker } = getThemeStyles(format.theme);
-
+const getQuoteStyles = (kickerColor: string): SerializedStyles => {
 	return css`
 		margin: 0;
 		svg {
 			margin-bottom: -0.65rem;
 			width: 40px;
 			margin-left: -0.3rem;
-			fill: ${kicker};
+			fill: ${kickerColor};
 		}
 
 		${from.tablet} {
@@ -147,22 +144,26 @@ const getQuoteStyles = (format: Format): SerializedStyles => {
 	`;
 };
 
-const getDecorativeStyles = (item: Item): JSX.Element | string => {
-	const format = getFormat(item);
+const getDecorativeStyles = (itemExtras: ItemExtras): JSX.Element | string => {
+	const {
+		design,
+		headline,
+		themeStyles: { kicker },
+	} = itemExtras;
 
-	if (item.design === Design.Interview) {
-		return <span css={interviewFontStyles}>{item.headline}</span>;
+	if (design === Design.Interview) {
+		return <span css={interviewFontStyles}>{headline}</span>;
 	}
 
-	if (item.design === Design.Comment) {
+	if (design === Design.Comment) {
 		return (
-			<span css={getQuoteStyles(format)}>
+			<span css={getQuoteStyles(kicker)}>
 				<SvgQuote />
-				{item.headline}
+				{headline}
 			</span>
 		);
 	}
-	return item.headline;
+	return headline;
 };
 
 const getHeadlineStyles = (
@@ -216,23 +217,22 @@ const hasSeriesKicker = (format: Format): boolean =>
 
 // ----- Component ----- //
 
-interface Props {
-	item: Item;
-}
-
-const Headline: FC<Props> = ({ item }) => {
-	const format = getFormat(item);
-	const { kicker: kickerColor } = getThemeStyles(format.theme);
+const Headline: FC = () => {
+	const itemExtras = useItemExtras();
+	const {
+		format,
+		themeStyles: { kicker: kickerColor },
+	} = itemExtras;
 
 	return (
 		<div css={headlineWrapperStyles}>
 			{hasSeriesKicker(format) && (
 				<div css={seriesStyles}>
-					<Series item={item} />
+					<Series />
 				</div>
 			)}
 			<h1 css={getHeadlineStyles(format, kickerColor)}>
-				{getDecorativeStyles(item)}
+				{getDecorativeStyles(itemExtras)}
 			</h1>
 		</div>
 	);
diff --git a/src/components/editions/pullquote.tsx b/src/components/editions/pullquote.tsx
index ff0c6e4ec..46dd85b07 100644
--- a/src/components/editions/pullquote.tsx
+++ b/src/components/editions/pullquote.tsx
@@ -3,17 +3,16 @@ import { css } from '@emotion/core';
 import { from } from '@guardian/src-foundations/mq';
 import { headline } from '@guardian/src-foundations/typography';
 import { SvgQuote } from '@guardian/src-icons/quote';
-import type { Format, Option } from '@guardian/types';
+import type { Option } from '@guardian/types';
 import { map, withDefault } from '@guardian/types';
+import { useItemExtras } from 'itemExtrasContext';
 import { pipe2 } from 'lib';
 import type { FC, ReactNode } from 'react';
-import { getThemeStyles } from 'themeStyles';
 
 export const pullquoteWidth = '10.875rem';
 const pullquoteTailSize = '1.5rem';
 
-const styles = (format: Format): SerializedStyles => {
-	const { kicker } = getThemeStyles(format.theme);
+const styles = (kickerColor: string): SerializedStyles => {
 	return css`
 		width: ${pullquoteWidth};
 		position: relative;
@@ -21,9 +20,9 @@ const styles = (format: Format): SerializedStyles => {
 		padding: 0 0.5rem 1.5rem 0.5rem;
 		margin: 0.375rem 1rem calc(1rem + ${pullquoteTailSize}) 0;
 
-		color: ${kicker};
-		border: 1px solid ${kicker};
-		border-top: 0.75rem solid ${kicker};
+		color: ${kickerColor};
+		border: 1px solid ${kickerColor};
+		border-top: 0.75rem solid ${kickerColor};
 		border-bottom: none;
 
 		float: left;
@@ -41,7 +40,7 @@ const styles = (format: Format): SerializedStyles => {
 			left: -1px;
 			width: ${pullquoteTailSize};
 			height: ${pullquoteTailSize};
-			border: 1px solid ${kicker};
+			border: 1px solid ${kickerColor};
 			border-top: none;
 			border-radius: 0 0 100% 0;
 		}
@@ -53,14 +52,12 @@ const styles = (format: Format): SerializedStyles => {
 			left: calc(${pullquoteTailSize} + 1px);
 			width: calc(100% - ${pullquoteTailSize});
 			height: 1px;
-			border-top: 1px solid ${kicker};
+			border-top: 1px solid ${kickerColor};
 		}
 	`;
 };
 
-const quoteStyles = (format: Format): SerializedStyles => {
-	const { kicker } = getThemeStyles(format.theme);
-
+const quoteStyles = (kickerColor: string): SerializedStyles => {
 	return css`
 		margin: 0;
 		${headline.xxsmall({ fontWeight: 'regular' })}
@@ -68,7 +65,7 @@ const quoteStyles = (format: Format): SerializedStyles => {
 			margin-bottom: -0.6rem;
 			height: 2rem;
 			margin-left: -0.3rem;
-			fill: ${kicker};
+			fill: ${kickerColor};
 		}
 	`;
 };
@@ -80,7 +77,6 @@ const citeStyles = css`
 
 type Props = {
 	quote: string;
-	format: Format;
 	attribution: Option<string>;
 };
 
@@ -88,9 +84,12 @@ const blockQuoteStyles = css`
 	margin: 0;
 `;
 
-const Pullquote: FC<Props> = ({ quote, attribution, format }) => {
+const Pullquote: FC<Props> = ({ quote, attribution }) => {
+	const {
+		themeStyles: { kicker },
+	} = useItemExtras();
 	const quoteElement = (
-		<p css={quoteStyles(format)}>
+		<p css={quoteStyles(kicker)}>
 			<SvgQuote />
 			{quote}
 		</p>
@@ -107,7 +106,7 @@ const Pullquote: FC<Props> = ({ quote, attribution, format }) => {
 	);
 
 	return (
-		<aside css={styles(format)}>
+		<aside css={styles(kicker)}>
 			<blockquote css={blockQuoteStyles}>{children}</blockquote>
 		</aside>
 	);
diff --git a/src/components/editions/series.tsx b/src/components/editions/series.tsx
index 5156c2008..757a719c7 100644
--- a/src/components/editions/series.tsx
+++ b/src/components/editions/series.tsx
@@ -6,11 +6,10 @@ import { neutral, remSpace } from '@guardian/src-foundations';
 import { from } from '@guardian/src-foundations/mq';
 import { titlepiece } from '@guardian/src-foundations/typography';
 import { Design, Display } from '@guardian/types';
-import type { Item } from 'item';
-import { getFormat } from 'item';
+import type { ItemExtras } from 'itemExtrasContext';
+import { useItemExtras } from 'itemExtrasContext';
 import { maybeRender } from 'lib';
 import type { FC } from 'react';
-import { getThemeStyles } from 'themeStyles';
 import { kickerPicker } from './kickerPicker';
 
 // ----- Component ----- //
@@ -39,26 +38,24 @@ const interviewStyles = (kicker: string): SerializedStyles => css`
 	padding: ${remSpace[2]} ${remSpace[3]};
 `;
 
-interface Props {
-	item: Item;
-}
-
-const getStyles = (item: Item): SerializedStyles => {
-	const format = getFormat(item);
-	const { kicker } = getThemeStyles(format.theme);
-	if (
-		item.design === Design.Interview ||
-		item.display === Display.Immersive
-	) {
+const getStyles = (itemExtras: ItemExtras): SerializedStyles => {
+	const {
+		themeStyles: { kicker },
+		design,
+		display,
+	} = itemExtras;
+	if (design === Design.Interview || display === Display.Immersive) {
 		return css(styles(kicker), interviewStyles(kicker));
 	}
 	return styles(kicker);
 };
 
-const Series: FC<Props> = ({ item }) =>
-	maybeRender(kickerPicker(item), (kicker) => (
-		<nav css={getStyles(item)}>{kicker}</nav>
+const Series: FC = () => {
+	const itemExtras = useItemExtras();
+	return maybeRender(kickerPicker(itemExtras), (kicker) => (
+		<nav css={getStyles(itemExtras)}>{kicker}</nav>
 	));
+};
 
 // ----- Exports ----- //
 
diff --git a/src/components/editions/standfirst.tsx b/src/components/editions/standfirst.tsx
index de01c5b50..b7e28ad18 100644
--- a/src/components/editions/standfirst.tsx
+++ b/src/components/editions/standfirst.tsx
@@ -4,13 +4,12 @@ import type { SerializedStyles } from '@emotion/core';
 import { css } from '@emotion/core';
 import { neutral, remSpace, text } from '@guardian/src-foundations';
 import { body, headline } from '@guardian/src-foundations/typography';
-import type { Format } from '@guardian/types';
 import { Design, Display } from '@guardian/types';
-import type { Item } from 'item';
+import type { ItemExtras } from 'itemExtrasContext';
+import { useItemExtras } from 'itemExtrasContext';
 import { maybeRender } from 'lib';
 import type { FC } from 'react';
 import { renderStandfirstText } from 'renderer';
-import { getThemeStyles } from 'themeStyles';
 import { ShareIcon } from './shareIcon';
 import { articleWidthStyles, sidePadding } from './styles';
 
@@ -76,14 +75,16 @@ const immersiveStyles = `
 `;
 
 interface Props {
-	item: Item;
 	shareIcon?: boolean;
 }
 
 const noLinks = true;
 
-const getStyles = (format: Format): SerializedStyles => {
-	const { kicker: kickerColor } = getThemeStyles(format.theme);
+const getStyles = (itemExtras: ItemExtras): SerializedStyles => {
+	const {
+		format,
+		themeStyles: { kicker: kickerColor },
+	} = itemExtras;
 
 	// Display.Immersive needs to come before Design.Interview
 	if (format.display === Display.Immersive) {
@@ -104,10 +105,11 @@ const getStyles = (format: Format): SerializedStyles => {
 	return styles(kickerColor);
 };
 
-const Standfirst: FC<Props> = ({ item, shareIcon }) => {
-	return maybeRender(item.standfirst, (standfirst) => (
-		<div css={getStyles(item)}>
-			{renderStandfirstText(standfirst, item, noLinks)}
+const Standfirst: FC<Props> = ({ shareIcon }) => {
+	const itemExtras = useItemExtras();
+	return maybeRender(itemExtras.standfirst, (standfirst) => (
+		<div css={getStyles(itemExtras)}>
+			{renderStandfirstText(standfirst, itemExtras, noLinks)}
 			{shareIcon && (
 				<span className="js-share-button" role="button">
 					<ShareIcon />
diff --git a/src/components/editions/starRating.tsx b/src/components/editions/starRating.tsx
index e854c3736..7c85b49ef 100644
--- a/src/components/editions/starRating.tsx
+++ b/src/components/editions/starRating.tsx
@@ -7,7 +7,7 @@ import {
 } from '@guardian/src-foundations/palette';
 import { SvgStar } from '@guardian/src-icons';
 import { Design } from '@guardian/types';
-import type { Item } from 'item';
+import { useItemExtras } from 'itemExtrasContext';
 import type { FC, ReactNode } from 'react';
 
 // ----- Subcomponents ----- //
@@ -47,19 +47,18 @@ export const stars = (rating: number): ReactNode =>
 
 // ----- Component ----- //
 
-interface Props {
-	item: Item;
-}
 const containerStyles = css`
 	position: absolute;
 	left: 0;
 	bottom: 0;
 `;
 
-const StarRating: FC<Props> = ({ item }) =>
-	item.design === Design.Review ? (
-		<div css={containerStyles}>{stars(item.starRating)}</div>
+const StarRating: FC = () => {
+	const itemExtras = useItemExtras();
+	return itemExtras.design === Design.Review ? (
+		<div css={containerStyles}>{stars(itemExtras.starRating)}</div>
 	) : null;
+};
 
 // ----- Exports ----- //
 
diff --git a/src/itemExtrasContext.tsx b/src/itemExtrasContext.tsx
new file mode 100644
index 000000000..65a95b5b4
--- /dev/null
+++ b/src/itemExtrasContext.tsx
@@ -0,0 +1,30 @@
+import type { Format } from '@guardian/types';
+import type { FC } from 'react';
+import React from 'react';
+import type { ThemeStyles } from 'themeStyles';
+import { getThemeStyles } from 'themeStyles';
+import { createContext } from 'utils/createContext';
+import type { Item } from './item';
+import { getFormat } from './item';
+
+type ItemExtras = Item & {
+	format: Format;
+	themeStyles: ThemeStyles;
+};
+
+const { useContext, ContextProvider } = createContext<ItemExtras>();
+
+type Props = {
+	item: Item;
+};
+
+const ItemExtrasProvider: FC<Props> = ({ item, children }) => {
+	const itemExtras: ItemExtras = {
+		...item,
+		format: getFormat(item),
+		themeStyles: getThemeStyles(item.theme),
+	};
+	return <ContextProvider value={itemExtras}>{children}</ContextProvider>;
+};
+
+export { useContext as useItemExtras, ItemExtrasProvider, ItemExtras };
diff --git a/src/renderer.ts b/src/renderer.ts
index 396b734eb..aab738349 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -811,12 +811,12 @@ const renderEditions = (format: Format, excludeStyles = false) => (
 
 		case ElementKind.Image:
 			return format.design === Design.Media
-				? h(GalleryImage, { format, image: element })
+				? h(GalleryImage, { image: element })
 				: imageRenderer(format, element, key);
 
 		case ElementKind.Pullquote: {
 			const { quote, attribution } = element;
-			return h(EditionsPullquote, { quote, attribution, format, key });
+			return h(EditionsPullquote, { quote, attribution, key });
 		}
 
 		case ElementKind.RichLink: {
diff --git a/src/server/editionsPage.tsx b/src/server/editionsPage.tsx
index 453060dad..7a40774b1 100644
--- a/src/server/editionsPage.tsx
+++ b/src/server/editionsPage.tsx
@@ -19,6 +19,7 @@ import type { ReactElement } from 'react';
 import { renderToString } from 'react-dom/server';
 import { cspEditions } from 'server/csp';
 import { pageFonts } from 'styles';
+import { ItemExtrasProvider } from '../itemExtrasContext';
 
 // ----- Types ----- //
 
@@ -72,7 +73,9 @@ const renderBody = (item: Item): EmotionCritical =>
 		renderToString,
 	)(
 		<CacheProvider value={cache}>
-			<Article item={item} />
+			<ItemExtrasProvider item={item}>
+				<Article item={item} />
+			</ItemExtrasProvider>
 		</CacheProvider>,
 	);
 
diff --git a/src/utils/createContext.ts b/src/utils/createContext.ts
new file mode 100644
index 000000000..407ca78b8
--- /dev/null
+++ b/src/utils/createContext.ts
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const createContext = <T extends unknown>(): {
+	useContext: () => T;
+	ContextProvider: React.Provider<T | undefined>;
+} => {
+	const context = React.createContext<T | undefined>(undefined);
+	function useContext(): T {
+		const safeContext = React.useContext(context);
+		if (!safeContext)
+			throw new Error(
+				'useContext must be inside a Provider with a value',
+			);
+		return safeContext;
+	}
+	return { useContext, ContextProvider: context.Provider };
+};