diff --git a/package.json b/package.json
index 297457b4..fe69f50e 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,7 @@
     "marked": "^4.0.8",
     "proper-url-join": "^2.1.1",
     "pym.js": "^1.3.2",
+    "slugify": "^1.6.5",
     "svelte-fa": "^2.4.0",
     "svelte-intersection-observer": "^0.10.0",
     "svelte-search": "^2.0.1",
diff --git a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
deleted file mode 100644
index 6869e28b..00000000
--- a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
+++ /dev/null
@@ -1,153 +0,0 @@
-<script lang="ts">
-  /**
-   * Headline, parsed as an _inline_ markdown string in an `h1` element.
-   * @type {string}
-   */
-  export let hed: string = 'Reuters Graphics Interactive';
-  /**
-   * Section title, defaulting to 'Reuters Graphics'. Change to custom title if desired.
-   * @type {string}
-   */
-  export let section: string = 'Reuters Graphics';
-  /**
-   * Section url, parsed as a string, defaulting to graphics.reuters.com. Set to blank to remove link.
-   * @type {string}
-   */
-  export let sectionUrl: string = 'https://graphics.reuters.com/';
-
-  /**
-   * Margin bottom, passed as CSS string, defining distance between Headline and body; can be negative.
-   * @type {string}
-   */
-  export let marginBottom = '4rem';
-
-  import Block from '../Block/Block.svelte';
-  import { marked } from 'marked';
-</script>
-
-<Block cls="mb-1" width="normal">
-  <header class="headline" style="--marginBottom: {marginBottom};">
-    <div class="title">
-      {#if section}
-        <p class="{'section-title'}">
-          {#if sectionUrl}
-            <a href="{sectionUrl}">{section}</a>
-          {:else}
-            {section}
-          {/if}
-        </p>
-      {/if}
-      {#if hed}
-        <h1>{@html marked.parseInline(hed)}</h1>
-      {/if}
-    </div>
-    {#if $$slots.byline || $$slots.dateline}
-      <aside class="article-metadata" class:pt-1="{false}">
-        {#if $$slots.byline}
-          <div class="byline-container">
-            <div class="byline">
-              <!-- Byline named slot -->
-              <slot name="byline" />
-            </div>
-          </div>
-        {/if}
-        {#if $$slots.dateline}
-          <div class="dateline-container">
-            <div class="published">
-              <!-- Dateline named slot -->
-              <slot name="dateline" />
-            </div>
-          </div>
-        {/if}
-      </aside>
-    {/if}
-  </header>
-</Block>
-
-<style lang="scss">
-  @import '../../scss/colours/thematic/tr';
-  @import '../../scss/fonts/variables';
-
-  // Official styles
-  header.headline {
-    text-align: center;
-    margin-top: 4rem;
-    margin-bottom: var(--marginBottom);
-    color: var(--theme-colour-text-primary, $tr-dark-grey);
-    @media (max-width: 900px) {
-      margin-bottom: 2rem;
-    }
-
-    :global {
-      h1 {
-        text-align: left;
-        font-size: 3rem;
-        line-height: 1.14;
-        margin: 0.6rem 0;
-        font-family: var(--theme-font-family-hed, $font-family-display);
-        color: var(--theme-colour-text-primary, $tr-dark-grey);
-        @media (max-width: 900px) {
-          font-size: 2.6rem;
-        }
-        @media (max-width: 600px) {
-          font-size: 2.1rem;
-          font-weight: 500;
-        }
-      }
-
-      p {
-        font-family: var(--theme-font-family-subhed, $font-family-display);
-        color: var(--theme-colour-text-primary, $tr-dark-grey);
-        margin: 0;
-        font-weight: 200;
-
-        &.section-title {
-          font-weight: 800;
-          color: var(--theme-colour-accent, $tr-dark-red);
-          text-align: left;
-          color: #999;
-          font-size: 16px;
-          a {
-            color: #999;
-            text-decoration: none;
-          }
-        }
-      }
-    }
-    .article-metadata {
-      padding: 40px 0;
-      padding-top: 0;
-      font-family: var(--theme-font-family-note, $font-family-display);
-      color: var(--theme-colour-text-primary, $tr-dark-grey);
-      text-align: left;
-
-      .byline-container {
-        margin-bottom: 2px;
-      }
-
-      .byline {
-        font-weight: bold;
-        //color: #404040;
-        font-weight: 600;
-        strong {
-          font-weight: 600;
-        }
-        :global {
-          a {
-            color: var(--theme-colour-text-primary, $tr-dark-grey);
-            text-decoration: none;
-          }
-        }
-      }
-
-      .dateline-container {
-        text-transform: uppercase;
-        color: var(--theme-colour-text-secondary, $tr-medium-grey);
-        font-size: 0.8rem;
-        line-height: 1.2rem;
-        letter-spacing: 0.2px;
-        margin-top: 0px;
-      }
-    }
-  }
-</style>
diff --git a/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte b/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
deleted file mode 100644
index c1dff89a..00000000
--- a/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
+++ /dev/null
@@ -1,93 +0,0 @@
-<script>
-  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
-  import { apdate } from 'journalize';
-  import { marked } from 'marked';
-
-  // @ts-ignore
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore
-  import withByline from './stories/docs/withByline.md?raw';
-  // @ts-ignore
-  import quickitDocs from './stories/docs/quickit.md?raw';
-
-  import HeadlineBreakingNews from './HeadlineBreakingNews.svelte';
-
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  const meta = {
-    title: 'Components/HeadlineBreakingNews',
-    component: HeadlineBreakingNews,
-    ...withComponentDocs(componentDocs),
-  };
-
-  const content = {
-    Kicker: 'Global News',
-    KickerUrl: '',
-    Hed: 'Reuters Graphics Interactive',
-    Byline: 'Sherlock Holmes',
-    Published: '2022-09-12T08:30:00.000Z',
-    Updated: '',
-    MarginBottom: '2rem',
-  };
-</script>
-
-<Meta {...meta} />
-
-<Template let:args>
-  <HeadlineBreakingNews {...args} />
-</Template>
-
-<Story
-  name="Default"
-  args="{{
-    hed: 'Reuters Graphics interactive',
-  }}"
-/>
-
-<Story
-  name="With byline, dateline, without a link to Reuters Graphics"
-  {...withStoryDocs(withByline)}
->
-  <HeadlineBreakingNews
-    hed="{'Reuters Graphics Interactive'}"
-    section="{'World News'}"
-    sectionUrl=""
-  >
-    <!-- Use named slots to add a byline... -->
-    <span slot="byline">By <strong>Peppa Pig</strong></span>
-    <!-- ...and a dateline. -->
-    <span slot="dateline"
-      >Published <time datetime="{new Date('2020-01-01').toISOString()}"
-        >Jan. 1, 2020</time
-      ></span
-    >
-  </HeadlineBreakingNews>
-</Story>
-
-<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
-  <HeadlineBreakingNews
-    hed="{content.Hed}"
-    section="{content.Kicker}"
-    sectionUrl="{content.KickerUrl}"
-    marginBottom="{content.MarginBottom}"
-  >
-    <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
-    <div slot="dateline">
-      Published <time datetime="{content.Published}">
-        {apdate(new Date(content.Published))}</time
-      >
-      {#if content.Updated}
-        <br /> Updated
-        <time datetime="{content.Updated}">
-          {apdate(new Date(content.Updated))}
-        </time>
-      {/if}
-    </div>
-  </HeadlineBreakingNews>
-</Story>
-
-<style lang="scss">
-</style>
diff --git a/src/components/HeadlineBreakingNews/stories/docs/component.md b/src/components/HeadlineBreakingNews/stories/docs/component.md
deleted file mode 100644
index 6b70611c..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/component.md
+++ /dev/null
@@ -1,12 +0,0 @@
-Reuters Graphics headline for breaking news pages
-
-This is a simplified version of the `Headline` component. It doesn't allow for the addition of crown, the dek is removed, and the styles are
-simplified. It is meant to serve as a unifying style for quick turnaround pages.
-
-```svelte
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline hed="{'Reuters Graphics Interactive'}" />
-```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/quickit.md b/src/components/HeadlineBreakingNews/stories/docs/quickit.md
deleted file mode 100644
index 1c60d0a0..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/quickit.md
+++ /dev/null
@@ -1,47 +0,0 @@
-Setup your Google Doc to work with the `HeadlineBreakingNews` component.
-
-```yaml
-# Beginning of your Google doc
-Kicker: Global News
-KickerUrl:
-Hed: A beautiful page
-Byline: Sherlock Holmes
-Published: 2022-09-12T08:30:00.000Z
-Updated:
-MarginBottom: 2rem
-```
-
-Note that this works in exactly the same way as the `Headline` component, but for the extra prop of `KickerUrl` which you need to add if
-you don't want your kicker to be a link to Reuters Graphics. You can also additionally have a `MarginBottom` prop.
-
-```svelte
-<!-- App.svelte -->
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-
-  // These should be already imported for you.
-  import content from '$locales/en/content.json';
-  import { apdate } from 'journalize';
-  import { marked } from 'marked';
-</script>
-
-<HeadlineBreakingNews
-  section="{content.Kicker}"
-  sectionUrl="{content.KickerUrl}"
-  hed="{content.Hed}"
-  marginBottom="{content.MarginBottom}"
->
-  <span slot="byline">By {@html marked.parseInline(content.Byline)} </span>
-  <div slot="dateline">
-    Published <time datetime="{content.Published}">
-      {apdate(new Date(content.Published))}</time
-    >
-    {#if content.Updated}
-      <br /> Updated
-      <time datetime="{content.Updated}">
-        {apdate(new Date(content.Updated))}
-      </time>
-    {/if}
-  </div>
-</HeadlineBreakingNews>
-```
diff --git a/src/components/HeadlineBreakingNews/stories/docs/withByline.md b/src/components/HeadlineBreakingNews/stories/docs/withByline.md
deleted file mode 100644
index 1d25c4dc..00000000
--- a/src/components/HeadlineBreakingNews/stories/docs/withByline.md
+++ /dev/null
@@ -1,20 +0,0 @@
-Add a byline and dateline with `byline` and `dateline` named slots.
-If you don't want to display 'Global Graphics' with a link to graphics.reuters.com at the top, you can
-replace with a section title using the `section` prop and leaving the `sectionUrl` blank.
-
-```svelte
-<script>
-  import { HeadlineBreakingNews } from '@reuters-graphics/graphics-components';
-</script>
-
-<HeadlineBreakingNews
-  hed="{'Reuters Graphics Interactive'}"
-  section="{'World News'}"
-  sectionUrl=""
->
-  <!-- Use named slots to add a byline... -->
-  <span slot="byline">By <strong>Peppa Pig</strong></span>
-  <!-- ...and a dateline. -->
-  <span slot="dateline">Published Jan. 1, 2020</span>
-</HeadlineBreakingNews>
-```
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
new file mode 100644
index 00000000..495b0647
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -0,0 +1,66 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+  // @ts-ignore
+  import quickitDocs from './stories/docs/quickit.md?raw';
+
+  import SiteHeadline from './SiteHeadline.svelte';
+
+  import {
+    withComponentDocs,
+    withStoryDocs,
+  } from '$lib/docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SiteHeadline',
+    component: SiteHeadline,
+    ...withComponentDocs(componentDocs),
+  };
+
+  const content = {
+    Section: 'Global News',
+    SectionUrl: '',
+    Hed: 'A beautiful page',
+    Authors: 'Samuel Granados, Dea Bankova',
+    Published: '2022-09-12T08:30:00.000Z',
+    Updated: '',
+  };
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SiteHeadline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    section: 'Graphics',
+    sectionUrl: 'https://graphics.reuters.com',
+    hed: 'Ukraine makes surprising gains in swift counteroffensive',
+    authors: [
+      'Dea Bankova',
+      'Michael Ovaska',
+      'Samuel Granados',
+      'Prasanta Kumar Dutta',
+    ],
+    publishTime: new Date('2021-09-12').toISOString(),
+    updateTime: new Date('2021-09-12T13:57:00').toISOString(),
+  }}"
+/>
+
+<Story name="🚀 QUICKIT" {...withStoryDocs(quickitDocs)}>
+  <SiteHeadline
+    hed="{content.Hed}"
+    section="{content.Section}"
+    sectionUrl="{content.SectionUrl}"
+    authors="{content.Authors.split(',')}"
+    publishTime="{content.Published}"
+  />
+</Story>
+
+<style lang="scss">
+</style>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
new file mode 100644
index 00000000..8c38a1e0
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -0,0 +1,223 @@
+<script lang="ts">
+  /**
+   * Headline
+   * @type {string}
+   * @required
+   */
+  export let hed: string = 'Reuters Graphics Interactive';
+  /**
+   * Section title.
+   * @type {string}
+   */
+  export let section: string = 'Graphics';
+  /**
+   * Section url, parsed as a string. Set to blank to remove link.
+   * @type {string}
+   */
+  export let sectionUrl: string = 'https://graphics.reuters.com';
+  /**
+   * 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 = '';
+  /**
+   * Add an id to to target with custom CSS.
+   * @type {string}
+   */
+  export let id: string = '';
+  /**
+   * Add extra classes to target with custom CSS.
+   * @type {string}
+   */
+  export let cls: string = '';
+
+  import Block from '../Block/Block.svelte';
+  import slugify from 'slugify';
+  import { apdate } from 'journalize';
+
+  const isValidDate = (datetime) => {
+    if (!datetime) return false;
+    if (!Date.parse(datetime)) return false;
+    return true;
+  };
+
+  const formatTime = (datetime) =>
+    new Date(datetime).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+      timeZoneName: 'short',
+    });
+
+  const areSameDay = (first, second) =>
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
+</script>
+
+<Block id="{id}" cls="headline-container {cls}" width="normal">
+  <header class="headline">
+    <div class="title">
+      {#if section}
+        <p class="section-title">
+          {#if sectionUrl}
+            <a href="{sectionUrl}">{section}</a>
+          {:else}
+            {section}
+          {/if}
+        </p>
+      {/if}
+      {#if hed}
+        <h1>{hed}</h1>
+      {/if}
+    </div>
+    <aside class="article-metadata">
+      <div class="byline-container">
+        <div class="byline">
+          By
+          {#if authors.length > 0}
+            {#each authors as author, i}
+              <a
+                href="https://www.reuters.com/authors/{slugify(author.trim(), {
+                  lower: true,
+                })}/"
+                rel="author"
+              >
+                {author.trim()}</a
+              >{#if authors.length > 1 && i < authors.length - 2},{/if}
+              {#if authors.length > 1 && i === authors.length - 2}and&nbsp;{/if}
+            {/each}
+          {:else}
+            Reuters
+          {/if}
+        </div>
+      </div>
+      <div class="dateline-container">
+        {#if isValidDate(publishTime)}
+          <div>
+            Published
+            <time datetime="{publishTime}">
+              {#if isValidDate(updateTime)}
+                {apdate(new Date(publishTime))}
+              {:else}
+                {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
+                  publishTime
+                )}
+              {/if}
+            </time>
+          </div>
+        {/if}
+        {#if isValidDate(publishTime) && isValidDate(updateTime)}
+          <div>
+            Last updated
+            <time datetime="{updateTime}">
+              {#if areSameDay(new Date(publishTime), new Date(updateTime))}
+                {formatTime(updateTime)}
+              {:else}
+                {apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(
+                  updateTime
+                )}
+              {/if}
+            </time>
+          </div>
+        {/if}
+      </div>
+    </aside>
+  </header>
+</Block>
+
+<style lang="scss">
+  @import '../../scss/colours/thematic/tr';
+  @import '../../scss/fonts/variables';
+
+  :global(div.article-block.headline-container) {
+    margin: 4rem auto;
+  }
+
+  // Official styles
+  header.headline {
+    text-align: center;
+    color: var(--theme-colour-text-primary, $tr-dark-grey);
+
+    h1 {
+      text-align: left;
+      font-size: 3rem;
+      line-height: 1.14;
+      margin: 0.6rem 0;
+      font-family: var(--theme-font-family-hed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      @media (max-width: 900px) {
+        font-size: 2.6rem;
+      }
+      @media (max-width: 600px) {
+        font-size: 2.1rem;
+        font-weight: 500;
+      }
+    }
+
+    p {
+      font-family: var(--theme-font-family-subhed, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      margin: 0;
+      font-weight: 200;
+
+      &.section-title {
+        font-weight: 800;
+        color: var(--theme-colour-text-secondary, $tr-light-grey);
+        text-align: left;
+        font-size: 1.2rem;
+        opacity: 0.8;
+        @media (max-width: 600px) {
+          font-size: 1rem;
+        }
+        a {
+          color: var(--theme-colour-text-secondary, $tr-light-grey);
+          text-decoration: none;
+        }
+      }
+    }
+    .article-metadata {
+      padding: 40px 0 0;
+      padding-top: 0;
+      font-family: var(--theme-font-family-note, $font-family-display);
+      color: var(--theme-colour-text-primary, $tr-dark-grey);
+      text-align: left;
+
+      .byline-container {
+        margin-bottom: 0px;
+      }
+
+      .byline {
+        font-weight: bold;
+        font-weight: 600;
+        font-size: 1rem;
+        line-height: 1.4rem;
+        a {
+          color: var(--theme-colour-text-primary, $tr-dark-grey);
+          text-decoration: none;
+          white-space: nowrap;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .dateline-container {
+        text-transform: uppercase;
+        color: var(--theme-colour-text-secondary, $tr-medium-grey);
+        font-size: 0.8rem;
+        line-height: 1.1rem;
+        letter-spacing: 0.3px;
+        margin-top: 0.5rem;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteHeadline/stories/docs/component.md b/src/components/SiteHeadline/stories/docs/component.md
new file mode 100644
index 00000000..d0e18795
--- /dev/null
+++ b/src/components/SiteHeadline/stories/docs/component.md
@@ -0,0 +1,11 @@
+A simplified Reuters Graphics headline, loosely modelled off our dotcom site.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround, usually shorter breaking news pages.
+
+```svelte
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline hed="{'Reuters Graphics Interactive'}" />
+```
diff --git a/src/components/SiteHeadline/stories/docs/quickit.md b/src/components/SiteHeadline/stories/docs/quickit.md
new file mode 100644
index 00000000..2520bd1a
--- /dev/null
+++ b/src/components/SiteHeadline/stories/docs/quickit.md
@@ -0,0 +1,28 @@
+Setup your Google Doc to work with the `SiteHeadline` component.
+
+```yaml
+# Beginning of your Google doc
+Section: Global News
+SectionUrl:
+Hed: A beautiful page
+Authors: Samuel Granados, Dea Bankova
+Published: 2022-09-12T08:30:00.000Z
+Updated:
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+
+  // These should be already imported for you.
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section="{content.Section}"
+  sectionUrl="{content.SectionUrl}"
+  hed="{content.Hed}"
+  authors="{content.Authors.split(',')}"
+/>
+```
diff --git a/yarn.lock b/yarn.lock
index ef3cfe67..3fa5a6a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10816,6 +10816,11 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slugify@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.5.tgz#c8f5c072bf2135b80703589b39a3d41451fbe8c8"
+  integrity sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ==
+
 snake-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"