diff --git a/package.json b/package.json
index 7f153fc7..297457b4 100644
--- a/package.json
+++ b/package.json
@@ -82,6 +82,7 @@
     "bootstrap": "^5.2.0",
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
+    "journalize": "^2.5.1",
     "lodash-es": "^4.17.21",
     "lottie-web": "^5.7.13",
     "marked": "^4.0.8",
@@ -214,4 +215,4 @@
     ".": "./dist/index.js"
   },
   "svelte": "./dist/index.js"
-}
\ No newline at end of file
+}
diff --git a/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
new file mode 100644
index 00000000..6869e28b
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/HeadlineBreakingNews.svelte
@@ -0,0 +1,153 @@
+<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
new file mode 100644
index 00000000..c1dff89a
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/HeadlineNreakingNews.stories.svelte
@@ -0,0 +1,93 @@
+<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
new file mode 100644
index 00000000..6b70611c
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/component.md
@@ -0,0 +1,12 @@
+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
new file mode 100644
index 00000000..1c60d0a0
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/quickit.md
@@ -0,0 +1,47 @@
+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
new file mode 100644
index 00000000..1d25c4dc
--- /dev/null
+++ b/src/components/HeadlineBreakingNews/stories/docs/withByline.md
@@ -0,0 +1,20 @@
+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/yarn.lock b/yarn.lock
index 44bbb63a..ef3cfe67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7748,6 +7748,11 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
+journalize@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/journalize/-/journalize-2.5.1.tgz#d9c70452566e2b40f99b02b0263281c493c8c9b0"
+  integrity sha512-ha19m4ZiRitEsdMuwk0QMyjqTVicsJUJxz9TNkWBFJHIKAgEmXBJ8A6XR/GM1oW9fpRoGCBNLYej5U7ZdnDBMg==
+
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"