diff --git a/bin/newComponent/template/YourComponent/YourComponent.svelte b/bin/newComponent/template/YourComponent/YourComponent.svelte
index 84337bc2..41965e94 100644
--- a/bin/newComponent/template/YourComponent/YourComponent.svelte
+++ b/bin/newComponent/template/YourComponent/YourComponent.svelte
@@ -23,10 +23,16 @@
   /** Width of the component within the text well. */
   export let width: ContainerWidth = 'normal';
 
+  /** Add an ID to target with SCSS. */
+  export let id: string = '';
+
+  /** Add a class to target with SCSS. */
+  export let cls: string = '';
+
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block {width} cls="photo">
+<Block {width} {id} cls="photo {cls}">
   <div
     style:background-image={`url(${src})`}
     style:height={`${height}px`}
diff --git a/bin/newComponent/template/YourComponent/stories/docs/component.md b/bin/newComponent/template/YourComponent/stories/docs/component.md
index d95b9b42..c4832db8 100644
--- a/bin/newComponent/template/YourComponent/stories/docs/component.md
+++ b/bin/newComponent/template/YourComponent/stories/docs/component.md
@@ -15,7 +15,7 @@
 
 ```svelte
 <script>
-  import { YourComponent  } from '@reuters-graphics/graphics-svelte-components';
+  import { YourComponent } from '@reuters-graphics/graphics-components';
 </script>
 
 
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index d2e12e99..326a86b6 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -102,16 +102,16 @@
   const move = (e) => {
     if (sliding && imgOffset) {
       const el = e.touches ? e.touches[0] : e;
-      const figureOffset = figure ?
-        parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2)) :
-        0;
+      const figureOffset = figure
+        ? parseInt(window.getComputedStyle(figure).marginLeft.slice(0, -2))
+        : 0;
       let x = el.pageX - figureOffset - imgOffset.left;
       x =
-        x < handleMargin ?
-          handleMargin :
-          x > w - handleMargin ?
-            w - handleMargin :
-            x;
+        x < handleMargin
+          ? handleMargin
+          : x > w - handleMargin
+          ? w - handleMargin
+          : x;
       offset = x / w;
     }
   };
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index 96eeec09..63280fc9 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -21,9 +21,9 @@
 <style lang="scss" global>
   // Technically... we probably should unbind these styles from the component
   // and import them in the app through a separate scss file.
-  @import "../../scss/mixins";
+  @import '../../scss/mixins';
 
   div.article-block.body-text {
     @include body-text;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index 2ade8f1d..8afaa333 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -12,4 +12,4 @@
   onMount(() => {
     pymChild = new pym.Child({ polling });
   });
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index a74670d9..cd9b0392 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -24,8 +24,13 @@
    * Width of the background
    */
   export let backgroundWidth: ContainerWidth = 'fluid';
-  
-  type ForegroundPosition = 'middle' | 'left' | 'right' | 'left opposite' | 'right opposite';
+
+  type ForegroundPosition =
+    | 'middle'
+    | 'left'
+    | 'right'
+    | 'left opposite'
+    | 'right opposite';
 
   /**
    * Position of the foreground. One of: middle, left, right, left opposite or right opposite.
@@ -114,7 +119,7 @@
       >
         <div class="scroller-graphic-well">
           <Block
-            width={backgroundWidth}
+            width="{backgroundWidth}"
             cls="background-container step-{index + 1}"
           >
             <Background
@@ -123,7 +128,7 @@
               preload="{preload}"
               stackBackground="{stackBackground}"
             />
-        </Block>
+          </Block>
         </div>
       </div>
 
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
new file mode 100644
index 00000000..e1a6581e
--- /dev/null
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -0,0 +1,98 @@
+<script>
+  import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+
+  // @ts-ignore
+  import componentDocs from './stories/docs/component.md?raw';
+
+  import SimpleTimeline from './SimpleTimeline.svelte';
+
+  import { withComponentDocs } from '$docs/utils/withParams.js';
+
+  const meta = {
+    title: 'Components/SimpleTimeline',
+    component: SimpleTimeline,
+    ...withComponentDocs(componentDocs),
+    argTypes: {
+      symbolColour: { control: 'color' },
+      dateColour: { control: 'color' },
+    },
+  };
+
+  const dates = [
+    {
+      date: 'May 18',
+      events: [
+        {
+          title: 'Mariupol defenders surrender to Russia but their fate is uncertain',
+          titleLink: 'https://www.reuters.com/world/europe/ukrainian-troops-evacuate-mariupol-ceding-control-russia-2022-05-17/',
+          context: 'More than 250 Ukrainian fighters surrendered to Russian forces at the Azovstal steelworks in Mariupol after weeks of desperate resistance, bringing an end to the most devastating siege of Russia\'s war in Ukraine and allowing President Vladimir Putin to claim a rare victory in his faltering campaign.',
+        },
+      ],
+    },
+    {
+      date: 'May 10',
+      events: [
+        {
+          title: 'U.S. House passes $40 bln bill to bolster Ukraine against Russian invasion',
+          context: 'The U.S. House of Representatives approved more than $40 billion more aid for Ukraine on Tuesday, as Congress races to keep military aid flowing and boost the government in Kyiv as it grapples with the Russian invasion.',
+        },
+      ],
+    },
+    {
+      date: 'Mar. 3',
+      events: [
+        {
+          title: '"We are being destroyed," city council of Ukraine\'s Mariupol says',
+          context: 'Mariupol city council said Russian forces were constantly and deliberately shelling [vital civilian infrastructure](https://google.com) in the southeastern Ukrainian port, leaving it without water, heating or power and preventing bringing supplies or evacuating people.',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 27',
+      events: [
+        {
+          title: 'Russians push into Kharkiv',
+          titleLink: 'https://www.reuters.com/world/europe/western-allies-expel-key-russian-banks-global-system-ukraine-fights-2022-02-27/',
+        },
+        {
+          title: 'Human rights groups and Ukrainian ambassador accuse Russia of using cluster and vacuum bombs',
+        },
+      ],
+    },
+    {
+      date: 'Feb. 25',
+      events: [
+        {
+          title: 'NATO deploys more troops',
+          context: 'NATO leaders said on Friday they were deploying more troops to eastern Europe after Russia invaded Ukraine, saying that Moscow had lied about its intentions.',
+        },
+        {
+          title: 'Invasion continues',
+          context: 'Missiles pounded the Ukrainian capital as Russian forces pressed their advance and Ukrainian President Volodymyr Zelenskiy pleaded with the international community to do more, saying sanctions announced so far were not enough.\n\nRussian forces battered Ukrainian cities with artillery and cruise missiles but a defiant Zelenskiy said the capital Kyiv remained in Ukrainian hands.',
+        },
+      ],
+    }, {
+      date: 'Feb. 24',
+      events: [
+        {
+          title: 'Russia invades Ukraine',
+        },
+      ],
+    },
+  ];
+</script>
+
+<Meta {...meta} />
+
+<Template let:args>
+  <SimpleTimeline {...args} />
+</Template>
+
+<Story
+  name="Default"
+  args="{{
+    dates,
+    symbolColour: '#999',
+    dateColour: '#e05a39',
+  }}"
+/>
\ No newline at end of file
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
new file mode 100644
index 00000000..ce475eeb
--- /dev/null
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -0,0 +1,146 @@
+<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-SimpleTimeline--default) -->
+<script lang="ts">
+  interface Event {
+    title: string;
+    titleLink?: string;
+    context?: string;
+  }
+  interface EventDate {
+    date: string;
+    events: Event[];
+  }
+  /**
+   * An array of dates with events.
+   * @required
+   */
+  export let dates: EventDate[];
+  /**
+   * Set a colour for the timeline bullet symbols and line.
+   * @type {string}
+   */
+  export let symbolColour: string = '#ccc';
+  /**
+   * Set a colour for the date headings in the timeline.
+   * @type {string}
+   */
+  export let dateColour: string = 'var(--theme-colour-accent, red)';
+  /**
+   * Set a class to target with SCSS.
+   * @type {string}
+   */
+  export let cls: string = '';
+  /**
+   * Set an ID to target with SCSS.
+   * @type {string}
+   */
+  export let id: string = '';
+
+
+  import Block from '../Block/Block.svelte';
+  import Fa from 'svelte-fa/src/fa.svelte';
+  import { faLink } from '@fortawesome/free-solid-svg-icons';
+  import { marked } from 'marked';
+</script>
+
+<Block width="normal" id={id} cls="simple-timeline-container {cls}">
+  <div class="timeline" style="--symbol-colour:{symbolColour};">
+    {#each dates as date}
+      <div class="date">
+        <svg height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke="{symbolColour}"
+            stroke-width="2"
+            fill="transparent"></circle>
+        </svg>
+        <h5 style:color={dateColour}>{date.date}</h5>
+        {#each date.events as event}
+          <div class="event pb-2">
+            {#if event.titleLink}
+              <a href="{event.titleLink}" target="_blank">
+                <h6>
+                  {event.title} <span><Fa fw icon="{faLink}" /></span>
+                </h6>
+              </a>
+            {:else}
+              <h6>{event.title}</h6>
+            {/if}
+            {#if event.context}
+              {@html marked(event.context)}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style lang="scss">
+  .timeline {
+    margin-top: 2rem;
+    padding-left: 8px;
+    padding-right: 15px;
+    .date {
+      border-left: 1px solid var(--symbol-colour);
+      padding-left: 20px;
+      padding-bottom: 1rem;
+      position: relative;
+      margin: 0;
+      display: block;
+
+      &:last-child {
+        border-left: 1px solid var(--theme-colour-background, #fff);
+      }
+
+      h5 {
+        font-size: 0.95rem;
+        margin-top: 0px;
+      }
+    }
+    svg {
+      background-color: var(--theme-colour-background, #fff);
+      position: absolute;
+      top: -1px;
+      left: -10px;
+    }
+    div.event {
+      h6 {
+        margin: 0;
+        font-size: 1.2rem;
+        color: var(--theme-colour-text-primary, #666);
+      }
+      a {
+        color: var(--theme-colour-text-primary, #666);
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      a h6 {
+        span {
+          opacity: 0.5;
+          font-size: 1rem;
+        }
+        &:hover span {
+          opacity: 0.8;
+        }
+      }
+      :global(p) {
+        margin-top: 0;
+        margin-bottom: 0.7rem;
+        font-size: 1rem;
+        font-weight: 300;
+        color: var(--theme-colour-text-primary, #666);
+        font-family: var(--theme-font-family-sans-serif);
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+      }
+      :global(a) {
+        color: var(--theme-colour-text-primary, #666);
+      }
+    }
+  }
+</style>
diff --git a/src/components/SimpleTimeline/stories/docs/component.md b/src/components/SimpleTimeline/stories/docs/component.md
new file mode 100644
index 00000000..8168bb16
--- /dev/null
+++ b/src/components/SimpleTimeline/stories/docs/component.md
@@ -0,0 +1,25 @@
+A simple, clean text timeline.
+
+```svelte
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+
+  const dates = [
+    {
+      date: 'May 18',
+      events: [
+        {
+          title: 'A title for the event',
+          titleLink: 'https://...', // optional
+          context: 'Lorem ipsum...', // optional
+        },
+        // More events...
+      ],
+    },
+    // More dates...
+  ];
+</script>
+
+
+<SimpleTimeline dates={dates} symbolColour="#999" dateColour="rgb(224, 90, 57)" />
+```
diff --git a/src/components/SimpleTimeline/stories/shark.jpg b/src/components/SimpleTimeline/stories/shark.jpg
new file mode 100644
index 00000000..6d32b7fe
Binary files /dev/null and b/src/components/SimpleTimeline/stories/shark.jpg differ
diff --git a/src/components/Spinner/Spinner.svelte b/src/components/Spinner/Spinner.svelte
index d72ba3c1..6f80376c 100644
--- a/src/components/Spinner/Spinner.svelte
+++ b/src/components/Spinner/Spinner.svelte
@@ -22,7 +22,7 @@
 
 <div
   style:width="100%"
-  style:height={`${(width + (containerPadding * 2))}px`}
+  style:height="{`${width + containerPadding * 2}px`}"
   class="component-container"
 >
   <div
diff --git a/src/components/Video/Video.svelte b/src/components/Video/Video.svelte
index ef802918..6a9c5499 100644
--- a/src/components/Video/Video.svelte
+++ b/src/components/Video/Video.svelte
@@ -164,9 +164,9 @@
                   on:pausePlayEvent="{pausePlayEvent}"
                   paused="{paused}"
                   clickedOnPauseBtn="{clickedOnPauseBtn}"
-                  controlsOpacity="{hoverToSeeControls ?
-                    interactiveControlsOpacity :
-                    controlsOpacity}"
+                  controlsOpacity="{hoverToSeeControls
+                    ? interactiveControlsOpacity
+                    : controlsOpacity}"
                   controlsPosition="{controlsPosition}"
                   widthVideoContainer="{widthVideoContainer}"
                   heightVideoContainer="{heightVideoContainer}"
@@ -197,9 +197,9 @@
               bind:paused
               bind:clientWidth="{widthVideo}"
               bind:clientHeight="{heightVideo}"
-              style="{showControls ?
-                'position: relative' :
-                'position: relative'}"
+              style="{showControls
+                ? 'position: relative'
+                : 'position: relative'}"
             >
               <track kind="captions" />
             </video>
diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
index 3db72380..72c7f26c 100644
--- a/src/components/Visible/Visible.svelte
+++ b/src/components/Visible/Visible.svelte
@@ -17,10 +17,10 @@
   export let right = 0;
   /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
   export let threshold = 0;
-  
+
   let visible = false;
   let container: HTMLElement;
-  
+
   onMount(() => {
     if (typeof IntersectionObserver !== 'undefined') {
       const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
diff --git a/src/index.js b/src/index.js
index 91614905..1bfc0342 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,7 @@ export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.sve
 export { default as Scroller } from './components/Scroller/Scroller.svelte';
 export { default as SEO } from './components/SEO/SEO.svelte';
 export { default as Sharer } from './components/Sharer/Sharer.svelte';
+export { default as SimpleTimeline } from './components/SimpleTimeline/SimpleTimeline.svelte';
 export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
 export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
 export { default as Spinner } from './components/Spinner/Spinner.svelte';