diff --git a/src/components/ReferralBlock/stories/docs/component.md b/src/components/ReferralBlock/ReferralBlock.mdx
similarity index 72%
rename from src/components/ReferralBlock/stories/docs/component.md
rename to src/components/ReferralBlock/ReferralBlock.mdx
index 61bb9141..950c8adf 100644
--- a/src/components/ReferralBlock/stories/docs/component.md
+++ b/src/components/ReferralBlock/ReferralBlock.mdx
@@ -1,3 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReferralBlockStories from './ReferralBlock.stories.svelte';
+
+<Meta of={ReferralBlockStories} />
+
+# ReferralBlock
+
 The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
 
 > The `section` or `collection` prop determines which section or collection stories are from.
@@ -13,3 +21,15 @@ The `ReferralBlock` component creates a set of referral links from recent dotcom
 
 <ReferralBlock section="/lifestyle/sports/" />
 ```
+
+<Canvas of={ReferralBlockStories.Demo} />
+
+## Collection
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
+```
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index f3e4197d..95625c43 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -1,17 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import collectionDocs from './stories/docs/collection.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ReferralBlock from './ReferralBlock.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page furniture/ReferralBlock',
     component: ReferralBlock,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
@@ -34,36 +27,26 @@
         options: [2, 4, 6, 8],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <ReferralBlock {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     section: '/lifestyle/sports/',
     number: 4,
     class: 'fmy-0',
     heading: 'More World Cup coverage',
-  }}"
+  }}
 />
 
 <Story
   name="By collection"
-  args="{{
+  exportName="ByCollection"
+  args={{
     collection: 'x-trump',
     number: 6,
     class: 'fmy-8',
     heading: 'The latest Trump coverage',
-  }}"
-  {...withStoryDocs(collectionDocs)}
+  }}
 />
diff --git a/src/components/ReferralBlock/stories/docs/collection.md b/src/components/ReferralBlock/stories/docs/collection.md
deleted file mode 100644
index d582368d..00000000
--- a/src/components/ReferralBlock/stories/docs/collection.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```svelte
-<script>
-  import { ReferralBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
-```