From c9b4c7d86c95f7996f0a833481a440503b66111e Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:06:36 -0700
Subject: [PATCH 1/5] sets up headline docs

---
 src/components/Headline/Headline.mdx          | 137 ++++++++++++++++++
 .../Headline/Headline.stories.svelte          | 128 +++++++---------
 src/components/Headline/Headline.svelte       |  21 ++-
 .../Headline/{stories => demo}/crown.png      | Bin
 .../Headline/{stories => demo}/graphic-lg.png | Bin
 .../Headline/{stories => demo}/graphic-md.png | Bin
 .../Headline/{stories => demo}/graphic-sm.png | Bin
 .../Headline/{stories => demo}/graphic-xl.png | Bin
 .../Headline/{stories => demo}/graphic-xs.png | Bin
 .../Headline/{stories => demo}/graphic.svelte |  12 +-
 .../Headline/stories/docs/component.md        |  13 --
 .../Headline/stories/docs/customHed.md        |  31 ----
 .../Headline/stories/docs/withByline.md       |  13 --
 .../Headline/stories/docs/withCrownGraphic.md |  24 ---
 .../Headline/stories/docs/withCrownImage.md   |  21 ---
 .../Headline/stories/docs/withDek.md          |  11 --
 16 files changed, 204 insertions(+), 207 deletions(-)
 create mode 100644 src/components/Headline/Headline.mdx
 rename src/components/Headline/{stories => demo}/crown.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-lg.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-md.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-sm.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-xl.png (100%)
 rename src/components/Headline/{stories => demo}/graphic-xs.png (100%)
 rename src/components/Headline/{stories => demo}/graphic.svelte (98%)
 delete mode 100644 src/components/Headline/stories/docs/component.md
 delete mode 100644 src/components/Headline/stories/docs/customHed.md
 delete mode 100644 src/components/Headline/stories/docs/withByline.md
 delete mode 100644 src/components/Headline/stories/docs/withCrownGraphic.md
 delete mode 100644 src/components/Headline/stories/docs/withCrownImage.md
 delete mode 100644 src/components/Headline/stories/docs/withDek.md

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
new file mode 100644
index 00000000..afbdf0b8
--- /dev/null
+++ b/src/components/Headline/Headline.mdx
@@ -0,0 +1,137 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadlineStories from './Headline.stories.svelte';
+
+<Meta of={HeadlineStories} />
+
+# Headline
+
+The `Headline` component creates the Reuters Graphics headline.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'World News'}
+/>
+```
+
+<Canvas of={HeadlineStories.Demo} />
+
+## Dek
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+/>
+```
+
+## With byline
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  section={'Global news'}
+  authors={['Dea Bankova', 'Aditi Bhandari']}
+  publishTime={new Date('2020-01-01').toISOString()}
+/>
+```
+
+## With custom hed
+Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Headline width="wide">
+  <h1 class="custom-hed" slot="hed">
+    <span class="small block text-base">The secret to</span>
+    “The Nutcracker's”
+    <span class="small block text-base fpt-1">success</span>
+  </h1>
+  <p class="custom-dek !fmt-3" slot="dek">
+    How “The Nutcracker” ballet became an<span
+      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+    >and a financial pillar of ballet companies across the country
+  </p>
+</Headline>
+
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
+```
+
+## With crown image
+
+Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+  <!-- Add a crown -->
+  <img
+    slot="crown"
+    src={crownImgSrc}
+    width="100"
+    class="mx-auto mb-0"
+    alt="Illustration of Europe"
+  />
+  <!-- Override the hed with a named slot -->
+  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
+</Headline>
+```
+
+## With crown graphic
+
+Add a full graphic or any other component in the crown.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import Map from './ai2svelte/graphic.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<Headline
+  width="wider"
+  class="!fmt-1"
+  hed={'Unfriendly skies'}
+  dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+  section={'Ukraine Crisis'}
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2022-03-04').toISOString()}
+>
+  <!-- Add a crown graphic -->
+  <div slot="crown">
+    <Map assetsPath={assets} />
+  </div>
+</Headline>
+```
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 720d119b..76ff4ec0 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -1,28 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import withBylineDocs from './stories/docs/withByline.md?raw';
-  // @ts-ignore raw
-  import withDekDocs from './stories/docs/withDek.md?raw';
-  // @ts-ignore raw
-  import customHedDocs from './stories/docs/customHed.md?raw';
-  // @ts-ignore raw
-  import withCrownImgDocs from './stories/docs/withCrownImage.md?raw';
-  // @ts-ignore raw
-  import withCrownGraphicDocs from './stories/docs/withCrownGraphic.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Headline from './Headline.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Text elements/Headline',
     component: Headline,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       hedSize: {
         control: 'select',
@@ -33,115 +15,107 @@
         options: ['normal', 'wide', 'wider', 'widest'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  // @ts-ignore img
-  import crownImgSrc from './stories/crown.png';
-  import Map from './stories/graphic.svelte';
+  import crownImgSrc from './demo/crown.png';
+  import Map from './demo/graphic.svelte';
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Headline {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     section: 'World News',
     hed: 'Reuters Graphics interactive',
     hedSize: 'normal',
     dek: '',
     authors: [],
-  }}"
+  }}
 />
 
-<Story name="With dek" {...withStoryDocs(withDekDocs)}>
+<Story name="Dek">
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
   />
 </Story>
 
-<Story name="With byline" {...withStoryDocs(withBylineDocs)}>
+<Story name="Byline">
   <Headline
-    hed="{'Reuters Graphics Interactive'}"
-    dek="{'The beginning of a beautiful page'}"
-    section="{'Global news'}"
-    authors="{['Dea Bankova', 'Aditi Bhandari']}"
-    publishTime="{new Date('2020-01-01').toISOString()}"
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Dea Bankova', 'Aditi Bhandari']}
+    publishTime={new Date('2020-01-01').toISOString()}
   />
 </Story>
 
-<Story name="With custom hed" {...withStoryDocs(customHedDocs)}>
+<Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
     {#snippet hed()}
-        <h1 class="custom-hed" >
+      <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
-      {/snippet}
+    {/snippet}
     {#snippet dek()}
-        <p class="custom-dek !fmt-3" >
+      <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
         >and a financial pillar of ballet companies across the country
       </p>
-      {/snippet}
+    {/snippet}
   </Headline>
-  <style lang="scss">
-    .custom-hed {
-      line-height: 0.9;
-    }
-    .custom-dek {
-      span {
-        background-color: #fde68a;
-      }
-    }
-  </style>
 </Story>
 
-<Story name="With crown image" {...withStoryDocs(withCrownImgDocs)}>
-  <Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
+<Story name="Crown image" exportName="CrownImage">
+  >
+  <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
-        <img
-        
-        src="{crownImgSrc}"
+      <img
+        src={crownImgSrc}
         width="100"
         class="mx-auto mb-0"
         alt="Illustration of Europe"
       />
-      {/snippet}
-    <!-- Override the hed with a named slot -->
+    {/snippet}
+    <!-- Override the hed with a snippet -->
     {#snippet hed()}
-        <h1  class="!font-serif !tracking-wide">Europa</h1>
-      {/snippet}
+      <h1 class="!font-serif !tracking-wide">Europa</h1>
+    {/snippet}
   </Headline>
 </Story>
 
-<Story name="With crown graphic" {...withStoryDocs(withCrownGraphicDocs)}>
+<Story name="Crown graphic" exportName="CrownGraphic">
   <Headline
     width="wider"
     class="!fmt-1"
-    hed="{'Unfriendly skies'}"
-    dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-    section="{'Ukraine Crisis'}"
-    authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-    publishTime="{new Date('2022-03-04').toISOString()}"
+    hed={'Unfriendly skies'}
+    dek={'How Russia’s invasion of Ukraine is redrawing air routes'}
+    section={'Ukraine Crisis'}
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2022-03-04').toISOString()}
   >
     <!-- Add a crown graphic -->
     {#snippet crown()}
-        <div >
+      <div>
         <Map />
       </div>
-      {/snippet}
+    {/snippet}
   </Headline>
 </Story>
+
+<style lang="scss">
+  .custom-hed {
+    line-height: 0.9;
+  }
+  .custom-dek {
+    span {
+      background-color: #fde68a;
+    }
+  }
+</style>
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index ef10aa1b..3a2e39b0 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -1,4 +1,3 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
   import type { HeadlineSize } from './../@types/global';
@@ -95,8 +94,8 @@
           <!-- Headline named slot -->
           <slot name="hed" />
         {:else}
-          <h1 class="{hedClass}">
-            <Markdown source="{hed}" parseInline />
+          <h1 class={hedClass}>
+            <Markdown source={hed} parseInline />
           </h1>
         {/if}
         {#if $$slots.dek}
@@ -106,7 +105,7 @@
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
-            <Markdown source="{dek}" />
+            <Markdown source={dek} />
           </div>
         {/if}
       </div>
@@ -115,7 +114,7 @@
         <slot name="byline" />
       {:else if authors.length > 0 || publishTime}
         <Byline
-          class="fmy-4"
+          cls="fmy-4"
           {authors}
           {publishTime}
           {updateTime}
@@ -127,17 +126,17 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
       max-width: $column-width-normal;
     }
     :global(.dek p) {
-      @include fmt-0;
-      @include font-note;
-      @include leading-tight;
-      @include font-light;
-      @include fmb-3;
+      @include mixins.fmt-0;
+      @include mixins.font-note;
+      @include mixins.leading-tight;
+      @include mixins.font-light;
+      @include mixins.fmb-3;
     }
   }
 </style>
diff --git a/src/components/Headline/stories/crown.png b/src/components/Headline/demo/crown.png
similarity index 100%
rename from src/components/Headline/stories/crown.png
rename to src/components/Headline/demo/crown.png
diff --git a/src/components/Headline/stories/graphic-lg.png b/src/components/Headline/demo/graphic-lg.png
similarity index 100%
rename from src/components/Headline/stories/graphic-lg.png
rename to src/components/Headline/demo/graphic-lg.png
diff --git a/src/components/Headline/stories/graphic-md.png b/src/components/Headline/demo/graphic-md.png
similarity index 100%
rename from src/components/Headline/stories/graphic-md.png
rename to src/components/Headline/demo/graphic-md.png
diff --git a/src/components/Headline/stories/graphic-sm.png b/src/components/Headline/demo/graphic-sm.png
similarity index 100%
rename from src/components/Headline/stories/graphic-sm.png
rename to src/components/Headline/demo/graphic-sm.png
diff --git a/src/components/Headline/stories/graphic-xl.png b/src/components/Headline/demo/graphic-xl.png
similarity index 100%
rename from src/components/Headline/stories/graphic-xl.png
rename to src/components/Headline/demo/graphic-xl.png
diff --git a/src/components/Headline/stories/graphic-xs.png b/src/components/Headline/demo/graphic-xs.png
similarity index 100%
rename from src/components/Headline/stories/graphic-xs.png
rename to src/components/Headline/demo/graphic-xs.png
diff --git a/src/components/Headline/stories/graphic.svelte b/src/components/Headline/demo/graphic.svelte
similarity index 98%
rename from src/components/Headline/stories/graphic.svelte
rename to src/components/Headline/demo/graphic.svelte
index 28a6b06c..bfccbab4 100644
--- a/src/components/Headline/stories/graphic.svelte
+++ b/src/components/Headline/demo/graphic.svelte
@@ -14,7 +14,7 @@
   let width = $state(null);
 </script>
 
-<div id="g-graphic-box" bind:clientWidth="{width}">
+<div id="g-graphic-box" bind:clientWidth={width}>
   <!-- Artboard: xs -->
   {#if width && width >= 0 && width < 510}
     <div id="g-graphic-xs" class="g-artboard" style="">
@@ -22,7 +22,7 @@
       <div
         id="g-graphic-xs-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXs});`}"
+        style={`background-image: url(${chartXs});`}
       ></div>
       <div
         id="g-ai0-3"
@@ -89,7 +89,7 @@
       <div
         id="g-graphic-sm-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartSm});`}"
+        style={`background-image: url(${chartSm});`}
       ></div>
       <div
         id="g-ai1-1"
@@ -213,7 +213,7 @@
       <div
         id="g-graphic-md-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartMd});`}"
+        style={`background-image: url(${chartMd});`}
       ></div>
 
       <div
@@ -346,7 +346,7 @@
       <div
         id="g-graphic-lg-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartLg});`}"
+        style={`background-image: url(${chartLg});`}
       ></div>
       <div
         id="g-ai3-1"
@@ -485,7 +485,7 @@
       <div
         id="g-graphic-xl-img"
         class="g-aiImg"
-        style="{`background-image: url(${chartXl});`}"
+        style={`background-image: url(${chartXl});`}
       ></div>
       <div
         id="g-ai4-1"
diff --git a/src/components/Headline/stories/docs/component.md b/src/components/Headline/stories/docs/component.md
deleted file mode 100644
index c20fc753..00000000
--- a/src/components/Headline/stories/docs/component.md
+++ /dev/null
@@ -1,13 +0,0 @@
-Reuters Graphics headline
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'World News'}"
-/>
-```
diff --git a/src/components/Headline/stories/docs/customHed.md b/src/components/Headline/stories/docs/customHed.md
deleted file mode 100644
index 25228bd3..00000000
--- a/src/components/Headline/stories/docs/customHed.md
+++ /dev/null
@@ -1,31 +0,0 @@
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline width="wide">
-  <h1 class="custom-hed" slot="hed">
-    <span class="small block text-base">The secret to</span>
-    “The Nutcracker's”
-    <span class="small block text-base fpt-1">success</span>
-  </h1>
-  <p class="custom-dek !fmt-3" slot="dek">
-    How “The Nutcracker” ballet became an<span
-      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-    >and a financial pillar of ballet companies across the country
-  </p>
-</Headline>
-
-<style lang="scss">
-  .custom-hed {
-    line-height: 0.9;
-  }
-  .custom-dek {
-    span {
-      background-color: #fde68a;
-    }
-  }
-</style>
-```
diff --git a/src/components/Headline/stories/docs/withByline.md b/src/components/Headline/stories/docs/withByline.md
deleted file mode 100644
index eff73515..00000000
--- a/src/components/Headline/stories/docs/withByline.md
+++ /dev/null
@@ -1,13 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  authors="{['Dea Bankova', 'Aditi Bhandari']}"
-  publishTime="{new Date('2020-01-01').toISOString()}"
-/>
-```
diff --git a/src/components/Headline/stories/docs/withCrownGraphic.md b/src/components/Headline/stories/docs/withCrownGraphic.md
deleted file mode 100644
index 48a7099a..00000000
--- a/src/components/Headline/stories/docs/withCrownGraphic.md
+++ /dev/null
@@ -1,24 +0,0 @@
-Add a full graphic or any other component in the crown.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline
-  width="wider"
-  class="!fmt-1"
-  hed="{'Unfriendly skies'}"
-  dek="{'How Russia’s invasion of Ukraine is redrawing air routes'}"
-  section="{'Ukraine Crisis'}"
-  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
-  publishTime="{new Date('2022-03-04').toISOString()}"
->
-  <!-- Add a crown graphic -->
-  <div slot="crown">
-    <Map assetsPath="{assets}" />
-  </div>
-</Headline>
-```
diff --git a/src/components/Headline/stories/docs/withCrownImage.md b/src/components/Headline/stories/docs/withCrownImage.md
deleted file mode 100644
index f705d9cb..00000000
--- a/src/components/Headline/stories/docs/withCrownImage.md
+++ /dev/null
@@ -1,21 +0,0 @@
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-  import { assets } from '$app/paths';
-</script>
-
-<Headline class="!fmt-3" publishTime="{new Date('2020-01-01').toISOString()}">
-  <!-- Add a crown -->
-  <img
-    slot="crown"
-    src="{crownImgSrc}"
-    width="100"
-    class="mx-auto mb-0"
-    alt="Illustration of Europe"
-  />
-  <!-- Override the hed with a named slot -->
-  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
-</Headline>
-```
diff --git a/src/components/Headline/stories/docs/withDek.md b/src/components/Headline/stories/docs/withDek.md
deleted file mode 100644
index 63b808c7..00000000
--- a/src/components/Headline/stories/docs/withDek.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-/>
-```

From 2f7c40f6c18eb4c7f0e83256a417253a897e7980 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:17:31 -0700
Subject: [PATCH 2/5] migrated Headline.svelte

---
 .../Headline/Headline.stories.svelte          |   5 +-
 src/components/Headline/Headline.svelte       | 123 +++++++++---------
 2 files changed, 65 insertions(+), 63 deletions(-)

diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 76ff4ec0..3610b645 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -54,14 +54,14 @@
 
 <Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
-    {#snippet hed()}
+    {#snippet customHed()}
       <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
     {/snippet}
-    {#snippet dek()}
+    {#snippet customDek()}
       <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
@@ -72,7 +72,6 @@
 </Story>
 
 <Story name="Crown image" exportName="CrownImage">
-  >
   <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
     <!-- Add a crown -->
     {#snippet crown()}
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 3a2e39b0..7b8fbb6b 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -1,59 +1,62 @@
 <!-- @component `Headline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-headline--docs) -->
 <script lang="ts">
+  // Types
   import type { HeadlineSize } from './../@types/global';
+  import type { Snippet } from 'svelte';
 
-  /**
-   * 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';
-
-  /**
-   * 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 headline.
-   */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
-
+  // Components
   import Block from '../Block/Block.svelte';
   import Byline from '../Byline/Byline.svelte';
   import Markdown from '../Markdown/Markdown.svelte';
 
-  let hedClass: string;
-  $: {
+  interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
+    hed: string;
+    /** Custom byline snippet */
+    byline?: Snippet;
+    /** Custom headline snippet */
+    customHed?: Snippet;
+    /** Add extra classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /** Headline size: small, normal, big, bigger, biggest */
+    hedSize?: HeadlineSize;
+    /** Dek, parsed as a markdown string. */
+    dek?: string;
+    /** Custom dek snippet */
+    customDek?: Snippet;
+    /** Custom crown snippet */
+    crown?: 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 headline: normal, wide, wider, widest */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+  }
+
+  let {
+    hed = 'Reuters Graphics Interactive',
+    byline,
+    customHed,
+    class: cls = '',
+    hedSize = 'normal',
+    dek,
+    customDek,
+    crown,
+    section,
+    authors = [],
+    publishTime = '',
+    updateTime = '',
+    width = 'normal',
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $state('text-3xl');
+  $effect(() => {
     switch (hedSize) {
       case 'biggest':
         hedClass = 'text-6xl';
@@ -70,16 +73,16 @@
       default:
         hedClass = 'text-3xl';
     }
-  }
+  });
 </script>
 
 <div class="headline-wrapper" style="display:contents;">
   <Block {width} class="headline text-center fmt-7 fmb-6 {cls}">
     <header class="relative">
-      {#if $$slots.crown}
+      {#if crown}
         <div class="crown-container">
-          <!-- Crown named slot -->
-          <slot name="crown" />
+          <!-- Crown snippet -->
+          {@render crown()}
         </div>
       {/if}
       <div class="title">
@@ -90,18 +93,18 @@
             {section}
           </p>
         {/if}
-        {#if $$slots.hed}
-          <!-- Headline named slot -->
-          <slot name="hed" />
+        {#if customHed}
+          <!-- Headline snippet -->
+          {@render customHed()}
         {:else}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
         {/if}
-        {#if $$slots.dek}
-          <!-- Dek named slot-->
+        {#if customDek}
+          <!-- Dek snippet-->
           <div class="dek fmx-auto fmb-6">
-            <slot name="dek" />
+            {@render customDek()}
           </div>
         {:else if dek}
           <div class="dek fmx-auto fmb-6">
@@ -109,9 +112,9 @@
           </div>
         {/if}
       </div>
-      {#if $$slots.byline}
+      {#if byline}
         <!-- Custom byline/dateline -->
-        <slot name="byline" />
+        {@render byline()}
       {:else if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"

From 478f16472a8f0e61b47461ef2e2a5b887f14a1f6 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Tue, 18 Mar 2025 14:46:42 -0700
Subject: [PATCH 3/5] set up snippets in Headline.svelte, working on docs

---
 src/components/Headline/Headline.mdx          |  5 +--
 .../Headline/Headline.stories.svelte          |  4 +--
 src/components/Headline/Headline.svelte       | 36 ++++++++-----------
 3 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index afbdf0b8..4e9fdf5c 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -52,8 +52,9 @@ The `Headline` component creates the Reuters Graphics headline.
 />
 ```
 
-## With custom hed
-Use the `hed` and/or `dek` named slots to override those elements with completely custom markup.
+## With custom hed
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
 
 ```svelte
 <script>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 3610b645..51da9ece 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -54,14 +54,14 @@
 
 <Story name="Custom hed" exportName="CustomHed">
   <Headline width="wide">
-    {#snippet customHed()}
+    {#snippet hed()}
       <h1 class="custom-hed">
         <span class="small block text-base">The secret to</span>
         “The Nutcracker's”
         <span class="small block text-base fpt-1">success</span>
       </h1>
     {/snippet}
-    {#snippet customDek()}
+    {#snippet dek()}
       <p class="custom-dek !fmt-3">
         How “The Nutcracker” ballet became an<span
           class="font-medium mx-1 px-1.5 py-1">American holday staple</span
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 7b8fbb6b..f14194d9 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -10,20 +10,16 @@
   import Markdown from '../Markdown/Markdown.svelte';
 
   interface Props {
-    /** Headline, parsed as an _inline_ markdown string in an `h1` element. */
-    hed: string;
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
     /** Custom byline snippet */
     byline?: Snippet;
-    /** Custom headline snippet */
-    customHed?: Snippet;
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
     hedSize?: HeadlineSize;
-    /** Dek, parsed as a markdown string. */
-    dek?: string;
-    /** Custom dek snippet */
-    customDek?: Snippet;
+    /** Dek, parsed as a markdown string OR as a custom snippet. */
+    dek?: string | Snippet;
     /** Custom crown snippet */
     crown?: Snippet;
     /** Section title */
@@ -41,11 +37,9 @@
   let {
     hed = 'Reuters Graphics Interactive',
     byline,
-    customHed,
     class: cls = '',
     hedSize = 'normal',
     dek,
-    customDek,
     crown,
     section,
     authors = [],
@@ -93,23 +87,23 @@
             {section}
           </p>
         {/if}
-        {#if customHed}
-          <!-- Headline snippet -->
-          {@render customHed()}
-        {:else}
+        {#if typeof hed === 'string'}
           <h1 class={hedClass}>
             <Markdown source={hed} parseInline />
           </h1>
+        {:else if hed}
+          <!-- Headline snippet -->
+          {@render hed()}
         {/if}
-        {#if customDek}
-          <!-- Dek snippet-->
-          <div class="dek fmx-auto fmb-6">
-            {@render customDek()}
-          </div>
-        {:else if dek}
+        {#if typeof dek === 'string'}
           <div class="dek fmx-auto fmb-6">
             <Markdown source={dek} />
           </div>
+        {:else if dek}
+          <!-- Dek snippet-->
+          <div class="dek fmx-auto fmb-6">
+            {@render dek()}
+          </div>
         {/if}
       </div>
       {#if byline}
@@ -132,7 +126,7 @@
   @use '../../scss/mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
-      max-width: $column-width-normal;
+      max-width: mixins.$column-width-normal;
     }
     :global(.dek p) {
       @include mixins.fmt-0;

From 0a4155949a7dd7205ca5d9b88396343dd5dce017 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 08:16:20 -0700
Subject: [PATCH 4/5] adds notes on getAuthorPage prop to Byline;

---
 src/components/Byline/Byline.mdx              | 24 ++++++++++++++++++-
 src/components/Byline/Byline.stories.svelte   | 19 ++++++++++++++-
 src/components/Byline/Byline.svelte           |  8 ++-----
 src/components/Headline/Headline.mdx          | 24 ++++---------------
 .../Headline/Headline.stories.svelte          |  6 ++---
 src/components/Headline/Headline.svelte       | 12 ++++++----
 src/utils/index.ts                            |  9 +++++++
 7 files changed, 67 insertions(+), 35 deletions(-)
 create mode 100644 src/utils/index.ts

diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
index dbff6ad5..94106e99 100644
--- a/src/components/Byline/Byline.mdx
+++ b/src/components/Byline/Byline.mdx
@@ -58,7 +58,7 @@ updateTime: 2021-09-12T12:57:00.000Z
 
 <Canvas of={BylineStories.Demo} />
 
-## Cutomisation
+## Custom byline, published and updated datelines
 
 Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
 
@@ -82,3 +82,25 @@ Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline,
 ```
 
 <Canvas of={BylineStories.Customised} />
+
+## Custom author page
+
+By default, the `Byline` component will hyperlink each author's byline to their Reuters.com page, formatted `https://www.reuters.com/authors/{author-slug}/`.
+
+To hyperlink to different pages or email addresses, pass a custom function to the `getAuthorPage` prop.
+
+```svelte
+<!-- Pass a custom function as `getAuthorPage` -->
+<Byline
+  authors={['Dea Bankova', 'Prasanta Kumar Dutta', 'Anurag Rao', 'Mariano Zafra']}
+  publishTime="2021-09-12T00:00:00Z"
+  updateTime="2021-09-12T13:57:00Z"
+  getAuthorPage={(author: string) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+/>
+
+```
+
+<Canvas of={BylineStories.CustomAuthorPage} />
+````
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index c0cf796a..6a81142a 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -18,7 +18,6 @@
 <Story
   name="Demo"
   args={{
-    align: 'left',
     authors: [
       'Dea Bankova',
       'Prasanta Kumar Dutta',
@@ -43,3 +42,21 @@
     {/snippet}
   </Byline>
 </Story>
+
+<Story
+  name="Custom author page"
+  exportName="CustomAuthorPage"
+  args={{
+    authors: [
+      'Dea Bankova',
+      'Prasanta Kumar Dutta',
+      'Anurag Rao',
+      'Mariano Zafra',
+    ],
+    publishTime: '2021-09-12T00:00:00Z',
+    updateTime: '2021-09-12T13:57:00Z',
+    getAuthorPage: (author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    },
+  }}
+/>
diff --git a/src/components/Byline/Byline.svelte b/src/components/Byline/Byline.svelte
index c904e27f..fa8e2558 100644
--- a/src/components/Byline/Byline.svelte
+++ b/src/components/Byline/Byline.svelte
@@ -1,8 +1,8 @@
 <!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
 <script lang="ts">
+  import { getAuthorPageUrl } from '../../utils';
   import Block from '../Block/Block.svelte';
-  import slugify from 'slugify';
   import { apdate } from 'journalize';
   import type { Snippet } from 'svelte';
 
@@ -46,7 +46,6 @@
     /**
      * Optional snippet for a custom published dateline.
      */
-    // Specify that this prop should have the type of a Svelte snippet, i.e. basic html
     published?: Snippet;
     /**
      * Optional snippet for a custom updated dateline.
@@ -61,10 +60,7 @@
     align = 'left',
     id = '',
     cls = '',
-    getAuthorPage = (author: string): string => {
-      const authorSlug = slugify(author.trim(), { lower: true });
-      return `https://www.reuters.com/authors/${authorSlug}/`;
-    },
+    getAuthorPage = getAuthorPageUrl,
     byline,
     published,
     updated,
diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index 4e9fdf5c..1e648521 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -6,7 +6,7 @@ import * as HeadlineStories from './Headline.stories.svelte';
 
 # Headline
 
-The `Headline` component creates the Reuters Graphics headline.
+The `Headline` component creates headlines in the legacy Reuters Graphics style, with the text centred on the page.
 
 ```svelte
 <script>
@@ -14,29 +14,15 @@ The `Headline` component creates the Reuters Graphics headline.
 </script>
 
 <Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'World News'}
+  hed="Reuters Graphics Interactive"
+  dek="The beginning of a beautiful page"
+  section="World News"
 />
 ```
 
 <Canvas of={HeadlineStories.Demo} />
 
-## Dek
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed={'Reuters Graphics Interactive'}
-  dek={'The beginning of a beautiful page'}
-  section={'Global news'}
-/>
-```
-
-## With byline
+## With authors and publish time
 
 ```svelte
 <script>
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 51da9ece..f2637248 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -26,11 +26,9 @@
 <Story
   name="Demo"
   args={{
-    section: 'World News',
     hed: 'Reuters Graphics interactive',
-    hedSize: 'normal',
-    dek: '',
-    authors: [],
+    dek: 'The beginning of a beautiful page',
+    section: 'World News',
   }}
 />
 
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index f14194d9..02a8d7ef 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -26,6 +26,10 @@
     section?: string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors?: string[];
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
     /** Publish time as a datetime string. */
     publishTime?: string;
     /** Update time as a datetime string. */
@@ -106,10 +110,7 @@
           </div>
         {/if}
       </div>
-      {#if byline}
-        <!-- Custom byline/dateline -->
-        {@render byline()}
-      {:else if authors.length > 0 || publishTime}
+      {#if authors.length > 0 || publishTime}
         <Byline
           cls="fmy-4"
           {authors}
@@ -117,6 +118,9 @@
           {updateTime}
           align="center"
         />
+      {:else if byline}
+        <!-- Custom byline/dateline -->
+        {@render byline()}
       {/if}
     </header>
   </Block>
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 00000000..0760531d
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,9 @@
+import slugify from 'slugify';
+
+/**
+ * Custom function that returns an author page URL.
+ */
+export const getAuthorPageUrl = (author: string): string => {
+  const authorSlug = slugify(author.trim(), { lower: true });
+  return `https://www.reuters.com/authors/${authorSlug}/`;
+};

From afb6270b46f56c32f10cfcb60898951867f84a84 Mon Sep 17 00:00:00 2001
From: MinamiFunakoshiTR <minami.funakoshi@thomsonreuters.com>
Date: Wed, 19 Mar 2025 08:53:08 -0700
Subject: [PATCH 5/5] cleaned up headline docs

---
 src/components/Byline/Byline.mdx              |  4 +-
 src/components/Byline/Byline.stories.svelte   |  1 +
 src/components/Headline/Headline.mdx          | 88 ++++++++++++-------
 .../Headline/Headline.stories.svelte          | 31 +++----
 src/components/Headline/Headline.svelte       | 39 +++++---
 5 files changed, 102 insertions(+), 61 deletions(-)

diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
index 94106e99..3f812644 100644
--- a/src/components/Byline/Byline.mdx
+++ b/src/components/Byline/Byline.mdx
@@ -96,8 +96,8 @@ To hyperlink to different pages or email addresses, pass a custom function to th
   publishTime="2021-09-12T00:00:00Z"
   updateTime="2021-09-12T13:57:00Z"
   getAuthorPage={(author: string) => {
-    return `mailto:${author.replace(' ', '')}@example.com`;
-  }}
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
 />
 
 ```
diff --git a/src/components/Byline/Byline.stories.svelte b/src/components/Byline/Byline.stories.svelte
index 6a81142a..33705d5a 100644
--- a/src/components/Byline/Byline.stories.svelte
+++ b/src/components/Byline/Byline.stories.svelte
@@ -46,6 +46,7 @@
 <Story
   name="Custom author page"
   exportName="CustomAuthorPage"
+  tags={['!autodocs', '!dev']}
   args={{
     authors: [
       'Dea Bankova',
diff --git a/src/components/Headline/Headline.mdx b/src/components/Headline/Headline.mdx
index 1e648521..dd2f3e58 100644
--- a/src/components/Headline/Headline.mdx
+++ b/src/components/Headline/Headline.mdx
@@ -22,7 +22,11 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
 
 <Canvas of={HeadlineStories.Demo} />
 
-## With authors and publish time
+## With bylines and dateline
+
+Optionally, you can add authors and a publish time to the headline, which the `Headline` component internally renders with the [Byline](./?path=/docs/components-text-elements-byline--docs) component.
+
+> **Note**: Since `Headline` uses `Byline`, you can customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
 
 ```svelte
 <script>
@@ -33,14 +37,19 @@ The `Headline` component creates headlines in the legacy Reuters Graphics style,
   hed={'Reuters Graphics Interactive'}
   dek={'The beginning of a beautiful page'}
   section={'Global news'}
-  authors={['Dea Bankova', 'Aditi Bhandari']}
+  authors={['Jane Doe']}
   publishTime={new Date('2020-01-01').toISOString()}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
 />
 ```
 
-## With custom hed
+<Canvas of={HeadlineStories.Byline} />
 
-Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with completely custom markup.
+## Custom hed and dek
+
+Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to override those elements with custom elements.
 
 ```svelte
 <script>
@@ -48,18 +57,26 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
 </script>
 
 <Headline width="wide">
-  <h1 class="custom-hed" slot="hed">
-    <span class="small block text-base">The secret to</span>
-    “The Nutcracker's”
-    <span class="small block text-base fpt-1">success</span>
-  </h1>
-  <p class="custom-dek !fmt-3" slot="dek">
-    How “The Nutcracker” ballet became an<span
-      class="font-medium mx-1 px-1.5 py-1">American holday staple</span
-    >and a financial pillar of ballet companies across the country
-  </p>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1 class="custom-hed">
+      <span class="small block text-base">The secret to</span>
+      “The Nutcracker's”
+      <span class="small block text-base fpt-1">success</span>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <p class="custom-dek !fmt-3">
+      How “The Nutcracker” ballet became an<span
+        class="font-medium mx-1 px-1.5 py-1">American holday staple</span
+      >and a financial pillar of ballet companies across the country
+    </p>
+  {/snippet}
 </Headline>
 
+<!-- Custom styles -->
 <style lang="scss">
   .custom-hed {
     line-height: 0.9;
@@ -72,9 +89,11 @@ Use the `hed` and/or `dek` [snippets](https://svelte.dev/docs/svelte/snippet) to
 </style>
 ```
 
+<Canvas of={HeadlineStories.CustomHedDek} />
+
 ## With crown image
 
-Add a crown image in the `crown` named slot and override the headline in the `hed` named slot.
+To add a crown image, use the `crown` [snippet](https://svelte.dev/docs/svelte/snippet).
 
 ```svelte
 <script>
@@ -82,20 +101,25 @@ Add a crown image in the `crown` named slot and override the headline in the `he
   import { assets } from '$app/paths';
 </script>
 
-<Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+<Headline
+  class="!fmt-3"
+  hed="Europa"
+  publishTime={new Date('2020-01-01').toISOString()}
+>
   <!-- Add a crown -->
-  <img
-    slot="crown"
-    src={crownImgSrc}
-    width="100"
-    class="mx-auto mb-0"
-    alt="Illustration of Europe"
-  />
-  <!-- Override the hed with a named slot -->
-  <h1 slot="hed" class="!font-serif !tracking-wide">Europa</h1>
+  {#snippet crown()}
+    <img
+      src={crownImgSrc}
+      width="100"
+      class="mx-auto mb-0"
+      alt="Illustration of Europe"
+    />
+  {/snippet}
 </Headline>
 ```
 
+<Canvas of={HeadlineStories.CrownImage} />
+
 ## With crown graphic
 
 Add a full graphic or any other component in the crown.
@@ -103,8 +127,9 @@ Add a full graphic or any other component in the crown.
 ```svelte
 <script>
   import { Headline } from '@reuters-graphics/graphics-components';
-  import Map from './ai2svelte/graphic.svelte';
-  import { assets } from '$app/paths';
+  import { assets } from '$app/paths'; // If in Graphis Kit
+
+  import Map from './ai2svelte/graphic.svelte'; // Import the crown graphic component
 </script>
 
 <Headline
@@ -117,8 +142,11 @@ Add a full graphic or any other component in the crown.
   publishTime={new Date('2022-03-04').toISOString()}
 >
   <!-- Add a crown graphic -->
-  <div slot="crown">
-    <Map assetsPath={assets} />
-  </div>
+  {#snippet crown()}
+    <!-- Pass `assetsPath` if in Graphics Kit -->
+    <Map assetsPath={assets || '/'} />
+  {/snippet}
 </Headline>
 ```
+
+<Canvas of={HeadlineStories.CrownGraphic} />
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index f2637248..0b48df75 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -32,25 +32,20 @@
   }}
 />
 
-<Story name="Dek">
+<Story name="With byline and dateline" exportName="Byline">
   <Headline
     hed={'Reuters Graphics Interactive'}
     dek={'The beginning of a beautiful page'}
     section={'Global news'}
-  />
-</Story>
-
-<Story name="Byline">
-  <Headline
-    hed={'Reuters Graphics Interactive'}
-    dek={'The beginning of a beautiful page'}
-    section={'Global news'}
-    authors={['Dea Bankova', 'Aditi Bhandari']}
+    authors={['Jane Doe']}
     publishTime={new Date('2020-01-01').toISOString()}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
   />
 </Story>
 
-<Story name="Custom hed" exportName="CustomHed">
+<Story name="Custom hed and dek" exportName="CustomHedDek">
   <Headline width="wide">
     {#snippet hed()}
       <h1 class="custom-hed">
@@ -70,7 +65,11 @@
 </Story>
 
 <Story name="Crown image" exportName="CrownImage">
-  <Headline class="!fmt-3" publishTime={new Date('2020-01-01').toISOString()}>
+  <Headline
+    class="!fmt-3"
+    hed="Europa"
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
     <!-- Add a crown -->
     {#snippet crown()}
       <img
@@ -80,10 +79,6 @@
         alt="Illustration of Europe"
       />
     {/snippet}
-    <!-- Override the hed with a snippet -->
-    {#snippet hed()}
-      <h1 class="!font-serif !tracking-wide">Europa</h1>
-    {/snippet}
   </Headline>
 </Story>
 
@@ -99,9 +94,7 @@
   >
     <!-- Add a crown graphic -->
     {#snippet crown()}
-      <div>
-        <Map />
-      </div>
+      <Map />
     {/snippet}
   </Headline>
 </Story>
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 02a8d7ef..07e77005 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -12,44 +12,60 @@
   interface Props {
     /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
     hed: string | Snippet;
-    /** Custom byline snippet */
-    byline?: Snippet;
+
     /** Add extra classes to the block tag to target it with custom CSS. */
     class?: string;
     /** Headline size: small, normal, big, bigger, biggest */
     hedSize?: HeadlineSize;
     /** Dek, parsed as a markdown string OR as a custom snippet. */
     dek?: string | Snippet;
-    /** Custom crown snippet */
-    crown?: Snippet;
+
     /** Section title */
     section?: string;
     /** Array of author names, which will be slugified to create links to Reuters author pages */
     authors?: string[];
-    /**
-     * Custom function that returns an author page URL.
-     */
-    getAuthorPage?: (author: string) => string;
+
     /** Publish time as a datetime string. */
     publishTime?: string;
     /** Update time as a datetime string. */
     updateTime?: string;
     /** Width of the headline: normal, wide, wider, widest */
     width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /** Custom crown snippet */
+    crown?: Snippet;
+    /**
+     * 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 = 'Reuters Graphics Interactive',
-    byline,
     class: cls = '',
     hedSize = 'normal',
     dek,
-    crown,
     section,
     authors = [],
     publishTime = '',
     updateTime = '',
     width = 'normal',
+    getAuthorPage,
+    crown,
+    byline,
+    published,
+    updated,
   }: Props = $props();
 
   // Set the headline text size class based on the `hedSize` prop
@@ -116,6 +132,9 @@
           {authors}
           {publishTime}
           {updateTime}
+          {getAuthorPage}
+          {published}
+          {updated}
           align="center"
         />
       {:else if byline}