diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index 4d932679..1f5950c3 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -18,7 +18,7 @@
     /**
      * Update time as a datetime string.
      */
-    updateTime: string;
+    updateTime?: string;
     /**
      * Alignment of the byline.
      */
@@ -128,7 +128,7 @@
         <div class="whitespace-nowrap inline-block">
           Published
           <time datetime={publishTime}>
-            {#if isValidDate(updateTime)}
+            {#if updateTime && isValidDate(updateTime)}
               {apdate(new Date(publishTime))}
             {:else}
               {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index dd2f3e58..378f085a 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -39,7 +39,7 @@ Optionally, you can add authors and a publish time to the headline, which the `H
   section={'Global news'}
   authors={['Jane Doe']}
   publishTime={new Date('2020-01-01').toISOString()}
-    getAuthorPage={(author: string) => {
+  getAuthorPage={(author: string) => {
       return `mailto:${author.replace(' ', '')}@example.com`;
     }}
 />
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 07e77005..1858db98 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -12,7 +12,6 @@
   interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
     hed: string | Snippet;
-
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
deleted file mode 100644
index 1e0af245..00000000
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ /dev/null
@@ -1,356 +0,0 @@
-<!-- @migration-task Error while migrating Svelte code: end is out of bounds -->
-<script context="module" lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
-  // @ts-ignore raw
-  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
-  // @ts-ignore raw
-  import inlinePhotoDocs from './stories/docs/inlinePhoto.md?raw';
-  // @ts-ignore raw
-  import transparentHeaderDocs from './stories/docs/transparentHeader.md?raw';
-  // @ts-ignore raw
-  import videoDocs from './stories/docs/backgroundVideo.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
-
-  import HeroHeadline from './Hero.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
-    title: 'Components/Text elements/HeroHeadline',
-    component: HeroHeadline,
-    ...withComponentDocs(componentDocs),
-    argTypes: {
-      hedSize: {
-        control: 'select',
-        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
-      },
-      hedWidth: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-      hedAlign: {
-        control: 'select',
-        options: ['left', 'center', 'right'],
-      },
-      width: {
-        control: 'select',
-        options: ['normal', 'wide', 'wider', 'widest'],
-      },
-    },
-  };
-</script>
-
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore img
-  import polarImgSrc from './stories/polar.jpg';
-  // @ts-ignore img
-  import eurovisImgSrc from './stories/eurovis.jpeg';
-
-  import Block from '../Block/Block.svelte';
-  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
-  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
-  import Video from '../Video/Video.svelte';
-
-  import CrashMap from './stories/graphics/crash.svelte';
-  import QuakeMap from './stories/graphics/quakemap.svelte';
-</script>
-
-<Template let:args>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline {...args} />
-</Template>
-
-<Story
-  name="With backdrop photo"
-  args={{
-    section: 'World News',
-    hed: 'Reuters Graphics Interactive',
-    dek: 'The beginning of a beautiful page',
-    authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
-    publishTime: new Date('2022-03-04').toISOString(),
-    img: polarImgSrc,
-  }}
-/>
-
-<Story name="With transparent header" {...withStoryDocs(transparentHeaderDocs)}>
-  <div class="transparent-header">
-    <Block width="fluid" class="chromatic-ignore">
-      <SiteHeader />
-    </Block>
-
-    <HeroHeadline
-      section="World News"
-      hed="Reuters Graphics Interactive"
-      dek="The beginning of a beautiful page"
-      authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
-      publishTime={new Date('2022-03-04').toISOString()}
-      img={polarImgSrc}
-    />
-  </div>
-</Story>
-
-<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'Earthquake devastates Afghanistan'}
-    hedSize={'big'}
-    hedWidth="wide"
-    class="custom-hero mb-0"
-    dek=""
-    authors={[
-      'Anand Katakam',
-      'Vijdan Mohammad Kawoosa',
-      'Adolfo Arranz',
-      'Wen Foo',
-      'Simon Scarr',
-      'Aman Bhargava',
-      'Jitesh Chowdhury',
-      'Manas Sharma',
-      'Aditi Bhandari',
-    ]}
-    publishTime={new Date('2022-06-24').toISOString()}
-  >
-    <div slot="background">
-      <GraphicBlock
-        width="widest"
-        role="figure"
-        class="my-0"
-        textWidth="normal"
-        notes=""
-        ariaDescription="Earthquake impact map"
-      >
-        <svelte:component this={QuakeMap} />
-      </GraphicBlock>
-    </div>
-  </HeroHeadline>
-  <style lang="scss">
-    .hero-wrapper {
-      .custom-hero.headline {
-        // Adjust vertical positioning
-        align-items: flex-end !important;
-
-        @media (max-width: 1100px) {
-          // Adjust line length of title
-          max-width: var(--normal-column-width) !important;
-        }
-      }
-
-      // Make hero smaller than 100vh
-      --heroHeight: 85svh;
-
-      @media (max-width: 960px) {
-        --heroHeight: 65svh;
-      }
-
-      // For small height
-      @media (max-height: 850px) {
-        --heroHeight: 100svh;
-      }
-
-      // Custom hero sizing for landscape mobile
-      @media (max-width: 960px) and (orientation: landscape) {
-        --heroHeight: 200svh;
-      }
-    }
-
-    // Override default fixed height for hero layout in embeds
-    .hero-wrapper.embedded {
-      --heroHeight: 1000px;
-    }
-  </style>
-</Story>
-
-<Story name="With backdrop video" {...withStoryDocs(videoDocs)}>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    class="video-hero"
-    hed="The conflict in Ethiopia"
-    hedSize="bigger"
-    hedWidth="wide"
-    authors={['Aditi Bhandari ', 'David Lewis']}
-    publishTime={new Date('2020-12-18').toISOString()}
-  >
-    <div slot="background">
-      <Video
-        width="widest"
-        class="my-0"
-        showControls={false}
-        preloadVideo="auto"
-        playVideoWhenInView={false}
-        src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
-        poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
-        notes="Drone footage from the Village 8 refugee camp in Sudan."
-        ariaDescription="Aerial footage of people houses in refugee camp"
-      />
-    </div>
-  </HeroHeadline>
-  <style lang="scss">
-    .hero-wrapper {
-      --heroHeight: calc(100svh - 60px);
-      .video-hero.headline {
-        header {
-          // Adjust vertical position as offset from default center
-          top: calc(50svh - 250px);
-        }
-
-        h1 {
-          color: #ffd430;
-          text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-        }
-      }
-    }
-  </style>
-</Story>
-
-<Story name="With inline photo" {...withStoryDocs(inlinePhotoDocs)}>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'Buried under the bricks'}
-    hedWidth="wide"
-    class="mb-0"
-    dek={'How mud-brick housing made the Morocco earthquake so deadly'}
-    section={'Global news'}
-    authors={['Mariano Zafra']}
-    publishTime={new Date('2020-01-01').toISOString()}
-  >
-    <div slot="inline">
-      <FeaturePhoto
-        width="widest"
-        class="my-0"
-        src="https://www.reuters.com/graphics/MOROCCO-QUAKE/CONSTRUCTION/xmpjlblojpr/cdn/images/opening.jpg"
-        caption="Photo by REUTERS/Nacho Doce."
-        altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
-      />
-    </div>
-  </HeroHeadline>
-</Story>
-
-<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'The plunge from 29,000 feet'}
-    hedWidth="wide"
-    class="mb-0"
-    dek={'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}
-    section={'Global news'}
-    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
-    publishTime={new Date('2020-01-01').toISOString()}
-  >
-    <div slot="inline">
-      <GraphicBlock
-        width="widest"
-        role="img"
-        class="my-0"
-        textWidth="normal"
-        notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-        ariaDescription="Aerial map showing trajectory of crash"
-      >
-        <svelte:component this={CrashMap} />
-      </GraphicBlock>
-    </div>
-  </HeroHeadline>
-</Story>
-
-<Story name="With inline video" {...withStoryDocs(inlinePhotoDocs)}>
-  <Block width="fluid" class="chromatic-ignore">
-    <SiteHeader />
-  </Block>
-
-  <HeroHeadline
-    hed={'Devastation in Derna'}
-    hedWidth="wide"
-    class="mb-0"
-    dek={'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}
-    section={'Global news'}
-    authors={['Simon Scarr']}
-    publishTime={new Date('2020-01-01').toISOString()}
-  >
-    <div slot="inline">
-      <Video
-        width="widest"
-        class="my-0"
-        showControls={false}
-        preloadVideo="auto"
-        playVideoWhenInView={false}
-        src="https://www.reuters.com/graphics/LIBYA-STORM/EXPLAINER/klvyzqebzpg/cdn/video/drone.mp4"
-        notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
-        ariaDescription="alttext fot video"
-      />
-    </div>
-  </HeroHeadline>
-</Story>
-
-<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
-  <HeroHeadline
-    class="custom-hed"
-    authors={[
-      'Prasanta Kumar Dutta',
-      'Dea Bankova',
-      'Aditi Bhandari',
-      'Anurag Rao',
-    ]}
-    publishTime={new Date('2023-05-11').toISOString()}
-    img={eurovisImgSrc}
-  >
-    <h1 slot="hed">
-      <div class="body-note">A visual guide to</div>
-      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-    </h1>
-  </HeroHeadline>
-
-  <style lang="scss">
-    .custom-hed {
-      h1 {
-        .body-note {
-          color: #ffffff;
-        }
-        .title {
-          color: #ffffff;
-          text-shadow: 1px 1px 8px #ff7c88;
-          filter: drop-shadow(0px 0px 12px #ff7c88);
-        }
-      }
-    }
-  </style>
-</Story>
-
-<style lang="scss">
-  .transparent-header {
-    :global(.nav-container) {
-      background-color: transparent !important;
-    }
-    :global(.nav-container .inner) {
-      background-color: transparent !important;
-      border: none;
-    }
-
-    :global(.hero-wrapper) {
-      margin-top: -64px;
-    }
-  }
-</style>
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
deleted file mode 100644
index 731493f9..00000000
--- a/src/components/HeroHeadline/Hero.svelte
+++ /dev/null
@@ -1,258 +0,0 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
-<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
-<script lang="ts">
-  import type { HeadlineSize } from '../@types/global';
-
-  /** Set to true for embeddables. */
-  export let embedded: boolean = false;
-
-  /**
-   * Path to background image
-   * @type {string}
-   */
-  export let img: string | null = null;
-
-  /**
-   * ARIA description, passed in as a markdown string.
-   * @type {string}
-   */
-  export let ariaDescription: string | null = null;
-
-  /**
-   * Notes to the graphic, passed in as a markdown string.
-   * @type {string}
-   */
-  export let notes: string | null = null;
-
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-
-  /** Add extra classes to the block tag to target it with custom CSS. */
-  let cls: string = '';
-  export { cls as class };
-
-  /**
-   * Headline size
-   * @type {string}
-   */
-  export let hedSize: HeadlineSize = 'normal';
-
-  /**
-   * Headline horizontal alignment
-   * @type {string}
-   */
-  export let hedAlign: 'left' | 'center' | 'right' = 'center';
-
-  /**
-   * Width of the headline.
-   */
-  export let hedWidth: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
-
-  /**
-   * Dek, parsed as a markdown string.
-   * @type {string}
-   */
-  export let dek: string | null = null;
-  /**
-   * Section title
-   * @type {string}
-   */
-  export let section: string | null = null;
-  /**
-   * Array of author names, which will be slugified to create links to Reuters author pages
-   */
-  export let authors: string[] = [];
-  /**
-   * Publish time as a datetime string.
-   * @type {string}
-   */
-  export let publishTime: string = '';
-  /**
-   * Update time as a datetime string.
-   * @type {string}
-   */
-  export let updateTime: string = '';
-
-  /**
-   * Width of the Hero graphic.
-   */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'widest';
-
-  import Headline from '../Headline/Headline.svelte';
-  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
-  import Block from '../Block/Block.svelte';
-  import Byline from '../Byline/Byline.svelte';
-  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
-</script>
-
-<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
-  <div class="hero-wrapper fmb-6" class:embedded>
-    <!-- Background media hero-->
-    {#if $$slots.background || img}
-      <Block width="fluid" class="hero-headline background-hero fmt-0">
-        {#if $$slots.hed}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width={hedWidth}
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          >
-            <!-- Headline named slot -->
-            <div slot="hed">
-              <slot name="hed" />
-            </div>
-          </Headline>
-        {:else}
-          <Headline
-            class="{cls} !text-{hedAlign}"
-            width={hedWidth}
-            {section}
-            {hedSize}
-            {hed}
-            {dek}
-          />
-        {/if}
-
-        <div class="graphic-container">
-          {#if $$slots.background}
-            <!-- Hero graphic named slot -->
-            <slot name="background" />
-          {:else}
-            <GraphicBlock
-              {width}
-              role="img"
-              class="my-0"
-              textWidth="normal"
-              {notes}
-              {ariaDescription}
-            >
-              <div
-                class="background-image"
-                style="background-image: url({img})"
-              ></div>
-            </GraphicBlock>
-          {/if}
-        </div>
-      </Block>
-    {/if}
-
-    <!-- Inline hero -->
-    {#if $$slots.inline}
-      <Block width="fluid" class="hero-headline inline-hero">
-        <PaddingReset containerIsFluid={true}>
-          {#if $$slots.hed}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width={hedWidth}
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            >
-              <!-- Headline named slot -->
-              <div slot="hed">
-                <slot name="hed" />
-              </div>
-            </Headline>
-          {:else}
-            <Headline
-              class="{cls} !text-{hedAlign}"
-              width={hedWidth}
-              {section}
-              {hedSize}
-              {hed}
-              {dek}
-            />
-          {/if}
-        </PaddingReset>
-        <div class="graphic-container">
-          <!-- Hero named slot -->
-          <slot name="inline" />
-        </div>
-      </Block>
-    {/if}
-  </div>
-
-  <div class="hero-byline fmb-6">
-    {#if $$slots.byline}
-      <!-- Custom byline/dateline -->
-      <slot name="byline" />
-    {:else if authors.length > 0 || publishTime}
-      <Byline {authors} {publishTime} {updateTime} align="left" />
-    {/if}
-  </div>
-</div>
-
-<style lang="scss">
-  @use '../../scss/mixins' as mixins;
-
-  .hero-wrapper {
-    :global(.background-hero) {
-      min-height: var(--heroHeight, 100svh);
-      max-height: 1800px;
-      position: relative;
-    }
-
-    :global(.background-hero .headline) {
-      @include mixins.fmt-0;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      width: 100%;
-      top: 0;
-      left: 50%;
-      height: var(--heroHeight, 100svh);
-      max-height: 1800px;
-      transform: translateX(-50%);
-
-      @media (max-width: 690px) {
-        padding: 0 15px;
-      }
-    }
-
-    :global(aside p) {
-      @include mixins.body-caption;
-    }
-
-    :global(.background-hero video) {
-      position: relative;
-      display: block;
-      width: 100%;
-      height: var(--heroHeight);
-      object-fit: cover;
-    }
-
-    :global(.graphic-container .article-block.notes) {
-      @media (max-width: 690px) {
-        width: 100%;
-        padding: 0 15px;
-        margin-left: 0;
-      }
-    }
-  }
-
-  .hero-byline {
-    :global(.byline-container) {
-      z-index: 1;
-      position: relative;
-    }
-  }
-
-  .background-image {
-    width: auto;
-    height: var(--heroHeight, 100svh);
-    max-height: 1800px;
-    user-select: none;
-
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-  }
-</style>
diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
new file mode 100644
index 00000000..31cdc513
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -0,0 +1,329 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
+
+<Meta of={HeroHeadlineStories} />
+
+# HeroHeadline
+
+The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media.
+
+By default, the hero is in the background, i.e., the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e., before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
+
+## Photo hero
+
+To use a photo as the hero, simply pass the image source to the `img` prop.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the Graphics Kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  img={`${assets}/images/polar-bear.jpg`}
+  ariaDescription="A photo of a polar bear"
+  notes="Photo by REUTERS"
+  section={'World News'}
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  authors={['Jane Doe', 'John Doe']}
+/>
+```
+
+<Canvas of={HeroHeadlineStories.PhotoHero} />
+
+## Transparent site header
+
+In the graphics kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
+
+```scss
+// global.scss
+.nav-container {
+  background-color: transparent !important;
+}
+.nav-container .inner {
+  background-color: transparent !important;
+  border: none !important;
+}
+.hero-wrapper {
+  margin-top: -64px;
+}
+```
+
+<Canvas of={HeroHeadlineStories.TransparentHeader} />
+
+## Ai2svelte hero
+
+To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside `HeroHeadline`.
+
+To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the ai2svelte graphic.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+
+  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
+
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false; // 👈 If using in the Graphics Kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  hed="Earthquake devastates Afghanistan"
+  hedSize="big"
+  hedWidth="wide"
+  class="custom-hero mb-0"
+  authors={[
+    'Anand Katakam',
+    'Vijdan Mohammad Kawoosa',
+    'Adolfo Arranz',
+    'Wen Foo',
+    'Simon Scarr',
+    'Aman Bhargava',
+    'Jitesh Chowdhury',
+    'Manas Sharma',
+    'Aditi Bhandari',
+  ]}
+  publishTime={new Date('2022-06-24').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+  >
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <QuakeMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+// Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  .custom-hero.headline {
+    // Adjust vertical positioning
+    align-items: flex-end !important;
+
+    @media (max-width: 1100px) {
+      // Adjust line length of title
+      max-width: var(--normal-column-width) !important;
+    }
+  }
+
+  // Make hero shorter than 100vh
+  --heroHeight: 85svh;
+
+  @media (max-width: 960px) {
+    --heroHeight: 65svh;
+  }
+
+  // For small height
+  @media (max-height: 850px) {
+    --heroHeight: 100svh;
+  }
+
+  // Custom hero sizing for landscape mobile
+  @media (max-width: 960px) and (orientation: landscape) {
+    --heroHeight: 200svh;
+  }
+}
+
+// Override default fixed height for hero layout in embeds
+.hero-wrapper.embedded {
+  --heroHeight: 1000px;
+}
+```
+
+<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
+
+## Video hero
+
+To add a video as the hero, use the [Video](?path=/docs/components-multimedia-video--docs) component. To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the video.
+
+```svelte
+<script>
+  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false; // 👈 If using in the Graphics Kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  class="video-hero"
+  hed="The conflict in Ethiopia"
+  hedSize="bigger"
+  hedWidth="wide"
+  authors={['Aditi Bhandari ', 'David Lewis']}
+  publishTime={new Date('2020-12-18').toISOString()}
+>
+  <Video
+    width="widest"
+    class="my-0"
+    showControls={false}
+    preloadVideo="auto"
+    playVideoWhenInView={false}
+    src={`${assets}/videos/intro.mp4`}
+    poster={`${assets}/images/video-poster-intro.jpg`}
+    notes="Drone footage from the Village 8 refugee camp in Sudan."
+    ariaDescription="Aerial footage of people houses in refugee camp"
+  />
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+// Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  --heroHeight: calc(100svh - 60px);
+  .video-hero.headline {
+    header {
+      // Adjust vertical position as offset from default center
+      top: calc(50svh - 250px);
+    }
+
+    h1 {
+      color: #ffd430;
+      text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+    }
+  }
+}
+```
+
+<Canvas of={HeroHeadlineStories.VideoHero} />
+
+## Inline hero
+
+To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
+
+  export let embedded = false; // 👈 If using in the Graphics Kit...
+</script>
+
+<!-- Set `stacked` to `false` -->
+<HeroHeadline
+  {embedded}
+  stacked={false}
+  section="Global news"
+  hed="The plunge from 29,000 feet"
+  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+  class="mb-0"
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+  >
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <CrashMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+```
+
+<Canvas of={HeroHeadlineStories.InlineHero} />
+
+## Custom hed, dek and byline
+
+The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek, which lets you to customise the headline and dek by passing [snippets](https://svelte.dev/docs/svelte/snippet) into the `hed` and `dek` props.
+
+Since `Headline` internally uses the [Byline](?path=/docs/components-text-elements-headline--docs) component, you can also customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
+
+```svelte
+<!-- App.svelte -->
+<HeroHeadline
+  class="custom-hed"
+  authors={[
+    'Prasanta Kumar Dutta',
+    'Dea Bankova',
+    'Aditi Bhandari',
+    'Anurag Rao',
+  ]}
+  publishTime={new Date('2023-05-11').toISOString()}
+  img={eurovisImgSrc}
+  getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
+>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1>
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <div class="dek">
+      <p>
+        Performers from 37 countries are coming together May 9-13 in Liverpool,
+        England, for the 67th annual Eurovision Song Contest. The winner gets
+        the trophy and their country gets the right to host next year’s event,
+        produced by the European Broadcasting Union (EBU).
+      </p>
+    </div>
+  {/snippet}
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+.custom-hed {
+  h1 {
+    .body-note {
+      color: #ffffff;
+    }
+    .title {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+
+  .dek {
+    margin-top: 1rem;
+    p {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+}
+```
+
+<Canvas of={HeroHeadlineStories.CustomHed} />{' '}
diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
new file mode 100644
index 00000000..320f677f
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -0,0 +1,287 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import HeroHeadline from './HeroHeadline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/HeroHeadline',
+    component: HeroHeadline,
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      hedWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  });
+</script>
+
+<script lang="ts">
+  import polarImgSrc from './demo/polar.jpg';
+  import eurovisImgSrc from './demo/eurovis.jpeg';
+
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import Video from '../Video/Video.svelte';
+
+  import CrashMap from './demo/graphics/crash.svelte';
+  import QuakeMap from './demo/graphics/quakemap.svelte';
+</script>
+
+<Story name="Photo hero" exportName="PhotoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+  <HeroHeadline
+    section="World News"
+    hed="Reuters Graphics Interactive"
+    dek="The beginning of a beautiful page"
+    authors={['Jane Doe', 'John Doe']}
+    publishTime={new Date('2022-03-04').toISOString()}
+    img={polarImgSrc}
+    notes="Photo by REUTERS"
+    ariaDescription="A photo of a polar bear"
+  />
+</Story>
+
+<Story name="Transparent header" exportName="TransparentHeader">
+  <div class="transparent-header">
+    <Block width="fluid" class="chromatic-ignore">
+      <SiteHeader />
+    </Block>
+    <HeroHeadline
+      section="World News"
+      hed="Reuters Graphics Interactive"
+      dek="The beginning of a beautiful page"
+      authors={['Jane Doe', 'John Doe']}
+      publishTime={new Date('2022-03-04').toISOString()}
+      img={polarImgSrc}
+      ariaDescription="A photo of a polar bear"
+    />
+  </div>
+</Story>
+
+<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed={'Earthquake devastates Afghanistan'}
+    hedSize={'big'}
+    hedWidth="wide"
+    class="custom-hero mb-0"
+    authors={[
+      'Anand Katakam',
+      'Vijdan Mohammad Kawoosa',
+      'Adolfo Arranz',
+      'Wen Foo',
+      'Simon Scarr',
+      'Aman Bhargava',
+      'Jitesh Chowdhury',
+      'Manas Sharma',
+      'Aditi Bhandari',
+    ]}
+    publishTime={new Date('2022-06-24').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+    >
+      <QuakeMap />
+    </GraphicBlock>
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      .custom-hero.headline {
+        // Adjust vertical positioning
+        align-items: flex-end !important;
+
+        @media (max-width: 1100px) {
+          // Adjust line length of title
+          max-width: var(--normal-column-width) !important;
+        }
+      }
+
+      // Make hero shorter than 100vh
+      --heroHeight: 85svh;
+
+      @media (max-width: 960px) {
+        --heroHeight: 65svh;
+      }
+
+      // For small height
+      @media (max-height: 850px) {
+        --heroHeight: 100svh;
+      }
+
+      // Custom hero sizing for landscape mobile
+      @media (max-width: 960px) and (orientation: landscape) {
+        --heroHeight: 200svh;
+      }
+    }
+
+    // Override default fixed height for hero layout in embeds
+    .hero-wrapper.embedded {
+      --heroHeight: 1000px;
+    }
+  </style>
+</Story>
+
+<Story name="Video hero" exportName="VideoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    class="video-hero"
+    hed="The conflict in Ethiopia"
+    hedSize="bigger"
+    hedWidth="wide"
+    authors={['Aditi Bhandari ', 'David Lewis']}
+    publishTime={new Date('2020-12-18').toISOString()}
+  >
+    <Video
+      width="widest"
+      class="my-0"
+      showControls={false}
+      preloadVideo="auto"
+      playVideoWhenInView={false}
+      src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+      poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
+      notes="Drone footage from the Village 8 refugee camp in Sudan."
+      ariaDescription="Aerial footage of people houses in refugee camp"
+    />
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      --heroHeight: calc(100svh - 60px);
+      .video-hero.headline {
+        header {
+          // Adjust vertical position as offset from default center
+          top: calc(50svh - 250px);
+        }
+
+        h1 {
+          color: #ffd430;
+          text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<Story name="Inline hero" exportName="InlineHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <!-- Set `stacked` to `false` -->
+  <HeroHeadline
+    stacked={false}
+    section="Global news"
+    hed="The plunge from 29,000 feet"
+    dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+    class="mb-0"
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+    >
+      <CrashMap />
+    </GraphicBlock>
+  </HeroHeadline>
+</Story>
+
+<Story name="Custom hed" exportName="CustomHed">
+  <HeroHeadline
+    class="custom-hed"
+    authors={[
+      'Prasanta Kumar Dutta',
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Anurag Rao',
+    ]}
+    publishTime={new Date('2023-05-11').toISOString()}
+    img={eurovisImgSrc}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
+  >
+    {#snippet hed()}
+      <h1>
+        <div class="body-note">A visual guide to</div>
+        <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+      </h1>
+    {/snippet}
+
+    {#snippet dek()}
+      <div class="dek">
+        <p>
+          Performers from 37 countries are coming together May 9-13 in
+          Liverpool, England, for the 67th annual Eurovision Song Contest. The
+          winner gets the trophy and their country gets the right to host next
+          year’s event, produced by the European Broadcasting Union (EBU).
+        </p>
+      </div>
+    {/snippet}
+  </HeroHeadline>
+
+  <style lang="scss">
+    .custom-hed {
+      h1 {
+        .body-note {
+          color: #ffffff;
+        }
+        .title {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+
+      .dek {
+        margin-top: 1rem;
+        p {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<style lang="scss">
+  .transparent-header {
+    :global(.nav-container) {
+      background-color: transparent !important;
+    }
+    :global(.nav-container .inner) {
+      background-color: transparent !important;
+      border: none !important;
+    }
+
+    :global(.hero-wrapper) {
+      margin-top: -64px;
+    }
+  }
+</style>
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
new file mode 100644
index 00000000..7f782581
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -0,0 +1,276 @@
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HeadlineSize } from '../@types/global';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import Headline from '../Headline/Headline.svelte';
+  import Byline from '../Byline/Byline.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+
+  export interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /**
+     * Optional snippet for a custom hero graphic, photo, etc.
+     */
+    children?: Snippet;
+    /** Set to `false` for inline hero media */
+    stacked?: boolean;
+    /**
+     * Path to the background hero image
+     */
+    img?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /** Add classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /**
+     * Headline size: small, normal, big, bigger, biggest
+     */
+    hedSize?: HeadlineSize;
+    /**
+     * Headline horizontal alignment: left, center, right
+     */
+    hedAlign?: 'left' | 'center' | 'right';
+    /**
+     * Width of the headline: normal, wide, wider, widest
+     */
+    hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Dek, parsed as a markdown string OR as a custom snippet.
+     */
+    dek?: string | Snippet;
+    /**
+     * Section title
+     */
+    section?: string;
+    /**
+     * Array of author names, which will be slugified to create links to Reuters author pages
+     */
+    authors?: string[];
+    /**
+     * Publish time as a datetime string.
+     */
+    publishTime: string;
+    /**
+     * Update time as a datetime string.
+     */
+    updateTime?: string;
+    /**
+     * Width of the hero graphic: normal, wide, wider, widest
+     */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /** Set to true for embeds. */
+    embedded?: boolean;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * Optional snippet for a custom byline.
+     */
+    byline?: Snippet;
+    /**
+     * Optional snippet for a custom published dateline.
+     */
+    published?: Snippet;
+    /**
+     * Optional snippet for a custom updated dateline.
+     */
+    updated?: Snippet;
+  }
+
+  let {
+    hed,
+    stacked = true,
+    img,
+    ariaDescription,
+    notes,
+    class: cls = '',
+    hedSize = 'normal',
+    hedAlign = 'center',
+    hedWidth = 'normal',
+    dek,
+    section,
+    authors = [],
+    publishTime,
+    updateTime,
+    width = 'widest',
+    embedded = false,
+    children,
+    getAuthorPage,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+</script>
+
+<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
+  <div class="hero-wrapper fmb-6" class:embedded>
+    <!-- stacked media hero-->
+    {#if stacked}
+      <Block width="fluid" class="hero-headline background-hero fmt-0">
+        <!-- Handles string or snippet `hed` -->
+        <Headline
+          class="{cls} !text-{hedAlign}"
+          width={hedWidth}
+          {section}
+          {hedSize}
+          {hed}
+          {dek}
+        />
+
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <GraphicBlock
+              {width}
+              role="img"
+              class="my-0"
+              textWidth="normal"
+              {notes}
+              {ariaDescription}
+            >
+              <div
+                class="background-image"
+                style="background-image: url({img})"
+              ></div>
+            </GraphicBlock>
+          {/if}
+        </div>
+      </Block>
+    {/if}
+
+    <!-- Non-stacked hero -->
+    {#if stacked === false}
+      <Block width="fluid" class="hero-headline inline-hero">
+        <PaddingReset containerIsFluid={true}>
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width={hedWidth}
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
+          />
+        </PaddingReset>
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <FeaturePhoto
+              {width}
+              class="my-0"
+              src={img}
+              caption={notes}
+              altText={ariaDescription || ''}
+            />
+          {/if}
+        </div>
+      </Block>
+    {/if}
+  </div>
+
+  <div class="hero-byline fmb-6">
+    {#if byline}
+      <!-- Custom byline/dateline -->
+      {@render byline()}
+    {:else if authors.length > 0 || publishTime}
+      <Byline
+        {authors}
+        {publishTime}
+        {updateTime}
+        {getAuthorPage}
+        {published}
+        {updated}
+        align="left"
+      />
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../../scss/mixins' as mixins;
+
+  .hero-wrapper {
+    :global(.background-hero) {
+      min-height: var(--heroHeight, 100svh);
+      max-height: 1800px;
+      position: relative;
+    }
+
+    :global(.background-hero .headline) {
+      @include mixins.fmt-0;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 50%;
+      height: var(--heroHeight, 100svh);
+      max-height: 1800px;
+      transform: translateX(-50%);
+
+      @media (max-width: 690px) {
+        padding: 0 15px;
+      }
+    }
+
+    :global(aside p) {
+      @include mixins.body-caption;
+    }
+
+    :global(.background-hero video) {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: var(--heroHeight);
+      object-fit: cover;
+    }
+
+    :global(.graphic-container .article-block.notes) {
+      @media (max-width: 690px) {
+        width: 100%;
+        padding: 0 15px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  .hero-byline {
+    :global(.byline-container) {
+      z-index: 1;
+      position: relative;
+    }
+  }
+
+  .background-image {
+    width: auto;
+    height: var(--heroHeight, 100svh);
+    max-height: 1800px;
+    user-select: none;
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+</style>
diff --git a/src/components/HeroHeadline/stories/eurovis.jpeg b/src/components/HeroHeadline/demo/eurovis.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/eurovis.jpeg
rename to src/components/HeroHeadline/demo/eurovis.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg
rename to src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/crash.svelte b/src/components/HeroHeadline/demo/graphics/crash.svelte
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/crash.svelte
rename to src/components/HeroHeadline/demo/graphics/crash.svelte
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg
rename to src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg
diff --git a/src/components/HeroHeadline/stories/graphics/quakemap.svelte b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
similarity index 100%
rename from src/components/HeroHeadline/stories/graphics/quakemap.svelte
rename to src/components/HeroHeadline/demo/graphics/quakemap.svelte
diff --git a/src/components/HeroHeadline/stories/polar.jpg b/src/components/HeroHeadline/demo/polar.jpg
similarity index 100%
rename from src/components/HeroHeadline/stories/polar.jpg
rename to src/components/HeroHeadline/demo/polar.jpg
diff --git a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
deleted file mode 100644
index c07b7b67..00000000
--- a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
+++ /dev/null
@@ -1,84 +0,0 @@
-Reuters Graphics headline with ai2svelte graphic as background.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-  import QuakeMap from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Earthquake devastates Afghanistan'}"
-  hedSize="{'big'}"
-  hedWidth="wide"
-  class="custom-hero mb-0"
-  dek=""
-  authors="{[
-    'Anand Katakam',
-    'Vijdan Mohammad Kawoosa',
-    'Adolfo Arranz',
-    'Wen Foo',
-    'Simon Scarr',
-    'Aman Bhargava',
-    'Jitesh Chowdhury',
-    'Manas Sharma',
-    'Aditi Bhandari',
-  ]}"
-  publishTime="{new Date('2022-06-24').toISOString()}"
->
-  <div slot="background">
-    <GraphicBlock
-      width="widest"
-      role="figure"
-      class="my-0"
-      textWidth="normal"
-      notes=""
-      ariaDescription="Earthquake impact map"
-    >
-      <svelte:component this="{QuakeMap}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .hero-wrapper {
-    .custom-hero.headline {
-      // Adjust vertical positioning
-      align-items: flex-end !important;
-
-      @media (max-width: 1100px) {
-        // Adjust line length of title
-        max-width: var(--normal-column-width) !important;
-      }
-    }
-
-    // Make hero smaller than 100vh
-    --heroHeight: 85svh;
-
-    @media (max-width: 960px) {
-      --heroHeight: 65svh;
-    }
-
-    // For small height
-    @media (max-height: 850px) {
-      --heroHeight: 100svh;
-    }
-
-    // Custom hero sizing for landscape mobile
-    @media (max-width: 960px) and (orientation: landscape) {
-      --heroHeight: 200svh;
-    }
-  }
-
-  // Override default fixed height for hero layout in embeds
-  .hero-wrapper.embedded {
-    --heroHeight: 1000px;
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/backgroundVideo.md b/src/components/HeroHeadline/stories/docs/backgroundVideo.md
deleted file mode 100644
index 49de9a18..00000000
--- a/src/components/HeroHeadline/stories/docs/backgroundVideo.md
+++ /dev/null
@@ -1,51 +0,0 @@
-Add a cover video and position the title with ease.
-
-```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  class="custom-hero"
-  hed="The conflict in Ethiopia"
-  hedSize="bigger"
-  hedWidth="wide"
-  authors="{['Aditi Bhandari ', 'David Lewis']}"
-  publishTime="{new Date('2020-12-18').toISOString()}"
->
-  <div slot="background">
-    <Video
-      width="widest"
-      class="my-0"
-      showControls="{false}"
-      preloadVideo="auto"
-      playVideoWhenInView="{false}"
-      src="{assets}/videos/intro.mp4"
-      poster="{assets}/images/video-poster-intro.jpg"
-      notes="Drone footage from the Village 8 refugee camp in Sudan."
-      ariaDescription="Aerial footage of people houses in refugee camp"
-    />
-  </div>
-</HeroHeadline>
-
-<style lang="scss">
-  .hero-wrapper {
-    --heroHeight: calc(100svh - 60px);
-    .custom-hero.headline {
-      header {
-        // Adjust vertical position as offset from default center
-        top: calc(50svh - 250px);
-      }
-
-      h1 {
-        color: #ffd430;
-        text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
-      }
-    }
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/component.md b/src/components/HeroHeadline/stories/docs/component.md
deleted file mode 100644
index a70548c1..00000000
--- a/src/components/HeroHeadline/stories/docs/component.md
+++ /dev/null
@@ -1,20 +0,0 @@
-Reuters Graphics headline with a Hero media
-
-```svelte
-<script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  img="{`${assets}/images/myImage.jpg`}"
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'World News'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
-/>
-```
diff --git a/src/components/HeroHeadline/stories/docs/customHed.md b/src/components/HeroHeadline/stories/docs/customHed.md
deleted file mode 100644
index 65ae17da..00000000
--- a/src/components/HeroHeadline/stories/docs/customHed.md
+++ /dev/null
@@ -1,43 +0,0 @@
-Add a custom styled headline.
-
-```svelte
-<script>
-  import { HeroHeadline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  class="custom-hed"
-  authors="{[
-    'Prasanta Kumar Dutta',
-    'Dea Bankova',
-    'Aditi Bhandari',
-    'Anurag Rao',
-  ]}"
-  publishTime="{new Date('2023-05-11').toISOString()}"
-  img="{`${assets}/images/myImage.jpg`}"
->
-  <h1 slot="hed">
-    <div class="body-note">A visual guide to</div>
-    <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
-  </h1>
-</HeroHeadline>
-
-<style lang="scss">
-  .custom-hed {
-    h1 {
-      .body-note {
-        color: #ffffff;
-      }
-      .title {
-        color: #ffffff;
-        text-shadow: 1px 1px 8px #ff7c88;
-        filter: drop-shadow(0px 0px 12px #ff7c88);
-      }
-    }
-  }
-</style>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlineGraphic.md b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
deleted file mode 100644
index fef464a0..00000000
--- a/src/components/HeroHeadline/stories/docs/inlineGraphic.md
+++ /dev/null
@@ -1,38 +0,0 @@
-Reuters Graphics headline followed by a graphic or any media block.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    GraphicBlock,
-  } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'The plunge from 29,000 feet'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
-  section="{'Global news'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <GraphicBlock
-      width="widest"
-      role="img"
-      class="my-0"
-      textWidth="normal"
-      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
-      ariaDescription="Aerial map showing trajectory of crash"
-    >
-      <svelte:component this="{Map}" assetsPath="{assets || '/'}" />
-    </GraphicBlock>
-  </div>
-</HeroHeadline>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlinePhoto.md b/src/components/HeroHeadline/stories/docs/inlinePhoto.md
deleted file mode 100644
index 69f8df9e..00000000
--- a/src/components/HeroHeadline/stories/docs/inlinePhoto.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Reuters Graphics headline followed by a graphic or any media block.
-
-```svelte
-<script>
-  import {
-    HeroHeadline,
-    FeaturePhoto,
-  } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Buried under the bricks'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How mud-brick housing made the Morocco earthquake so deadly'}"
-  section="{'Global news'}"
-  authors="{['Mariano Zafra']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <FeaturePhoto
-      width="widest"
-      class="my-0"
-      src="{`${assets}/images/myImage.jpg`}"
-      caption="Photo by REUTERS/Nacho Doce."
-      altText="A photo of the town of Adassil, Morocco, showing severe damage to many houses, which have collapsed after the earthquake. The houses are all made of mud brick."
-    />
-  </div>
-</HeroHeadline>
-```
diff --git a/src/components/HeroHeadline/stories/docs/inlineVideo.md b/src/components/HeroHeadline/stories/docs/inlineVideo.md
deleted file mode 100644
index dcf7c745..00000000
--- a/src/components/HeroHeadline/stories/docs/inlineVideo.md
+++ /dev/null
@@ -1,34 +0,0 @@
-Add a cover video and position the title with ease.
-
-```svelte
-<script>
-  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-
-  export let embedded = false;
-</script>
-
-<HeroHeadline
-  embedded="{embedded}"
-  hed="{'Devastation in Derna'}"
-  hedWidth="wide"
-  class="mb-0"
-  dek="{'How raging floods burst dams, destroyed neighbourhoods and killed thousands in Libya'}"
-  section="{'Global news'}"
-  authors="{['Simon Scarr']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
->
-  <div slot="inline">
-    <Video
-      width="widest"
-      class="my-0"
-      showControls="{false}"
-      preloadVideo="auto"
-      playVideoWhenInView="{false}"
-      src="{assets}/videos/intro.mp4"
-      notes="Drone shots of Derna, Libya. September 14, 2023. REUTERS"
-      ariaDescription="alttext fot video"
-    />
-  </div>
-</HeroHeadline>
-```
diff --git a/src/components/HeroHeadline/stories/docs/transparentHeader.md b/src/components/HeroHeadline/stories/docs/transparentHeader.md
deleted file mode 100644
index 55761f94..00000000
--- a/src/components/HeroHeadline/stories/docs/transparentHeader.md
+++ /dev/null
@@ -1,17 +0,0 @@
-Make the hero full bleed and under the header.
-
-```scss
-// global.scss
-
-.nav-container {
-  background-color: transparent !important;
-}
-.nav-container .inner {
-  background-color: transparent !important;
-  border: none;
-}
-
-.hero-wrapper {
-  margin-top: -64px;
-}
-```
diff --git a/src/index.js b/src/index.js
index c647a932..f758e29c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -13,14 +13,14 @@ export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.sve
 export { default as Block } from './components/Block/Block.svelte';
 export { default as BodyText } from './components/BodyText/BodyText.svelte';
 export { default as Byline } from './components/Byline/Byline.svelte';
-// export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
 export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte';
 export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
-// export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
 export { default as Framer } from './components/Framer/Framer.svelte';
 export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
 export { default as Headline } from './components/Headline/Headline.svelte';
-export { default as HeroHeadline } from './components/HeroHeadline/Hero.svelte';
+export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
 export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
@@ -49,4 +49,3 @@ export { default as Theme, themes } from './components/Theme/Theme.svelte';
 export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte';
 export { default as Video } from './components/Video/Video.svelte';
 export { default as Visible } from './components/Visible/Visible.svelte';
-export { default as TestForSvelte5 } from './components/TestForSvelte5/TestForSvelte5.svelte';