diff --git a/editor.planx.uk/src/@planx/components/AddressInput/Public.tsx b/editor.planx.uk/src/@planx/components/AddressInput/Public.tsx
index 2cc1185c55..94f4bc6204 100644
--- a/editor.planx.uk/src/@planx/components/AddressInput/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/AddressInput/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Public.tsx b/editor.planx.uk/src/@planx/components/Checklist/Public.tsx
index 1920a3ef26..190511ad70 100644
--- a/editor.planx.uk/src/@planx/components/Checklist/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Checklist/Public.tsx
@@ -10,7 +10,7 @@ import {
 } from "@planx/components/Checklist/model";
 import ImageButton from "@planx/components/shared/Buttons/ImageButton";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { getIn, useFormik } from "formik";
 import React, { useState } from "react";
 import { ExpandableList, ExpandableListItem } from "ui/public/ExpandableList";
diff --git a/editor.planx.uk/src/@planx/components/ContactInput/Public.tsx b/editor.planx.uk/src/@planx/components/ContactInput/Public.tsx
index 16a7accbe7..8f83d999c7 100644
--- a/editor.planx.uk/src/@planx/components/ContactInput/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/ContactInput/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/Content/Public.tsx b/editor.planx.uk/src/@planx/components/Content/Public.tsx
index d8232f954a..c7f2260cb7 100644
--- a/editor.planx.uk/src/@planx/components/Content/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Content/Public.tsx
@@ -12,7 +12,7 @@ import { getContrastTextColor } from "styleUtils";
 import { emptyContent } from "ui/editor/RichTextInput";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
-import { HelpButton, Image } from "../shared/Preview/CardHeader";
+import { HelpButton, Image } from "../shared/Preview/CardHeader/styled";
 import MoreInfo from "../shared/Preview/MoreInfo";
 import MoreInfoSection from "../shared/Preview/MoreInfoSection";
 
diff --git a/editor.planx.uk/src/@planx/components/DateInput/Public.tsx b/editor.planx.uk/src/@planx/components/DateInput/Public.tsx
index f936c0f04c..63bcef5363 100644
--- a/editor.planx.uk/src/@planx/components/DateInput/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/DateInput/Public.tsx
@@ -1,9 +1,12 @@
 import Box from "@mui/material/Box";
 import { visuallyHidden } from "@mui/utils";
-import { DateInput, paddedDate } from "@planx/components/DateInput/model";
-import { dateRangeSchema } from "@planx/components/DateInput/model";
+import {
+  DateInput,
+  dateRangeSchema,
+  paddedDate,
+} from "@planx/components/DateInput/model";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
index 1fb4858bc9..0d09c79d65 100644
--- a/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx
@@ -5,7 +5,7 @@ import { visuallyHidden } from "@mui/utils";
 import { FileUploadSlot } from "@planx/components/FileUpload/model";
 import { PASSPORT_REQUESTED_FILES_KEY } from "@planx/components/FileUploadAndLabel/model";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import {
   MapContainer,
   MapFooter,
diff --git a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx
index f43b65fba7..7e79cab117 100644
--- a/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUpload/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useRef, useState } from "react";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
index de9c75391e..50d7f4bb48 100644
--- a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx
@@ -22,7 +22,8 @@ import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 import { FileUploadSlot } from "../FileUpload/model";
 import { MoreInformation } from "../shared";
 import Card from "../shared/Preview/Card";
-import CardHeader, { Image } from "../shared/Preview/CardHeader";
+import { CardHeader } from "../shared/Preview/CardHeader/CardHeader";
+import { Image } from "../shared/Preview/CardHeader/styled";
 import MoreInfo from "../shared/Preview/MoreInfo";
 import MoreInfoSection from "../shared/Preview/MoreInfoSection";
 import { Dropzone } from "../shared/PrivateFileUpload/Dropzone";
diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
index f5f76f4f19..3c2f4a14c1 100644
--- a/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx
@@ -4,7 +4,7 @@ import Link from "@mui/material/Link";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { squareMetresToHectares } from "@planx/components/shared/utils";
 import { PublicProps } from "@planx/components/ui";
 import area from "@turf/area";
diff --git a/editor.planx.uk/src/@planx/components/List/Public/index.tsx b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
index 57e806ee65..861e7268da 100644
--- a/editor.planx.uk/src/@planx/components/List/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/List/Public/index.tsx
@@ -16,7 +16,7 @@ import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import Card from "../../shared/Preview/Card";
-import CardHeader from "../../shared/Preview/CardHeader";
+import { CardHeader } from "../../shared/Preview/CardHeader/CardHeader";
 import type { List } from "../model";
 import { formatSchemaDisplayValue } from "../utils";
 import { ListProvider, useListContext } from "./Context";
diff --git a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
index f582ad3ec2..f3bdaf8741 100644
--- a/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
+++ b/editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx
@@ -19,7 +19,7 @@ import FullWidthWrapper from "ui/public/FullWidthWrapper";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 
 import Card from "../../shared/Preview/Card";
-import CardHeader from "../../shared/Preview/CardHeader";
+import { CardHeader } from "../../shared/Preview/CardHeader/CardHeader";
 import { MapContainer } from "../../shared/Preview/MapContainer";
 import { PublicProps } from "../../ui";
 import type { MapAndLabel } from "./../model";
diff --git a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
index 98e1dde77e..208cd4dc0f 100644
--- a/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/NextSteps/Public.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import NextStepsList from "ui/public/NextStepsList";
 
 import Card from "../shared/Preview/Card";
-import CardHeader from "../shared/Preview/CardHeader";
+import { CardHeader } from "../shared/Preview/CardHeader/CardHeader";
 import { NextSteps } from "./model";
 
 export type Props = PublicProps<NextSteps>;
diff --git a/editor.planx.uk/src/@planx/components/Notice/Public.tsx b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
index be9f7903ff..caf19d193e 100644
--- a/editor.planx.uk/src/@planx/components/Notice/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Notice/Public.tsx
@@ -5,9 +5,10 @@ import Button from "@mui/material/Button";
 import { styled, useTheme } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import type { Notice } from "@planx/components/Notice/model";
-import Card from "@planx/components/shared/Preview/Card";
-import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import Card, {
+  contentFlowSpacing,
+} from "@planx/components/shared/Preview/Card";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { PublicProps } from "@planx/components/ui";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/NumberInput/Public.tsx b/editor.planx.uk/src/@planx/components/NumberInput/Public.tsx
index a75a65e04d..42e89bd895 100644
--- a/editor.planx.uk/src/@planx/components/NumberInput/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/NumberInput/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import isNil from "lodash/isNil";
diff --git a/editor.planx.uk/src/@planx/components/Page/Public.tsx b/editor.planx.uk/src/@planx/components/Page/Public.tsx
index d96e3dfcf1..615fbb4108 100644
--- a/editor.planx.uk/src/@planx/components/Page/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Page/Public.tsx
@@ -4,7 +4,7 @@ import React from "react";
 
 import { flatten } from "../List/utils";
 import Card from "../shared/Preview/Card";
-import CardHeader from "../shared/Preview/CardHeader";
+import { CardHeader } from "../shared/Preview/CardHeader/CardHeader";
 import { useSchema } from "../shared/Schema/hook";
 import { SchemaUserData } from "../shared/Schema/model";
 import { SchemaFields } from "../shared/Schema/SchemaFields";
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Presentational.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Presentational.tsx
index a1d44fbe62..66f56fb8ad 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Presentational.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Presentational.tsx
@@ -2,7 +2,7 @@ import ErrorOutline from "@mui/icons-material/ErrorOutline";
 import Typography from "@mui/material/Typography";
 import type { Constraint, GISResponse } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import capitalize from "lodash/capitalize";
 import { HandleSubmit } from "pages/Preview/Node";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
index 3289f8a22d..647750bfc5 100644
--- a/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PlanningConstraints/Public.tsx
@@ -3,7 +3,7 @@ import type {
   GISResponse,
 } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { PublicProps } from "@planx/components/ui";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import { GraphError } from "components/Error/GraphError";
diff --git a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
index 6b6bfc17d9..cd9402734a 100644
--- a/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/PropertyInformation/Public.tsx
@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import { visuallyHidden } from "@mui/utils";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
 import type { PublicProps } from "@planx/components/ui";
 import { GraphError } from "components/Error/GraphError";
diff --git a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
index 88b1f54b5d..db52a79ab2 100644
--- a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
+++ b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx
@@ -4,9 +4,9 @@ import Grid from "@mui/material/Grid";
 import RadioGroup from "@mui/material/RadioGroup";
 import { visuallyHidden } from "@mui/utils";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import BasicRadio from "@planx/components/shared/Radio/BasicRadio";
-import DescriptionRadio from "@planx/components/shared/Radio/DescriptionRadio";
+import DescriptionRadio from "@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio";
 import ImageRadio from "@planx/components/shared/Radio/ImageRadio";
 import { useFormik } from "formik";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx b/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
index 70e48a4057..636bb8bc91 100644
--- a/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
+++ b/editor.planx.uk/src/@planx/components/Review/Public/Presentational.tsx
@@ -1,6 +1,6 @@
 import { NodeId } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import SummaryListsBySections from "@planx/components/shared/Preview/SummaryList";
 import { PrintButton } from "components/PrintButton";
 import { Store } from "pages/FlowEditor/lib/store";
diff --git a/editor.planx.uk/src/@planx/components/Section/Public.tsx b/editor.planx.uk/src/@planx/components/Section/Public.tsx
index 55206a5fa1..70e373895a 100644
--- a/editor.planx.uk/src/@planx/components/Section/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Section/Public.tsx
@@ -12,7 +12,7 @@ import { SectionNode, SectionStatus } from "types";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
 
 import Card from "../shared/Preview/Card";
-import CardHeader from "../shared/Preview/CardHeader";
+import { CardHeader } from "../shared/Preview/CardHeader/CardHeader";
 import type { Section } from "./model";
 import { computeSectionStatuses } from "./model";
 
diff --git a/editor.planx.uk/src/@planx/components/TaskList/Public.tsx b/editor.planx.uk/src/@planx/components/TaskList/Public.tsx
index 50a37eaab3..b348e7d72f 100644
--- a/editor.planx.uk/src/@planx/components/TaskList/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/TaskList/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import type { TaskList } from "@planx/components/TaskList/model";
 import { PublicProps } from "@planx/components/ui";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/TextInput/Public.tsx b/editor.planx.uk/src/@planx/components/TextInput/Public.tsx
index 37b67305c5..161172f31e 100644
--- a/editor.planx.uk/src/@planx/components/TextInput/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/TextInput/Public.tsx
@@ -1,5 +1,5 @@
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { PublicProps } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader.tsx
deleted file mode 100644
index 5b8a178b87..0000000000
--- a/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import HelpIcon from "@mui/icons-material/Help";
-import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
-import { styled } from "@mui/material/styles";
-import Typography from "@mui/material/Typography";
-import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
-import React from "react";
-import { emptyContent } from "ui/editor/RichTextInput";
-import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
-
-import { DESCRIPTION_TEXT } from "../constants";
-import MoreInfo from "./MoreInfo";
-import MoreInfoSection from "./MoreInfoSection";
-
-interface ICardHeader {
-  title?: string;
-  description?: string;
-  info?: string;
-  policyRef?: string;
-  howMeasured?: string;
-  definitionImg?: string;
-  img?: string;
-}
-const Description = styled(Box)(({ theme }) => ({
-  "& p": {
-    margin: theme.spacing(1, 0),
-  },
-}));
-
-const CardHeaderWrapper = styled(Box)(({ theme }) => ({
-  maxWidth: theme.breakpoints.values.formWrap,
-  marginBottom: theme.spacing(1),
-}));
-
-const TitleWrapper = styled(Box)(({ theme }) => ({
-  width: theme.breakpoints.values.formWrap,
-  maxWidth: "100%",
-}));
-
-export const HelpButton = styled(Button)(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  marginTop: theme.spacing(1.5),
-  fontSize: "inherit",
-  "& > svg": {
-    marginRight: theme.spacing(0.5),
-  },
-})) as typeof Button;
-
-export const Image = styled("img")(() => ({
-  maxWidth: "100%",
-}));
-
-const CardHeader: React.FC<ICardHeader> = ({
-  title,
-  description,
-  info,
-  policyRef,
-  howMeasured,
-  definitionImg,
-  img,
-}) => {
-  const [open, setOpen] = React.useState(false);
-  const { trackEvent } = useAnalyticsTracking();
-
-  const handleHelpClick = () => {
-    setOpen(true);
-    trackEvent({ event: "helpClick", metadata: {} }); // This returns a promise but we don't need to await for it
-  };
-
-  return (
-    <>
-      <CardHeaderWrapper>
-        {title && (
-          <TitleWrapper mr={1} pt={0.5}>
-            <Typography
-              variant="h2"
-              role="heading"
-              aria-level={1}
-              component="h1"
-              sx={{ textWrap: "balance" }}
-            >
-              {title}
-            </Typography>
-          </TitleWrapper>
-        )}
-        {description && (
-          <Description>
-            <Typography variant="subtitle1" component="div">
-              <ReactMarkdownOrHtml
-                source={description}
-                id={DESCRIPTION_TEXT}
-                openLinksOnNewTab
-              />
-            </Typography>
-          </Description>
-        )}
-        {!!(info || policyRef || howMeasured) && (
-          <Typography variant="subtitle1" component="div">
-            <HelpButton
-              variant="help"
-              title={`More information`}
-              aria-label={`See more information about "${title}"`}
-              onClick={handleHelpClick}
-              aria-haspopup="dialog"
-              data-testid="more-info-button"
-            >
-              <HelpIcon /> More information
-            </HelpButton>
-          </Typography>
-        )}
-        <MoreInfo open={open} handleClose={() => setOpen(false)}>
-          {info && info !== emptyContent ? (
-            <MoreInfoSection title="Why does it matter?">
-              <ReactMarkdownOrHtml source={info} openLinksOnNewTab />
-            </MoreInfoSection>
-          ) : undefined}
-          {policyRef && policyRef !== emptyContent ? (
-            <MoreInfoSection title="Source">
-              <ReactMarkdownOrHtml source={policyRef} openLinksOnNewTab />
-            </MoreInfoSection>
-          ) : undefined}
-          {howMeasured && howMeasured !== emptyContent ? (
-            <MoreInfoSection title="How is it defined?">
-              <>
-                {definitionImg && (
-                  <Image
-                    src={definitionImg}
-                    alt=""
-                    aria-describedby="howMeasured"
-                  />
-                )}
-                <ReactMarkdownOrHtml
-                  source={howMeasured}
-                  openLinksOnNewTab
-                  id="howMeasured"
-                />
-              </>
-            </MoreInfoSection>
-          ) : undefined}
-        </MoreInfo>
-        {img && <Image src={img} alt="question" />}
-      </CardHeaderWrapper>
-    </>
-  );
-};
-export default CardHeader;
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/CardHeader.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/CardHeader.tsx
new file mode 100644
index 0000000000..6ea8461174
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/CardHeader.tsx
@@ -0,0 +1,110 @@
+import HelpIcon from "@mui/icons-material/Help";
+import Typography from "@mui/material/Typography";
+import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
+import React from "react";
+import { emptyContent } from "ui/editor/RichTextInput";
+import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml";
+
+import { DESCRIPTION_TEXT } from "../../constants";
+import MoreInfo from "../MoreInfo";
+import MoreInfoSection from "../MoreInfoSection";
+import {
+  CardHeaderWrapper,
+  Description,
+  HelpButton,
+  Image,
+  TitleWrapper,
+} from "./styled";
+import { ICardHeader } from "./types";
+
+export const CardHeader: React.FC<ICardHeader> = ({
+  title,
+  description,
+  info,
+  policyRef,
+  howMeasured,
+  definitionImg,
+  img,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const { trackEvent } = useAnalyticsTracking();
+
+  const handleHelpClick = () => {
+    setOpen(true);
+    trackEvent({ event: "helpClick", metadata: {} }); // This returns a promise but we don't need to await for it
+  };
+
+  return (
+    <CardHeaderWrapper>
+      {title && (
+        <TitleWrapper mr={1} pt={0.5}>
+          <Typography
+            variant="h2"
+            role="heading"
+            aria-level={1}
+            component="h1"
+            sx={{ textWrap: "balance" }}
+          >
+            {title}
+          </Typography>
+        </TitleWrapper>
+      )}
+      {description && (
+        <Description>
+          <Typography variant="subtitle1" component="div">
+            <ReactMarkdownOrHtml
+              source={description}
+              id={DESCRIPTION_TEXT}
+              openLinksOnNewTab
+            />
+          </Typography>
+        </Description>
+      )}
+      {!!(info || policyRef || howMeasured) && (
+        <Typography variant="subtitle1" component="div">
+          <HelpButton
+            variant="help"
+            title={`More information`}
+            aria-label={`See more information about "${title}"`}
+            onClick={handleHelpClick}
+            aria-haspopup="dialog"
+            data-testid="more-info-button"
+          >
+            <HelpIcon /> More information
+          </HelpButton>
+        </Typography>
+      )}
+      <MoreInfo open={open} handleClose={() => setOpen(false)}>
+        {info && info !== emptyContent ? (
+          <MoreInfoSection title="Why does it matter?">
+            <ReactMarkdownOrHtml source={info} openLinksOnNewTab />
+          </MoreInfoSection>
+        ) : undefined}
+        {policyRef && policyRef !== emptyContent ? (
+          <MoreInfoSection title="Source">
+            <ReactMarkdownOrHtml source={policyRef} openLinksOnNewTab />
+          </MoreInfoSection>
+        ) : undefined}
+        {howMeasured && howMeasured !== emptyContent ? (
+          <MoreInfoSection title="How is it defined?">
+            <>
+              {definitionImg && (
+                <Image
+                  src={definitionImg}
+                  alt=""
+                  aria-describedby="howMeasured"
+                />
+              )}
+              <ReactMarkdownOrHtml
+                source={howMeasured}
+                openLinksOnNewTab
+                id="howMeasured"
+              />
+            </>
+          </MoreInfoSection>
+        ) : undefined}
+      </MoreInfo>
+      {img && <Image src={img} alt="question" />}
+    </CardHeaderWrapper>
+  );
+};
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/styled.ts b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/styled.ts
new file mode 100644
index 0000000000..0f7d364d54
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/styled.ts
@@ -0,0 +1,33 @@
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import { styled } from "@mui/material/styles";
+
+export const Description = styled(Box)(({ theme }) => ({
+  "& p": {
+    margin: theme.spacing(1, 0),
+  },
+}));
+
+export const CardHeaderWrapper = styled(Box)(({ theme }) => ({
+  maxWidth: theme.breakpoints.values.formWrap,
+  marginBottom: theme.spacing(1),
+}));
+
+export const TitleWrapper = styled(Box)(({ theme }) => ({
+  width: theme.breakpoints.values.formWrap,
+  maxWidth: "100%",
+}));
+
+export const HelpButton = styled(Button)(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  marginTop: theme.spacing(1.5),
+  fontSize: "inherit",
+  "& > svg": {
+    marginRight: theme.spacing(0.5),
+  },
+})) as typeof Button;
+
+export const Image = styled("img")(() => ({
+  maxWidth: "100%",
+}));
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/types.ts b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/types.ts
new file mode 100644
index 0000000000..c5c9750afe
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/CardHeader/types.ts
@@ -0,0 +1,9 @@
+export interface ICardHeader {
+  title?: string;
+  description?: string;
+  info?: string;
+  policyRef?: string;
+  howMeasured?: string;
+  definitionImg?: string;
+  img?: string;
+}
diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio.stories.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio.stories.tsx
new file mode 100644
index 0000000000..aae2082eae
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import DescriptionRadio from "./DescriptionRadio";
+
+const meta = {
+  title: "Design System/Atoms/Form Elements/Radio/DescriptionRadio",
+  component: DescriptionRadio,
+} satisfies Meta<typeof DescriptionRadio>;
+
+type Story = StoryObj<typeof meta>;
+
+export default meta;
+
+export const Basic = {
+  args: {
+    title: "Prior approval",
+    description: "This option has a description underneath.",
+    onChange: () => console.log("hi"),
+    id: "1",
+  },
+} satisfies Story;
diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio.tsx
similarity index 100%
rename from editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx
rename to editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio/DescriptionRadio.tsx
diff --git a/editor.planx.uk/src/pages/Preview/ResumePage.tsx b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
index 3544814d2b..1ff744e660 100644
--- a/editor.planx.uk/src/pages/Preview/ResumePage.tsx
+++ b/editor.planx.uk/src/pages/Preview/ResumePage.tsx
@@ -3,14 +3,13 @@ import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import { PaymentRequest } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import axios from "axios";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator";
 import { useFormik } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
-import { useCurrentRoute } from "react-navi";
-import { Link as ReactNaviLink } from "react-navi";
+import { Link as ReactNaviLink, useCurrentRoute } from "react-navi";
 import type { ReconciliationResponse, Session } from "types";
 import { ApplicationPath, SendEmailPayload } from "types";
 import InputLabel from "ui/public/InputLabel";
diff --git a/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx b/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
index 0b74658f0f..0716b76a7f 100644
--- a/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
+++ b/editor.planx.uk/src/pages/Preview/SaveAndReturn.tsx
@@ -1,6 +1,6 @@
 import Box from "@mui/material/Box";
 import Card from "@planx/components/shared/Preview/Card";
-import CardHeader from "@planx/components/shared/Preview/CardHeader";
+import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
 import { useFormik } from "formik";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";