diff --git a/CHANGELOG.md b/CHANGELOG.md
index 755f0321..38f05999 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -33,6 +33,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `typography.$base-font-size-px` is now `typography.$relative-1rem-px`
 - `xl` and `l` headings are Supria Sans and `m` and `s` are Open Sans
 - Card heading size defaults to `s`
+- Markup and styles altered for hero component
 
 ### Deprecated
 ### Removed
diff --git a/src/nationalarchives/components/hero/fixtures.json b/src/nationalarchives/components/hero/fixtures.json
index 30209b29..045c7910 100644
--- a/src/nationalarchives/components/hero/fixtures.json
+++ b/src/nationalarchives/components/hero/fixtures.json
@@ -5,14 +5,93 @@
       "name": "minimal",
       "options": {
         "heading": "Title",
-        "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": 499,
+        "imageHeight": 333
+      },
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "hidden": false
+    },
+    {
+      "name": "with body",
+      "options": {
+        "heading": "Title",
+        "body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333
+      },
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
+      "hidden": false
+    },
+    {
+      "name": "with text",
+      "options": {
+        "heading": "Title",
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333
+      },
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div></div></div></figure></header>",
+      "hidden": false
+    },
+    {
+      "name": "with caption",
+      "options": {
+        "heading": "Title",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023"
+      },
+      "html": "<header class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "hidden": false
+    },
+    {
+      "name": "image only",
+      "options": {
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023"
+      },
+      "html": "<div class=\"tna-hero \"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"></figure></div>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "heading": "Title",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023",
+        "classes": "hero__test-class"
+      },
+      "html": "<header class=\"tna-hero hero__test-class\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "heading": "Title",
+        "imageSrc": "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+        "imageAlt": "The National Archives office",
+        "imageWidth": 499,
+        "imageHeight": 333,
+        "imageCaption": "An interesting photo by a famous photographer ©2023",
+        "attributes": {
+          "data-testattribute": "foobar"
         }
       },
-      "html": "<header class=\"tna-hero \"><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"1996\" height=\"1331\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></header>",
+      "html": "<header class=\"tna-hero \" data-testattribute=\"foobar\"><figure class=\"tna-hero__figure\"><figcaption class=\"tna-hero__caption\"><details class=\"tna-hero__details\"><summary class=\"tna-hero__details-summary\"><span class=\"tna-hero__details-summary-icon\">I</span>nformation about this image</summary><div class=\"tna-hero__information\"><p>An interesting photo by a famous photographer ©2023</p></div></details></figcaption><img src=\"https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg\" alt=\"The National Archives office\" class=\"tna-hero__image\" width=\"499\" height=\"333\"><div class=\"tna-container tna-hero__inner\"><div class=\"tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content\"><div class=\"tna-hero__content-inner\"><h1 class=\"tna-heading tna-heading--xl tna-hero__heading\">Title</h1></div></div></div></figure></header>",
       "hidden": false
     }
   ]
diff --git a/src/nationalarchives/components/hero/hero.scss b/src/nationalarchives/components/hero/hero.scss
index 2fb84b44..391a03fe 100644
--- a/src/nationalarchives/components/hero/hero.scss
+++ b/src/nationalarchives/components/hero/hero.scss
@@ -1,85 +1,139 @@
 @use "../../tools/colour";
 @use "../../tools/media";
+@use "../../tools/typography";
 @use "../../utilities";
 @use "../grid";
 
 .tna-hero {
-  min-height: min(35vw, 480px);
-  // margin-bottom: 2rem;
-  padding-top: 5rem;
-  padding-bottom: 3rem;
+  @include colour.invert-on-mobile;
 
-  display: flex;
-  align-items: flex-end;
+  &__figure {
+    min-height: min(35vw, 480px);
+    margin: 0;
+    padding-top: 8rem;
+    padding-bottom: 4rem;
 
-  position: relative;
+    display: flex;
+    align-items: flex-end;
 
-  @include colour.invert-on-mobile;
+    position: relative;
+  }
 
-  &__image {
+  &__caption {
     width: 100%;
-    height: 100%;
 
     position: absolute;
-    inset: 0;
-    z-index: 1;
+    right: 0;
+    bottom: 0;
+    z-index: 3;
 
-    object-fit: cover;
+    overflow: visible;
   }
 
-  picture#{&}__image img {
+  &__details {
     width: 100%;
-    height: 100%;
 
-    object-fit: cover;
+    overflow: visible;
   }
 
-  &__image-details {
-    position: absolute;
-    right: 1.25rem;
-    bottom: 1.25rem;
-    z-index: 3;
-
-    @include colour.colour-font("font-base");
-  }
+  &__details-summary {
+    width: 1.5rem;
+    height: 1.5rem;
 
-  &__image-details-summary {
-    width: 2rem;
-    height: 2rem;
-
-    position: relative;
+    position: absolute;
+    right: 0.5rem;
+    bottom: 0.5rem;
     z-index: 2;
 
     font-size: 0;
     text-align: center;
-    line-height: 2rem;
+    line-height: 1.5rem;
     list-style: none;
 
-    background-color: #fc0;
+    @include colour.accent;
 
-    border-radius: 1rem;
+    @include colour.colour-border("background", 0.25rem);
+    border-radius: 100%;
 
     cursor: pointer;
+
+    &:hover {
+      @include colour.colour-font("background");
+
+      @include colour.colour-background("font-base");
+    }
   }
 
-  &__image-details-summary-icon {
+  &__details-summary-icon {
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 700;
     text-transform: lowercase;
   }
 
-  &__image-information {
-    width: 20rem;
-    max-width: 45vw;
-    padding: 0.5rem 1rem;
+  &__information {
+    width: 50rem;
+    max-width: 50vw;
+    padding: 0.5rem 3.25rem 0.5rem 1rem;
 
     position: absolute;
     right: 0;
-    bottom: 2.5rem;
+    bottom: 0;
     z-index: 1;
 
-    background-color: #fc0;
+    @include colour.invert;
+
+    // @include typography.relative-font-size(16);
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    object-fit: cover;
+  }
+
+  &__details[open] &__details-summary {
+    @include colour.invert;
+
+    &::before,
+    &::after {
+      width: 1.5rem;
+      height: 0.125rem;
+
+      display: block;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      @include colour.colour-background("font-dark");
+
+      content: "";
+    }
+
+    &::before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    &::after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    &:hover {
+      &::before,
+      &::after {
+        height: 0.25rem;
+      }
+    }
+
+    &-icon {
+      font-size: 0;
+    }
   }
 
   &__inner {
@@ -91,47 +145,56 @@
   }
 
   &__content-inner {
-    padding: 2.5rem 1.5rem;
+    padding: 1.5rem;
 
     @include colour.colour-background("page-background");
   }
 
   &__heading {
-    margin-bottom: 0;
+    // margin-bottom: 0;
   }
 
-  &__body {
-    margin-top: 1.5rem;
-  }
+  // &__body {
+  //   margin-top: 1.5rem;
+  // }
 
   @include media.on-mobile {
-    padding: 0;
+    &__figure {
+      padding: 0;
 
-    display: block;
+      // display: block;
+      flex-direction: column;
+    }
 
-    &__image {
-      height: 320px;
+    &__caption {
+      position: relative;
+      order: 2;
+    }
 
-      position: static;
+    &__details {
     }
 
-    &__image-details {
-      bottom: auto;
-      top: 1.25rem;
+    &__details-summary {
     }
 
-    &__image-details-summary {
+    &__details-summary-icon {
     }
 
-    &__image-details-summary-icon {
+    &__information {
+      width: auto;
+      max-width: none;
+
+      left: 0;
     }
 
-    &__image-information {
-      top: 2.5rem;
-      bottom: auto;
+    &__image {
+      position: static;
+
+      order: 1;
     }
 
     &__inner {
+      order: 3;
     }
 
     &__content {
@@ -151,13 +214,8 @@
     }
   }
 
-  @include media.on-tiny {
-    &__image {
-      height: 240px;
-    }
-  }
-
   @include colour.on-high-contrast {
+    &__information,
     &__content-inner {
       @include colour.colour-border("keyline-dark", 1px);
 
diff --git a/src/nationalarchives/components/hero/hero.stories.js b/src/nationalarchives/components/hero/hero.stories.js
index cddf62d4..d165c587 100644
--- a/src/nationalarchives/components/hero/hero.stories.js
+++ b/src/nationalarchives/components/hero/hero.stories.js
@@ -2,12 +2,20 @@ import Hero from "./template.njk";
 import macroOptions from "./macro-options.json";
 import { expect } from "@storybook/jest";
 import { within, userEvent } from "@storybook/testing-library";
+import { customViewports } from "../../../../.storybook/viewports";
 
 const argTypes = {
   heading: { control: "text" },
   body: { control: "text" },
   text: { 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 } },
+
+  imageCaption: { control: "text" },
+
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -23,13 +31,28 @@ export default {
   argTypes,
 };
 
-const Template = ({ heading, body, text, image, classes, attributes }) =>
+const Template = ({
+  heading,
+  body,
+  text,
+  imageSrc,
+  imageAlt,
+  imageWidth,
+  imageHeight,
+  imageCaption,
+  classes,
+  attributes,
+}) =>
   Hero({
     params: {
       heading,
       body,
       text,
-      image,
+      imageSrc,
+      imageAlt,
+      imageWidth,
+      imageHeight,
+      imageCaption,
       classes,
       attributes,
     },
@@ -38,14 +61,13 @@ const Template = ({ heading, body, text, image, classes, attributes }) =>
 export const Standard = Template.bind({});
 Standard.args = {
   heading: "Title",
-  body: "<p>Body</p>",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 499,
-    height: 333,
-    information: "An interesting photo by a famous photographer ©2023",
-  },
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
   classes: "tna-hero--demo",
 };
 
@@ -53,12 +75,10 @@ Standard.play = async ({ args, canvasElement, step }) => {
   await new Promise((r) => setTimeout(r, 100));
 
   const canvas = within(canvasElement);
-  const image = canvas.getByAltText(args.image.alt);
+  const image = canvas.getByAltText(args.imageAlt);
   const title = canvas.getByText(args.heading);
-  const summary = canvasElement.querySelector(
-    ".tna-hero__image-details-summary",
-  );
-  const information = canvas.getByText(args.image.information);
+  const summary = canvasElement.querySelector(".tna-hero__details-summary");
+  const information = canvas.getByText(args.imageCaption);
 
   await step("Initial load", async () => {
     await expect(image).toBeVisible();
@@ -78,14 +98,45 @@ Standard.play = async ({ args, canvasElement, step }) => {
   });
 };
 
-export const TitleOnly = Template.bind({});
-TitleOnly.args = {
+export const HeadingOnly = Template.bind({});
+HeadingOnly.args = {
   heading: "Title",
-  image: {
-    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-    alt: "The National Archives office",
-    width: 499,
-    height: 333,
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  classes: "tna-hero--demo",
+};
+
+export const CaptionWithNoHeading = Template.bind({});
+CaptionWithNoHeading.args = {
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
+  classes: "tna-hero--demo",
+};
+
+export const Mobile = Template.bind({});
+Mobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
   },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+Mobile.args = {
+  heading: "Title",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  imageCaption: "An interesting photo by a famous photographer ©2023",
   classes: "tna-hero--demo",
 };
diff --git a/src/nationalarchives/components/hero/macro-options.json b/src/nationalarchives/components/hero/macro-options.json
index dde777be..5820bf9c 100644
--- a/src/nationalarchives/components/hero/macro-options.json
+++ b/src/nationalarchives/components/hero/macro-options.json
@@ -2,7 +2,7 @@
   {
     "name": "heading",
     "type": "string",
-    "required": true,
+    "required": false,
     "description": ""
   },
   {
@@ -18,42 +18,34 @@
     "description": ""
   },
   {
-    "name": "image",
-    "type": "object",
+    "name": "imageSrc",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageAlt",
+    "type": "string",
     "required": true,
-    "description": "",
-    "params": [
-      {
-        "name": "src",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "alt",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "width",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "height",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "information",
-        "type": "string",
-        "required": false,
-        "description": ""
-      }
-    ]
+    "description": ""
+  },
+  {
+    "name": "imageWidth",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageHeight",
+    "type": "number",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "imageCaption",
+    "type": "string",
+    "required": false,
+    "description": ""
   },
   {
     "name": "classes",
diff --git a/src/nationalarchives/components/hero/template.njk b/src/nationalarchives/components/hero/template.njk
index 21d7b12a..bd8367cc 100644
--- a/src/nationalarchives/components/hero/template.njk
+++ b/src/nationalarchives/components/hero/template.njk
@@ -1,34 +1,36 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<header class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-hero__image" width="{{ params.image.width }}" height="{{ params.image.height }}">
-  {%- if params.image.information -%}
-  <details class="tna-hero__image-details">
-    <summary class="tna-hero__image-details-summary">
-      <span class="tna-hero__image-details-summary-icon">I</span>nformation about this image
-    </summary>
-    <div class="tna-hero__image-information">
-      <p>{{ params.image.information }}</p>
-    </div>
-  </details>
-  {%- endif -%}
-  <div class="tna-container tna-hero__inner">
-    <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
-      <div class="tna-hero__content-inner">
+<{{ 'header' if params.heading else 'div' }} class="tna-hero {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <figure class="tna-hero__figure">
+    {%- if params.imageCaption -%}
+    <figcaption class="tna-hero__caption">
+      <details class="tna-hero__details">
+        <summary class="tna-hero__details-summary">
+          <span class="tna-hero__details-summary-icon">I</span>nformation about this image
+        </summary>
+        <div class="tna-hero__information">
+          <p>{{ params.imageCaption }}</p>
+        </div>
+      </details>
+    </figcaption>
+    {%- endif -%}
+    <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" class="tna-hero__image" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+    {%- if params.heading -%}
+    <div class="tna-container tna-hero__inner">
+      <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-hero__content">
+        <div class="tna-hero__content-inner">
         {%- if params.heading -%}
-        <h1 class="tna-heading tna-heading--xl tna-hero__heading">
-          {{ params.heading }}
-        </h1>
+          <h1 class="tna-heading tna-heading--xl tna-hero__heading">
+            {{ params.heading }}
+          </h1>
         {%- endif -%}
         {%- if params.text -%}
-        <div class="tna-hero__body">
           <p>{{ params.text }}</p>
-        </div>
         {%- elseif params.body -%}
-        <div class="tna-hero__body">
           {{ params.body | safe }}
-        </div>
         {%- endif -%}
+        </div>
       </div>
     </div>
-  </div>
-</header>
+    {%- endif -%}
+  </figure>
+</{{ 'header' if params.heading else 'div' }}>
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 40e7f8a3..64b0563b 100644
--- a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
+++ b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -87,11 +87,13 @@ const Template = ({ theme, accent }) => {
       : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
+    <!--
     ${CookieBanner({
       params: {
         cookiesUrl: "#",
       },
     })}
+    -->
     ${SkipLink({
       params: {
         href: "main-content",
@@ -158,13 +160,12 @@ const Template = ({ theme, accent }) => {
         params: {
           heading: "Title",
           body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>",
-          image: {
-            src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-            alt: "The National Archives office",
-            width: 499,
-            height: 333,
-            information: "An interesting photo by a famous photographer ©2023",
-          },
+          imageSrc:
+            "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+          imageAlt: "The National Archives office",
+          imageWidth: 499,
+          imageHeight: 333,
+          imageCaption: "An interesting photo by a famous photographer ©2023",
           classes: "tna-hero--demo",
         },
       })}
@@ -394,7 +395,17 @@ const Template = ({ theme, accent }) => {
           <p class="tna-!--no-margin-bottom tna-!--padding-top-xl">Lorem ipsum</p>
         </div>
       </div>
-      <hr>
+      ${Hero({
+        params: {
+          imageSrc:
+            "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+          imageAlt: "The National Archives office",
+          imageWidth: 499,
+          imageHeight: 333,
+          imageCaption: "An interesting photo by a famous photographer ©2023",
+          classes: "tna-hero--demo",
+        },
+      })}
       <div class="tna-container tna-section tna-!--padding-bottom-s">
         <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny">
           ${Card({
@@ -968,7 +979,7 @@ const Template = ({ theme, accent }) => {
             ],
           },
           {
-            title: "Our websites help",
+            title: "Our websites",
             items: [
               {
                 text: "UK Government Web Archive",