diff --git a/.storybook/preview.js b/.storybook/preview.js
index a9fbe3ea..b3b508b2 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -29,4 +29,7 @@ export const parameters = {
       cellAmount: 4,
     },
   },
+  controls: {
+    expanded: true,
+  },
 };
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6df0e0b5..71884c63 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,12 +15,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Button elements can be `<a>` or `<button>` with `buttonElement: true`
 - Small button option
 - Tabs also respond to the up/down keys on keyboard navigation as well as left/right
+- Allow other image sources in a card image using a `<picture>` element
 
 ### Changed
 
 - Updated social icons in footer to use Font Awesome icons
 - Consolidated markup for "opens in new tab" in external footer links#
 - Columns have margin removed by default
+- Flatten the template parameters for cards (e.g. `image.src` -> `imageSrc`)
 
 ### Deprecated
 ### Removed
diff --git a/src/nationalarchives/components/card/card.scss b/src/nationalarchives/components/card/card.scss
index 56c4755a..d8a684f9 100644
--- a/src/nationalarchives/components/card/card.scss
+++ b/src/nationalarchives/components/card/card.scss
@@ -18,17 +18,7 @@
     order: 2;
   }
 
-  &__supertitle {
-  }
-
-  &__title {
-    order: 2;
-
-    // @include typography.main-font;
-    // @include typography.main-font-weight-bold;
-  }
-
-  &__title-link {
+  &__heading-link {
     &::after {
       display: none !important;
     }
@@ -45,13 +35,15 @@
   }
 
   &__image {
-    width: 100%;
-    height: 100%;
-
     position: absolute;
     inset: 0;
 
-    object-fit: cover;
+    img {
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+    }
   }
 
   &__image-label {
@@ -103,10 +95,10 @@
 
   &--accent {
     @include colour.accent;
-  }
 
-  &--accent &__supertitle {
-    @include colour.invert;
+    .tna-hgroup__supertitle {
+      @include colour.invert;
+    }
   }
 
   &--horizontal {
@@ -175,16 +167,5 @@
 
   @include colour.on-high-contrast {
     @include colour.colour-border("keyline-dark", 1px);
-
-    .tna-card__inner {
-      // padding-bottom: 1rem;
-    }
-
-    .tna-card__heading,
-    .tna-card__body,
-    .tna-card__actions {
-      // margin-right: 1rem;
-      // margin-left: 1rem;
-    }
   }
 }
diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
index 70e3488a..4ade44af 100644
--- a/src/nationalarchives/components/card/card.stories.js
+++ b/src/nationalarchives/components/card/card.stories.js
@@ -2,24 +2,33 @@ import Card from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  heading: { control: "object" },
+  title: { control: "text" },
+  supertitle: { control: "text" },
+  headingLevel: { control: { type: "number", min: 1, max: 6 } },
+  headingSize: { control: "inline-radio", options: ["m", "l"] },
   href: { control: "text" },
-  image: { control: "object" },
+  imageSrc: { control: { type: "file", accept: ".jpg" } },
+  imageAlt: { control: "text" },
+  imageWidth: { control: { type: "number", min: 1 } },
+  imageHeight: { control: { type: "number", min: 1 } },
+  imageSources: { control: "object" },
   label: { control: "text" },
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
   horizontal: { control: "boolean" },
-  style: { control: "text" },
+  style: { control: "inline-radio", options: ["none", "boxed", "accent"] },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
-  argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType,
-  )?.description;
+  const macroOption = macroOptions.find((option) => option.name === argType);
+  argTypes[argType] = {
+    ...argTypes[argType],
+    description: macroOption?.description,
+  };
 });
 
 export default {
@@ -28,9 +37,16 @@ export default {
 };
 
 const Template = ({
-  heading,
+  title,
+  supertitle,
+  headingLevel,
+  headingSize,
   href,
-  image,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageSources,
   label,
   body,
   text,
@@ -43,9 +59,16 @@ const Template = ({
 }) =>
   Card({
     params: {
-      heading,
+      title,
+      supertitle,
+      headingLevel,
+      headingSize,
       href,
-      image,
+      imageSrc,
+      imageAlt,
+      imageWidth,
+      imageHeight,
+      imageSources,
       label,
       body,
       text,
@@ -60,47 +83,34 @@ const Template = ({
 
 export const Standard = Template.bind({});
 Standard.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "m",
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
-  // actions: [
-  //   {
-  //     text: "Card action",
-  //     href: "#",
-  //     title: "Go and do the action",
-  //   },
-  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };
 
 export const Boxed = Template.bind({});
 Boxed.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "m",
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
   style: "boxed",
@@ -110,19 +120,16 @@ Boxed.args = {
 
 export const Accent = Template.bind({});
 Accent.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "m",
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
   style: "accent",
@@ -132,18 +139,15 @@ Accent.args = {
 
 export const Horizontal = Template.bind({});
 Horizontal.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-  },
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
   actions: [
@@ -161,18 +165,15 @@ Horizontal.args = {
 
 export const HorizontalBoxed = Template.bind({});
 HorizontalBoxed.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-  },
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
   actions: [
@@ -191,18 +192,15 @@ HorizontalBoxed.args = {
 
 export const HorizontalAccent = Template.bind({});
 HorizontalAccent.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "l",
-  },
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
   actions: [
@@ -219,10 +217,49 @@ HorizontalAccent.args = {
   classes: "tna-card--demo",
 };
 
+export const Sources = Template.bind({});
+Sources.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
+  imageSrc: "https://www.gstatic.com/webp/gallery/2.jpg",
+  imageAlt: "A man in a canoe paddling through white water",
+  imageWidth: 550,
+  imageHeight: 404,
+  imageSources: [
+    {
+      imageSrc: "https://www.gstatic.com/webp/gallery/2.webp",
+      type: "image/webp",
+    },
+  ],
+  body: "<p>Card body</p>",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const WithoutImage = Template.bind({});
+WithoutImage.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
+  body: "<p>Card body</p>",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 const GridTemplate = ({
-  heading,
+  title,
+  supertitle,
+  headingLevel,
+  headingSize,
   href,
-  image,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageSources,
   label,
   body,
   text,
@@ -238,9 +275,16 @@ const GridTemplate = ({
         `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-m">
           ${Card({
             params: {
-              heading,
+              title,
+              supertitle,
+              headingLevel,
+              headingSize,
               href,
-              image,
+              imageSrc,
+              imageAlt,
+              imageWidth,
+              imageHeight,
+              imageSources,
               label,
               body,
               text,
@@ -258,28 +302,18 @@ const GridTemplate = ({
 
 export const Grid = GridTemplate.bind({});
 Grid.args = {
-  heading: {
-    supertitle: "Card supertitle",
-    title: "Card title",
-    level: 3,
-    size: "m",
-  },
+  supertitle: "Card supertitle",
+  title: "Card title",
+  headingLevel: 3,
+  headingSize: "m",
   href: "#",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 1996,
-    height: 1331,
-  },
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 1996,
+  imageHeight: 1331,
   label: "New",
   body: "<p>Card body</p>",
-  // actions: [
-  //   {
-  //     text: "Card action",
-  //     href: "#",
-  //     title: "Go and do the action",
-  //   },
-  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };
diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
index 9e7401d5..1b5d6928 100644
--- a/src/nationalarchives/components/card/fixtures.json
+++ b/src/nationalarchives/components/card/fixtures.json
@@ -10,7 +10,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup tna-hgroup--m tna-card__heading\"><h3 class=\"tna-hgroup__titletna-card__title\"><span class=\"tna-hgroup__supertitle tna-card__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -36,7 +36,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -48,7 +48,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -61,7 +61,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -73,7 +73,7 @@
         },
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -91,7 +91,31 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
+    },
+    {
+      "name": "with image and alternative sources",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "image": {
+          "src": "https://loremflickr.com/640/360",
+          "alt": "A placeholder image",
+          "width": 640,
+          "height": 360,
+          "sources": [
+            {
+              "src": "https://www.gstatic.com/webp/gallery/2.webp",
+              "type": "image/webp"
+            }
+          ]
+        },
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -110,7 +134,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -129,7 +153,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {
@@ -142,7 +166,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -155,7 +179,7 @@
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -168,7 +192,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -181,7 +205,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -194,7 +218,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -209,7 +233,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]
diff --git a/src/nationalarchives/components/card/macro-options.json b/src/nationalarchives/components/card/macro-options.json
index 7f64f2e1..43ef829c 100644
--- a/src/nationalarchives/components/card/macro-options.json
+++ b/src/nationalarchives/components/card/macro-options.json
@@ -1,47 +1,64 @@
 [
   {
-    "name": "heading",
-    "type": "object",
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": "The smaller title to display above the main card title."
+  },
+  {
+    "name": "title",
+    "type": "string",
     "required": true,
-    "description": "",
-    "params": [
-      {
-        "name": "supertitle",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
-      {
-        "name": "title",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "level",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "size",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
+    "description": "The main title of the card."
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
+  },
+  {
+    "name": "headingSize",
+    "type": "string",
+    "required": false,
+    "default": "m",
+    "description": "The physical size of the card title."
   },
   {
     "name": "href",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A URL to use as a link in the card's heading and image (if one is declared)."
   },
   {
-    "name": "image",
-    "type": "object",
+    "name": "imageSrc",
+    "type": "string",
+    "required": false,
+    "description": "A JPG file to use as the card's image."
+  },
+  {
+    "name": "imageAlt",
+    "type": "string",
+    "required": false,
+    "description": "Alternative text for the image in the event that it can't be displayed."
+  },
+  {
+    "name": "imageWidth",
+    "type": "number",
+    "required": false,
+    "description": "The width of the image in pixels."
+  },
+  {
+    "name": "imageHeight",
+    "type": "number",
     "required": false,
-    "description": "",
+    "description": "The height of the image in pixels."
+  },
+  {
+    "name": "imageSources",
+    "type": "array",
+    "required": true,
+    "description": "Alternative sources of the image which can include WebP files.",
     "params": [
       {
         "name": "src",
@@ -50,21 +67,27 @@
         "description": ""
       },
       {
-        "name": "alt",
+        "name": "type",
         "type": "string",
         "required": true,
         "description": ""
       },
+      {
+        "name": "media",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "width",
         "type": "number",
-        "required": true,
+        "required": false,
         "description": ""
       },
       {
         "name": "height",
         "type": "number",
-        "required": true,
+        "required": false,
         "description": ""
       }
     ]
@@ -73,25 +96,25 @@
     "name": "label",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A label which will appear over the top left of the card's image. If there is no imagem, the label is not displayed."
   },
   {
     "name": "body",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The HTML for the main body of the card. Not displayed if `text` is set."
   },
   {
     "name": "text",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The text for the card which will be inserted into a `<p>` element. Overwrites `body` if it is set."
   },
   {
     "name": "actions",
     "type": "array",
     "required": false,
-    "description": "",
+    "description": "An array of actions to add at the bottom of the card. Each action is displayed as a button.",
     "params": [
       {
         "name": "text",
@@ -129,13 +152,13 @@
     "name": "horizontal",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "Change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
   },
   {
     "name": "style",
     "type": "text",
     "required": false,
-    "description": ""
+    "description": "The style of card to use which can be either `boxed` for an inverted card or `accent` for a card that matches the page's accent colour."
   },
   {
     "name": "htmlElement",
diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
index 4a765218..05c07236 100644
--- a/src/nationalarchives/components/card/template.njk
+++ b/src/nationalarchives/components/card/template.njk
@@ -10,33 +10,41 @@
 {%- endif -%}
 <{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
-    {%- if params.heading.supertitle -%}
-    <hgroup class="tna-hgroup tna-hgroup--{{ params.heading.size or 'm' }} tna-card__heading">
-      <h{{ params.heading.level }} class="tna-hgroup__titletna-card__title">
-        <span class="tna-hgroup__supertitle tna-card__supertitle">{{ params.heading.supertitle }}</span>
+    {%- if params.supertitle -%}
+    <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 'm' }} tna-card__heading">
+      <h{{ params.headingLevel }} class="tna-hgroup__title">
+        <span class="tna-hgroup__supertitle">{{ params.supertitle }}</span>
         {%- if params.href -%}
-        <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+        <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
         {%- else -%}
-        {{ params.heading.title }}
+        {{ params.title }}
         {%- endif -%}
-      </h{{ params.heading.level }}>
+      </h{{ params.headingLevel }}>
     </hgroup>
     {%- else -%}
-    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ params.heading.size or 'm' }}">
+    <h{{ params.headingLevel }} class=" tna-heading tna-heading--{{ params.headingSize or 'm' }} tna-card__heading">
       {%- if params.href -%}
-      <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+      <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
       {%- else -%}
-      {{ params.heading.title }}
+      {{ params.title }}
       {%- endif -%}
-    </h{{ params.heading.level }}>
+    </h{{ params.headingLevel }}>
     {%- endif -%}
-    {%- if params.image -%}
+    {%- if params.imageSrc -%}
       {%- if params.href -%}
       <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
       {%- else -%}
       <div class="tna-card__image-container">
       {%- endif -%}
-        <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
+        <picture class="tna-card__image">
+          {%- if params.imageSources -%}
+          {%- for source in params.imageSources -%}
+          <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
+          {%- endfor -%}
+          <source srcset="{{ params.imageSrc }}" type="image/jpeg" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+          {%- endif -%}
+          <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+        </picture>
         {%- if params.label -%}
         <div class="tna-chip tna-card__image-label">
           {{ params.label }}
diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
index 9c460f7d..d99f4a5f 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -36,12 +36,10 @@ export default {
 
 const Template = ({ theme, accent }) => {
   const cardDefaultOptions = {
-    heading: {
-      supertitle: "Card supertitle",
-      title: "Card title",
-      level: 3,
-      size: "m",
-    },
+    supertitle: "Card supertitle",
+    title: "Card title",
+    headingLevel: 3,
+    headingSize: "m",
     href: "#",
     image: {
       src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
diff --git a/src/nationalarchives/utilities/_global.scss b/src/nationalarchives/utilities/_global.scss
index 76257149..963dda23 100644
--- a/src/nationalarchives/utilities/_global.scss
+++ b/src/nationalarchives/utilities/_global.scss
@@ -116,6 +116,7 @@
 
 img,
 svg,
+picture,
 video,
 canvas {
   max-width: 100%;