diff --git a/src/lib/components/ui/Card.svelte b/src/lib/components/ui/Card.svelte
index 9e03292f..8bcb6c36 100644
--- a/src/lib/components/ui/Card.svelte
+++ b/src/lib/components/ui/Card.svelte
@@ -1,6 +1,4 @@
 <script>
-  import PostcodeOrAreaSearch from "./PostcodeOrAreaSearch.svelte";
-
   let {
     linkCard = true,
     linkText = undefined,
@@ -8,7 +6,7 @@
     href = undefined,
     callToActionBackgroundColor = "white",
     bodyText = undefined,
-    bodyTextColor = undefined,
+    bodyTextColor = "#0B0C0C",
     bodyBackgroundColor = "#FBFCFD",
     bodyTopBorderColor = "#F4F8FB",
     bodyBottomBorderColor = "#c3d9e9",
@@ -23,15 +21,13 @@
     style="background-color: {callToActionBackgroundColor};"
   >
     {#if linkCard}
-      <div
-        class="link"
-        style="display: flex; align-items: center; justify-content: space-between;"
-      >
-        <span class="govuk-heading-m">
-          <a {href} class="govuk-link" style="color: {linkTextColor};"
-            >{linkText}</a
-          >
-        </span>
+      <a class="link" {href}>
+        <h3
+          class="govuk-link link-heading govuk-heading-m"
+          style="--link-text-color: {linkTextColor}"
+        >
+          {linkText}
+        </h3>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width="10"
@@ -44,17 +40,19 @@
             fill={linkTextColor}
           ></path>
         </svg>
-      </div>
+      </a>
     {:else}
       {@render cardSnippet()}
     {/if}
   </div>
 
   <div
-    class="body govuk-body"
-    style="background-color: {bodyBackgroundColor}; color: {bodyTextColor}; border-bottom: 1px solid {bodyBottomBorderColor}; border-top: 1px solid {bodyTopBorderColor};"
+    class="body-div"
+    style="--body-bg-color: {bodyBackgroundColor}; --body-bottom-border-color: {bodyBottomBorderColor}; --body-top-border-color: {bodyTopBorderColor};"
   >
-    {bodyText}
+    <p class="govuk-body body-text" style="--body-text-color: {bodyTextColor};">
+      {bodyText}
+    </p>
   </div>
 </div>
 
@@ -68,11 +66,29 @@
     padding: 15px 20px;
   }
 
-  .body {
+  .link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  .link-heading {
+    color: var(--link-text-color);
+  }
+
+  .body-div {
+    background-color: var(--body-bg-color);
+    border-bottom: 1px solid var(--body-bottom-border-color);
+    border-top: 1px solid var(--body-top-border-color);
     padding: 10px 20px 15px 20px;
     flex: 1;
   }
 
+  .body-text {
+    color: var(--body-text-color);
+  }
+
   .govuk-heading-m {
     /* overwriting margin and line-height to make link centered vertically */
     margin: 0;
diff --git a/src/wrappers/components/ui/CardWrapper.svelte b/src/wrappers/components/ui/CardWrapper.svelte
index a8c3449a..778f2db5 100644
--- a/src/wrappers/components/ui/CardWrapper.svelte
+++ b/src/wrappers/components/ui/CardWrapper.svelte
@@ -189,12 +189,12 @@
       {
         name: "bodyText",
         category: "Input props",
-        value: `This is the text that gives more information about call to action in the card heading test.`,
+        value: `This is the text that gives more information about the call to action in the card heading.`,
       },
       {
         name: "bodyTextColor",
         category: "Input props",
-        value: ``,
+        value: `#0B0C0C`,
       },
       {
         name: "bodyBackgroundColor",