From f929e73a2db82a745d58ae6e03270f4ea019c36b Mon Sep 17 00:00:00 2001
From: Anna Beddow <anna.beddow@gmail.com>
Date: Mon, 21 Oct 2024 09:30:49 +0100
Subject: [PATCH] conditionally pad trailtext (#12575)

---
 dotcom-rendering/src/components/Card/Card.tsx            | 1 +
 .../src/components/Card/components/TrailTextWrapper.tsx  | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index b3bfdf49c8..874d19f0c0 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -788,6 +788,7 @@ export const Card = ({
 									shouldHide={isFlexSplash ? false : true}
 									trailTextColour={trailTextColour}
 									trailTextSize={trailTextSize}
+									padTop={headlinePosition === 'inner'}
 								>
 									<div
 										dangerouslySetInnerHTML={{
diff --git a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
index 197256f96d..623d33c839 100644
--- a/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
+++ b/dotcom-rendering/src/components/Card/components/TrailTextWrapper.tsx
@@ -21,6 +21,7 @@ type Props = {
 	trailTextSize?: TrailTextSize;
 	/** Optionally overrides the trail text colour */
 	trailTextColour?: string;
+	padTop: boolean;
 };
 
 /**
@@ -55,7 +56,11 @@ const decideVisibilityStyles = (
 const trailTextStyles = css`
 	display: flex;
 	flex-direction: column;
-	padding: ${space[2]}px 0;
+	padding-bottom: ${space[2]}px;
+`;
+
+const topPadding = css`
+	padding-top: ${space[2]}px;
 `;
 
 const fontStyles = (trailTextSize: TrailTextSize) => css`
@@ -76,6 +81,7 @@ export const TrailTextWrapper = ({
 	shouldHide = true,
 	trailTextSize = 'regular',
 	trailTextColour = palette('--card-trail-text'),
+	padTop,
 }: Props) => {
 	return (
 		<div
@@ -91,6 +97,7 @@ export const TrailTextWrapper = ({
 						imageSize,
 						imageType,
 					),
+				padTop && topPadding,
 			]}
 		>
 			{children}