diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 7281257654..9766565d44 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -109,8 +109,16 @@ const detailsStyles = css` flex-direction: column; gap: ${space[4]}px; margin-bottom: ${space[2]}px; +`; + +const sectionStyles = css` + display: flex; + flex-direction: column; + gap: ${space[3]}px; + border-top: 1px solid ${neutral[100]}; + padding-top: ${space[2]}px; - h2 { + h3 { ${headlineBold17}; } @@ -121,14 +129,6 @@ const detailsStyles = css` } `; -const sectionStyles = css` - display: flex; - flex-direction: column; - gap: ${space[3]}px; - border-top: 1px solid ${neutral[100]}; - padding-top: ${space[2]}px; -`; - const imageTopStyles = css` position: absolute; top: 0; @@ -142,6 +142,13 @@ const imageBottomStyles = css` const buttonStyles = css` z-index: 1; + background-color: white; + width: fit-content; + + ${textSansBold12}; + ${from.wide} { + ${textSansBold14}; + } `; interface Props { @@ -180,9 +187,9 @@ export const ExpandableMarketingCard = ({ /> )} -
+
- {heading} +

{heading}

{kicker}
-
+ {isExpanded && (
-
-

We're independent

+
+

We're independent

With no billionaire owner or shareholders, our journalism is funded by readers

-
-
-

We're open

+ +
+

We're open

With misinformation threatening democracy, we keep our fact-based news paywall-free

-
-
-

We're global

+ +
+

We're global

With 200 years of history and staff across America and the world, we offer an outsider perspective on US news

-
-
- - View newsletters - -
+ + + View newsletters +
)}