diff --git a/.agents/instructions/ArchieML/ARCHIEML-BETTY.md b/.agents/instructions/ArchieML/ARCHIEML-BETTY.md
new file mode 100644
index 0000000..77e603f
--- /dev/null
+++ b/.agents/instructions/ArchieML/ARCHIEML-BETTY.md
@@ -0,0 +1,647 @@
+# ArchieML-Veronica Language Reference
+
+Veronica is a more specific dialect of [ArchieML](https://archieml.org) designed for newsrooms and content editors. While ArchieML is "forgiving," Veronica makes some syntax more explicit to prevent common parsing errors, especially when working with multiline content and nested structures.
+
+## Table of Contents
+
+- [Keys and Values](#keys-and-values)
+- [Objects](#objects)
+  - [Nested Objects](#nested-objects)
+  - [Named Closures](#named-closures-veronica-extension)
+- [Arrays](#arrays)
+  - [Arrays of Objects](#arrays-of-objects)
+  - [Arrays of Strings (Simple Arrays)](#arrays-of-strings-simple-arrays)
+  - [Freeform Arrays](#freeform-arrays)
+  - [Nested Arrays](#nested-arrays)
+  - [Named Array Closures](#named-array-closures-veronica-extension)
+  - [Repeating Keys in Arrays](#repeating-keys-in-arrays-veronica-extension)
+- [Multiline Values](#multiline-values)
+  - [Veronica Multiline Syntax](#veronica-multiline-syntax-veronica-extension)
+  - [ArchieML Multiline Syntax](#archieml-multiline-syntax)
+- [Comments and Ignored Content](#comments-and-ignored-content)
+- [Escaping](#escaping)
+- [Hooks and Customization](#hooks-and-customization)
+
+## Keys and Values
+
+The simplest form of ArchieML is a key-value pair. Keys are defined by a colon, with the key on the left and the value on the right.
+
+```
+title: My Article
+author: Jane Smith
+published: 2024-01-15
+```
+
+**Result:**
+```json
+{
+  "title": "My Article",
+  "author": "Jane Smith",
+  "published": "2024-01-15"
+}
+```
+
+### Key Rules
+
+- Keys can contain letters, numbers, underscores, hyphens, and Unicode characters
+- Keys **cannot** contain: whitespace, `{`, `}`, `[`, `]`, `:`, `.`, or `+`
+- Keys are case-sensitive (`Title` and `title` are different)
+- Whitespace around keys and values is automatically trimmed
+
+### Ignored Content
+
+Any text that doesn't match ArchieML syntax is ignored, allowing you to include notes and comments freely:
+
+```
+This is just a note that will be ignored.
+
+title: My Article
+Here's another note about the article.
+author: Jane Smith
+```
+
+## Objects
+
+### Dot Notation
+
+You can create nested objects using dot notation:
+
+```
+colors.red: #ff0000
+colors.green: #00ff00
+colors.blue: #0000ff
+```
+
+**Result:**
+```json
+{
+  "colors": {
+    "red": "#ff0000",
+    "green": "#00ff00",
+    "blue": "#0000ff"
+  }
+}
+```
+
+### Object Blocks
+
+For more complex objects, use curly braces:
+
+```
+{colors}
+red: #ff0000
+green: #00ff00
+blue: #0000ff
+{}
+```
+
+**Result:** Same as above.
+
+### Nested Objects
+
+Prepend a period (`.`) to a block name to nest it within the current object:
+
+```
+{author}
+name: Jane Smith
+email: jane@example.com
+
+{.social}
+twitter: @janesmith
+github: janesmith
+{}
+
+bio: Award-winning journalist
+{}
+```
+
+**Result:**
+```json
+{
+  "author": {
+    "name": "Jane Smith",
+    "email": "jane@example.com",
+    "social": {
+      "twitter": "@janesmith",
+      "github": "janesmith"
+    },
+    "bio": "Award-winning journalist"
+  }
+}
+```
+
+### Closing Objects
+
+You can close an object in several ways:
+
+1. **Empty braces** `{}` - closes the current object
+2. **Opening a new object** at the same level
+3. **Named closure** (Veronica extension) - see below
+
+### Named Closures (Veronica Extension)
+
+Veronica extends ArchieML with named closures, allowing you to close a specific object by name, even if you're nested several levels deep:
+
+```
+{outer}
+value: test
+
+{.middle}
+value: nested
+
+{.inner}
+value: deep
+{/middle}
+
+This closes middle and inner, returning to outer scope.
+stillOuter: yes
+{}
+```
+
+**Result:**
+```json
+{
+  "outer": {
+    "value": "test",
+    "middle": {
+      "value": "nested",
+      "inner": {
+        "value": "deep"
+      }
+    },
+    "stillOuter": "yes"
+  }
+}
+```
+
+**Important:** The slash must be flush with the opening brace: `{/name}` works, but `{ /name }` does not.
+
+## Arrays
+
+### Arrays of Objects
+
+Arrays are defined using square brackets. The first key that repeats signals the start of a new item:
+
+```
+[people]
+name: Alice
+age: 30
+
+name: Bob
+age: 25
+[]
+```
+
+**Result:**
+```json
+{
+  "people": [
+    {"name": "Alice", "age": 30},
+    {"name": "Bob", "age": 25}
+  ]
+}
+```
+
+### Arrays of Strings (Simple Arrays)
+
+For simple lists of strings, use asterisks:
+
+```
+[tags]
+* news
+* technology
+* AI
+[]
+```
+
+**Result:**
+```json
+{
+  "tags": ["news", "technology", "AI"]
+}
+```
+
+### Freeform Arrays
+
+Freeform arrays (marked with `[+arrayName]`) preserve the order of different types of content. They're useful for mixed content like articles with text, images, and pull quotes:
+
+```
+[+content]
+This is a paragraph of text.
+
+Another paragraph here.
+
+{.image}
+src: photo.jpg
+caption: A beautiful photo
+{}
+
+More text after the image.
+
+{.quote}
+text: An inspiring quotation
+author: Famous Person
+{}
+[]
+```
+
+**Result:**
+```json
+{
+  "content": [
+    {"type": "text", "value": "This is a paragraph of text."},
+    {"type": "text", "value": "Another paragraph here."},
+    {"type": "image", "value": {"src": "photo.jpg", "caption": "A beautiful photo"}},
+    {"type": "text", "value": "More text after the image."},
+    {"type": "quote", "value": {"text": "An inspiring quotation", "author": "Famous Person"}}
+  ]
+}
+```
+
+### Nested Arrays
+
+Prepend a period to an array name to nest it:
+
+```
+[sections]
+title: Introduction
+
+[.subsections]
+heading: Background
+content: Context here
+[]
+
+heading: Methodology
+content: How we did it
+[]
+
+[/sections]
+```
+
+**Result:**
+```json
+{
+  "sections": [
+    {
+      "title": "Introduction",
+      "subsections": [
+        {"heading": "Background", "content": "Context here"},
+        {"heading": "Methodology", "content": "How we did it"}
+      ]
+    }
+  ]
+}
+```
+
+### Named Array Closures (Veronica Extension)
+
+Like objects, arrays support named closures to jump out of nested structures:
+
+```
+[parent]
+value: test
+
+[.nested]
+* one
+* two
+[/parent]
+
+This is outside the parent array.
+```
+
+This is especially useful when you have deeply nested arrays and want to exit multiple levels at once.
+
+### Repeating Keys in Arrays (Veronica Extension)
+
+**This is a key difference from standard ArchieML.**
+
+In Veronica, arrays start a new item when **any** key is redefined, not just the first key:
+
+```
+[items]
+name: First
+description: First item
+color: red
+
+description: Second item
+name: Second
+color: blue
+[]
+```
+
+**Result:**
+```json
+{
+  "items": [
+    {"name": "First", "description": "First item", "color": "red"},
+    {"name": "Second", "description": "Second item", "color": "blue"}
+  ]
+}
+```
+
+In standard ArchieML, the second item would need to redefine `name` (the first key) to start a new item. Veronica is more flexible: redefining `description` also triggers a new item.
+
+## Multiline Values
+
+### Veronica Multiline Syntax (Veronica Extension)
+
+Veronica introduces an explicit multiline syntax that's less ambiguous than ArchieML's `:end` syntax:
+
+```
+description::
+This is the first line of my description.
+
+This is the second paragraph.
+
+This can contain [brackets] and {braces} safely.
+::description
+```
+
+**Result:**
+```json
+{
+  "description": "This is the first line of my description.\n\nThis is the second paragraph.\n\nThis can contain [brackets] and {braces} safely."
+}
+```
+
+**Syntax:**
+- Open with `key::` (key followed by double colon)
+- Write your content on following lines
+- Close with `::key` (double colon followed by the same key name)
+
+This syntax is more explicit and helps prevent accidentally consuming subsequent content.
+
+### ArchieML Multiline Syntax
+
+Veronica still supports the traditional ArchieML multiline syntax with `:end`:
+
+```
+description:
+This is a multiline value.
+It continues until :end is found.
+:end
+```
+
+**Important:** Within multiline blocks, ArchieML syntax is **not** parsed. To include literal backslashes or the `:end` marker, use a backslash escape:
+
+```
+code:
+To end a multiline, use \:end
+A literal backslash: \\
+:end
+```
+
+## Comments and Ignored Content
+
+### Block Comments
+
+Use `:skip` and `:endskip` to comment out entire sections:
+
+```
+title: My Article
+
+:skip
+This entire section is ignored.
+author: Will Not Parse
+{test}
+{}
+:endskip
+
+published: 2024-01-15
+```
+
+**Result:**
+```json
+{
+  "title": "My Article",
+  "published": "2024-01-15"
+}
+```
+
+### Stop Parsing
+
+Use `:ignore` to immediately stop parsing. Everything after `:ignore` is ignored:
+
+```
+title: My Article
+author: Jane Smith
+
+:ignore
+
+This and everything below is completely ignored.
+Nothing here will be parsed.
+```
+
+**Result:**
+```json
+{
+  "title": "My Article",
+  "author": "Jane Smith"
+}
+```
+
+## Escaping
+
+Use a backslash (`\`) to escape special ArchieML characters when they appear at the start of a line in a multiline context:
+
+```
+description:
+\[This is not an array]
+\{This is not an object}
+\:end is not the end marker
+The real end:
+:end
+```
+
+**Note:** Escaping only works in multiline contexts and only for characters at the start of a line. Outside of multiline blocks, special characters are generally ignored if they don't form valid syntax.
+
+## Hooks and Customization
+
+Veronica provides several hooks for customizing parsing behavior:
+
+### `onFieldName(name: string) => string`
+
+Transform field names during parsing. Useful for normalizing keys:
+
+```javascript
+const result = parse(text, {
+  onFieldName: (name) => name.toLowerCase()
+});
+```
+
+This is particularly helpful when working with Google Docs, which may capitalize the first word of a line.
+
+### `onValue(value: any, key: string) => any`
+
+Transform values during parsing. Useful for type coercion:
+
+```javascript
+const result = parse(text, {
+  onValue: (value, key) => {
+    // Auto-convert boolean strings
+    if (value === "true") return true;
+    if (value === "false") return false;
+
+    // Auto-convert numbers
+    if (/^\d+$/.test(value)) return parseInt(value);
+    if (/^\d+\.\d+$/.test(value)) return parseFloat(value);
+
+    // Auto-parse ISO dates
+    if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
+      return new Date(value);
+    }
+
+    return value;
+  }
+});
+```
+
+### `onEnter(keypath: string[], item: any) => void`
+
+Called when entering an object or array. The `keypath` is an array of strings representing the path from the root:
+
+```javascript
+const result = parse(text, {
+  onEnter: (keypath, item) => {
+    console.log(`Entering: ${keypath.join('.')}`);
+    console.log(`Type: ${Array.isArray(item) ? 'array' : 'object'}`);
+  }
+});
+```
+
+### `onExit(keypath: string[], item: any) => any`
+
+Called when exiting an object or array. This is ideal for validation and adding computed properties. If you return a value, it replaces the item in the output:
+
+```javascript
+const result = parse(text, {
+  onExit: (keypath, item) => {
+    // Validate required fields
+    if (keypath[0] === "person" && !item.name) {
+      throw new Error("Person must have a name");
+    }
+
+    // Add computed properties
+    if (keypath[0] === "person" && item.firstName && item.lastName) {
+      item.fullName = `${item.firstName} ${item.lastName}`;
+    }
+
+    return item; // Return the modified item
+  }
+});
+```
+
+**Example with validation:**
+
+```javascript
+const text = `
+{author}
+firstName: Jane
+lastName: Smith
+{/author}
+`;
+
+const result = parse(text, {
+  onExit: (keypath, item) => {
+    if (keypath[0] === "author") {
+      if (!item.firstName || !item.lastName) {
+        throw new Error("Author must have both firstName and lastName");
+      }
+      // Add computed fullName
+      item.fullName = `${item.firstName} ${item.lastName}`;
+    }
+    return item;
+  }
+});
+
+// Result: { author: { firstName: "Jane", lastName: "Smith", fullName: "Jane Smith" } }
+```
+
+### `verbose: boolean`
+
+Enable verbose logging to see detailed parsing information:
+
+```javascript
+const result = parse(text, {
+  verbose: true
+});
+```
+
+## Complete Example
+
+Here's a comprehensive example showing many Veronica features:
+
+```
+title: Understanding Veronica
+subtitle: A Guide to Structured Content
+published: 2024-01-15
+
+{metadata}
+tags.primary: archieml
+tags.secondary: parsing
+wordCount: 1500
+{/metadata}
+
+intro::
+This is a multiline introduction to Veronica.
+
+It supports multiple paragraphs and preserves formatting.
+::intro
+
+[sections]
+heading: Introduction
+body: Welcome to Veronica, a dialect of ArchieML.
+
+heading: Features
+body: Veronica adds several improvements over standard ArchieML.
+
+[.examples]
+* Named closures
+* Explicit multiline syntax
+* Better array handling
+[/sections]
+
+[+mixedContent]
+This is a text paragraph.
+
+{.callout}
+type: warning
+message: Remember to close your arrays!
+{}
+
+Another text paragraph here.
+[]
+
+{author}
+firstName: Jane
+lastName: Smith
+email: jane@example.com
+
+{.social}
+twitter: @janesmith
+github: janesmith
+{/author}
+
+footer: Copyright 2024
+```
+
+This example demonstrates:
+- Simple key-value pairs
+- Object blocks with nested objects
+- Dot notation for nested keys
+- Veronica multiline syntax (`key::` / `::key`)
+- Arrays of objects with nested arrays
+- Freeform arrays with mixed content
+- Named closures (`{/author}`, `[/sections]`)
+
+## Summary of Veronica Extensions
+
+Veronica extends ArchieML with these key features:
+
+1. **Named closures** - `{/name}` and `[/name]` to exit specific nesting levels
+2. **Explicit multiline syntax** - `key::` / `::key` delimiters for unambiguous multiline values
+3. **Flexible array items** - Any redefined key starts a new array item, not just the first key
+4. **Lifecycle hooks** - `onEnter` and `onExit` callbacks for validation and transformation
+5. **Value transformation** - `onFieldName` and `onValue` hooks for custom processing
+
+These changes make Veronica more predictable and robust when working with complex structured content, especially in collaborative editing environments like Google Docs.
diff --git a/.agents/instructions/graphics-components/llms.md b/.agents/instructions/graphics-components/llms.md
new file mode 100644
index 0000000..143584e
--- /dev/null
+++ b/.agents/instructions/graphics-components/llms.md
@@ -0,0 +1,483 @@
+---
+applyTo: "**/*.svelte"
+---
+
+## Graphics components
+
+The `@reuters-graphics/graphics-components` library includes pre-styled components for easily adding graphics or other elements to a page.
+
+### Adding new components to a page
+
+Components from the `@reuters-graphics/graphics-components` library are often added to the `#each` loop in `src/lib/App.svelte` that loops over `content.blocks`.
+
+`content` represents text content pulled from our CMS as JSON that is passed into components via props.
+
+Each block in `content.blocks` (i.e., "content block") is usually an object with a `type` property and additional properties specific to the block type. For example:
+
+- **Text Block**:
+  ```json
+  {
+    "type": "text",
+    "text": "This is a text block."
+  }
+  ```
+- **AI Graphic Block**
+  ```json
+  {
+    "type": "ai-graphic",
+    "chart": "AiMap",
+    "width": "normal",
+    "textWidth": "normal",
+    "title": "Optional title of the graphic",
+    "description": "Optional chatter describes more about the graphic.",
+    "notes": "Note: Optional note clarifying something in the data.\r\n\r\nSource: Optional source of the data.",
+    "altText": "Add a description of the graphic for screen readers. This is invisible on the page."
+  }
+  ```
+
+To add a new component to the loop:
+
+1. Import the component in the script portion of the Svelte component.
+2. Add a new `else if` condition in the `{#each content.blocks as block}` loop to handle the new block type.
+3. Pass the required props to the component, ensuring they match the structure of the content block object.
+
+For example, to add a new FeaturePhoto:
+
+```svelte
+<script lang="ts">
+  // ...
+
+  import { assets } from '$app/paths';
+
+  import {
+    Article,
+    Analytics,
+    BodyText,
+    EndNotes,
+    SiteHeadline,
+    GraphicBlock,
+    InlineAd,
+    FeautePhoto, // Add the component to others already imported
+  } from '@reuters-graphics/graphics-components';
+
+  // ...
+</script>
+
+{#each content.blocks as block}
+  <!-- Text block -->
+  {#if block.type === 'text'}
+    <BodyText text={block.text} />
+
+    <!-- Other block types -->
+
+    <!-- Add new FeaturePhoto block -->
+  {:else if block.type === 'feature-photo'}
+    <FeaturePhoto
+      src="{assets}/{block.src}"
+      alt={block.alt}
+      caption={block.caption}
+      credit={block.credit}
+    />
+  {:else}
+    <LogBlock message={`Unknown block type: "${block.type}"`} />
+  {/if}
+{/each}
+```
+
+### Paths to multimedia files
+
+Notice in the example above, we append the `assets` variable from SvelteKit's `$app/paths` module to the `src` path we got from the content block.
+
+Always assume that paths to local multimedia files including images and videos specified in content blocks are relative and must be prefixed with the `assets` variable to make them absolute. For example:
+
+```svelte
+<FeaturePhoto
+  src="{assets}/{block.src}"
+  alt={block.alt}
+  caption={block.caption}
+  credit={block.credit}
+/>
+```
+
+### Adding AI Graphics
+
+AI (i.e., Adobe Illustrator) graphics are added to the page by importing a component from the `src/lib/ai2svelte/` directory and then adding that graphic to the `aiCharts` object in `src/lib/App.svelte`. Then the object key for that chart is included in the content block's `chart` property.
+
+For example, to use an AI graphic from `src/lib/ai2svelte/map.svelte`:
+
+- The AI graphic component is imported and added to the `aiCharts` object in `src/lib/App.svelte`:
+
+  ```svelte
+  <script lang="ts">
+    // ...
+    import Map from './ai2svelte/map.svelte';
+
+    // ...
+
+    const aiCharts = {
+      // Other AI graphics ...
+      Map, // Added to the object
+    };
+  </script>
+  ```
+
+- Now the content block will specify the key to the chart in `aiCharts` in the `chart` property:
+
+  ```json
+  {
+    "type": "ai-graphic",
+    "chart": "Map",
+    "width": "normal",
+    "textWidth": "normal",
+    "title": "My map",
+    "description": "A map of the area",
+    "notes": "Source: DataSource.org",
+    "altText": "A map of a specific area showing something interesting"
+  }
+  ```
+
+- Now the `{:else if block.type === 'ai-graphic'}` block in `src/lib/App.svelte` uses that key to get the component:
+
+  ```svelte
+  {#each content.blocks as block}
+    <!-- Text block -->
+    {#if block.type === 'text'}
+      <BodyText text={block.text} />
+
+      <!-- Ai2svelte graphic block -->
+    {:else if block.type === 'ai-graphic'}
+      {#if !aiCharts[block.chart]}
+        <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
+      {:else}
+        {@const AiChart = aiCharts[block.chart]}
+        <GraphicBlock
+          id={block.chart}
+          width={containerWidth(block.width)}
+          title={block.title}
+          description={block.description}
+          notes={block.notes}
+          ariaDescription={block.altText}
+        >
+          <AiChart assetsPath={assets || '/'} />
+        </GraphicBlock>
+      {/if}
+
+      <!-- Other block types -->
+    {/if}
+  {/each}
+  ```
+
+### Refer to graphics components Storybook
+
+If you're unsure how to implement a particular graphics component, suggest the user check the Storybook documentation site, which is hosted on GitHub at https://reuters-graphics.github.io/graphics-components/.
+
+### Writing content blocks in our CMS
+
+While the text content in the `content` object is formatted as JSON, that data is written into our CMS (which is called "RNGS.io") using ArchieML syntax.
+
+**When suggesting what content blocks to add for components, please also suggest how to write that content in our CMS (RNGS.io) using ArchieML.**
+
+#### ArchieML
+
+ArchieML is a lightweight and intuitive markup language that allows for easy structuring of data within text documents. It is designed to be human-readable, very flexible, and is particularly useful for creating structured data by users who may never have seen ArchieML or any other markup language before.
+
+##### Basic Syntax
+
+- **Keys and Values**
+
+  - Definition: Key-value pairs are defined by a line starting with a key followed by a colon. Keys can include any unicode character except whitespace and specific characters used within ArchieML ({ } [ ] : . +).
+
+  - Example:
+
+    ```
+    key: This is a value
+    ☃: Unicode Snowman for you and you and you!
+    ```
+
+  - Parsed JSON:
+
+    ```json
+    {
+      "key": "This is a value",
+      "☃": "Unicode Snowman for you and you and you!"
+    }
+    ```
+
+  - Whitespace around keys and values is ignored. Keys are case-sensitive.
+
+- **Multi-line Values**: Multi-line values are anchored with `:end`. All whitespace is preserved.
+
+  - Example:
+
+    ```
+    key: value
+    More value
+
+    Even more value
+    :end
+    ```
+
+  - Parsed JSON:
+    ```json
+    {
+      "key": "value\n More value\n\nEven more value"
+    }
+    ```
+  - Escape Characters: Lines that would be interpreted as keys or commands can be escaped with a backslash `\`.
+    - Example:
+      ```
+      key: value
+      \:end
+      :end
+      ```
+    - Parsed JSON:
+      ```json
+      {
+        "key": "value\n:end"
+      }
+      ```
+
+- **Nested Structures**
+
+  - **Dot-Notation**: Use dot-notation for creating nested objects.
+    - Example:
+      ```
+      colors.red: #f00
+      colors.green: #0f0
+      colors.blue: #00f
+      ```
+    - Parsed JSON:
+      ```json
+      {
+        "colors": {
+          "red": "#f00",
+          "green": "#0f0",
+          "blue": "#00f"
+        }
+      }
+      ```
+  - **Object Blocks**: Group keys using object blocks defined by {}. Close an object with {} or by starting a new object.
+
+    - Example:
+
+      ```
+      {colors}
+      red: #f00
+      green: #0f0
+      blue: #00f
+      {}
+
+      {numbers}
+      one: 1
+      ten: 10
+      one-hundred: 100
+      {}
+      ```
+
+    - Parsed JSON:
+      ```json
+      {
+        "colors": {
+          "red": "#f00",
+          "green": "#0f0",
+          "blue": "#00f"
+        },
+        "numbers": {
+          "one": "1",
+          "ten": "10",
+          "one-hundred": "100"
+        }
+      }
+      ```
+
+- **Arrays**
+
+  - **Arrays of Objects**: Define arrays with brackets [arrayName]. New objects start when the first key is re-encountered.
+
+    - Example:
+
+      ```
+      [arrayName]
+      name: Amanda
+      age: 26
+
+      name: Tessa
+      age: 30
+      []
+      ```
+
+    - Parsed JSON:
+      ```json
+      {
+        "arrayName": [
+          {
+            "name": "Amanda",
+            "age": "26"
+          },
+          {
+            "name": "Tessa",
+            "age": "30"
+          }
+        ]
+      }
+      ```
+
+  - **Arrays of Strings**: Simple arrays use _ for elements. If _ is first, the array ignores key-value pairs.
+    - Example:
+      ```
+      [days]
+      * Sunday
+      * Monday
+      * Tuesday
+      * Wednesday
+      * Thursday
+      * Friday
+      * Saturday
+      []
+      ```
+    - Parsed JSON:
+      ```json
+      {
+        "days": [
+          "Sunday",
+          "Monday",
+          "Tuesday",
+          "Wednesday",
+          "Thursday",
+          "Friday",
+          "Saturday"
+        ]
+      }
+      ```
+  - **Nested Arrays**: Nested arrays use dot notation and are closed with `[]`.
+
+    - Example:
+
+      ```
+      [days]
+      name: Monday
+      [.tasks]
+      * Clean dishes
+      * Pick up room
+      []
+
+      name: Tuesday
+      [.tasks]
+      * Buy milk
+      []
+      ```
+
+    - Parsed JSON:
+      ```json
+      {
+        "days": [
+          {
+            "name": "Monday",
+            "tasks": ["Clean dishes", "Pick up room"]
+          },
+          {
+            "name": "Tuesday",
+            "tasks": ["Buy milk"]
+          }
+        ]
+      }
+      ```
+
+#### ArchieML conventions in our CMS
+
+Usually, content blocks are written in our CMS as objects inside an ArchieML array called `blocks` and always start with a `type:` key/value pair that defines the type of the content block object.
+
+For example, a user adding a content block for a FeaturePhoto component, might add the following to the existing `[blocks]` array in our CMS:
+
+```
+[blocks]
+
+type: feature-photo
+src: images/myPhoto.jpg
+alt: Alt text for my photo...
+
+... which extends over multiple lines.
+:end
+caption: A photo of something interesting.
+credit: Jane Doe
+
+[]
+```
+
+### Graphics components style tokens
+
+As well as Svelte components, the graphics components library includes a tailwind-like style system that can be used to style components and other page elements by adding a class or through SCSS mixins.
+
+These classes and mixins are defined as individual "tokens" representing the value for an individual style rule, like `font-size` or `color`. Each token sets just one style rule, and multiple tokens are combined together to style an element, like a `<div>`.
+
+Each set of tokens has several levels that represent the different values a style rule can take in our design system and are grouped in how they're named to make them easier to remember.
+
+For example, font weight tokens include `font-thin`, `font-light`, and `font-bold` which correspond to the style rules `font-weight: 100;`, `font-weight: 300;`, and `font-weight: 700;`, respectively. And those tokens can be applied via class name or SCSS mixin. For example:
+
+```svelte
+<!-- Bold text applied via class -->
+<p class="font-bold">Here is some bold text with some <span>thin text</span> in it!</p>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
+  
+  // Thin text applied via SCSS mixin
+  span {
+    @include mixins.font-thin;
+  }
+</style>
+```
+
+Not all our style tokens have both class names as well as SCSS mixins available to apply them.
+
+**Please use the tokens defined in the SCSS partials in the [@reuters-graphics/graphics-components/dist/scss/tokens/ directory](./../../../node_modules/@reuters-graphics/graphics-components/dist/scss/tokens/) liberally in instructions and code samples, BUT be sure the token exists before suggesting it. DO NOT MAKE UP TOKENS, CLASS NAMES OR SCSS MIXINS!**
+
+If you're not sure if there is a token to apply a particular style, you can refer the user to our Storybook documentation site for them at: https://reuters-graphics.github.io/graphics-components/?path=/docs/styles-intro--docs.
+
+#### Using style tokens
+
+To use a token to style an element, you can apply it directly to the element through a class name. For example, to apply the `text-primary` token (controlling font colour) you can apply it like this:
+
+```svelte
+<p class="text-primary">Lorem ipsum...</p>
+```
+
+OR you can apply some tokens via an SCSS mixin. For example:
+
+```svelte
+<p>Lorem ipsum...</p>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
+
+  p {
+    @include mixins.text-primary;
+  }
+</style>
+```
+
+**Be sure to always include the `@use` line that imports the SCSS mixins from the library in your SCSS/styling suggestions.**
+
+Please consider the SCSS mixins and classes defined in the [@reuters-graphics/graphics-components/dist/scss/tokens/ directory](./../../../node_modules/@reuters-graphics/graphics-components/dist/scss/tokens/).
+
+#### Spacing tokens
+
+We have a special set of tokens to control spacing, i.e., paddings and margins. They operate like tailwind's padding and margin system. For example, `mt-1` represents `margin-top: 0.25rem;` and `px-2` represents `padding-right: 0.5rem; padding-left: 0.5rem;`, etc. These tokens can be applied only through a class.
+
+These tokens are all defined as a combination of a prefix and a level. The prefix is something like `mb` for bottom margin or `py` for padding top and bottom. The level is a number representing how large the padding are margin should be. The levels go like this: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, then increasing by 4 each time up to 96. For example, the full token set for top margin would be `mt-0`, `mt-0.5`, `mt-1`, `mt-1.5`, and so on.
+
+We also have a set of spacing tokens designed to work with _fluid_ typography. These are prefixed beginning with the letter `f`, for example, `fmb-1` represents a _fluid_ margin bottom, `margin-bottom: clamp(0.31rem, 0.31rem + 0vw, 0.31rem);`. These tokens can be applied through a class AND an SCSS mixin. For example:
+
+```svelte
+<p class="fmy-3">Some text with margin and padding</p>
+
+<style lang="scss">
+  @use '@reuters-graphics/graphics-components/scss/mixins' as mixins;
+
+  p {
+    @include mixins.fpx-1;
+  }
+</style>
+```
+
+You should recommend fluid margin and padding tokens for spacing fluidly-sized typographical elements or elements that are spaced _next to_ fluidly-sized typographical elements. Typographical elements include page headings, paragraphs or elements containing text, generally.
diff --git a/.agents/skills/svelte-code-writer/SKILL.md b/.agents/skills/svelte-code-writer/SKILL.md
new file mode 100644
index 0000000..f90b996
--- /dev/null
+++ b/.agents/skills/svelte-code-writer/SKILL.md
@@ -0,0 +1,66 @@
+---
+name: svelte-code-writer
+description: CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (.svelte) or Svelte module (.svelte.ts/.svelte.js). If possible, this skill should be executed within the svelte-file-editor agent for optimal results.
+---
+
+# Svelte 5 Code Writer
+
+## CLI Tools
+
+You have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`:
+
+### List Documentation Sections
+
+```bash
+npx @sveltejs/mcp list-sections
+```
+
+Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths.
+
+### Get Documentation
+
+```bash
+npx @sveltejs/mcp get-documentation "<section1>,<section2>,..."
+```
+
+Retrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs.
+
+**Example:**
+
+```bash
+npx @sveltejs/mcp get-documentation "$state,$derived,$effect"
+```
+
+### Svelte Autofixer
+
+```bash
+npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options]
+```
+
+Analyzes Svelte code and suggests fixes for common issues.
+
+**Options:**
+
+- `--async` - Enable async Svelte mode (default: false)
+- `--svelte-version` - Target version: 4 or 5 (default: 5)
+
+**Examples:**
+
+```bash
+# Analyze inline code (escape $ as \$)
+npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>'
+
+# Analyze a file
+npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte
+
+# Target Svelte 4
+npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4
+```
+
+**Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\$` to prevent shell variable substitution.
+
+## Workflow
+
+1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics
+2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues
+3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component
\ No newline at end of file
diff --git a/.github/agents/Svelte.agent.md b/.github/agents/Svelte.agent.md
new file mode 100644
index 0000000..9f81164
--- /dev/null
+++ b/.github/agents/Svelte.agent.md
@@ -0,0 +1,201 @@
+---
+name: Svelte
+description: "Use when: building Svelte components, writing SvelteKit routes, debugging Svelte reactivity, migrating from Svelte 4 to 5, using runes ($state, $derived, $effect, $props), creating stores, animations, transitions, form actions, or any Svelte/SvelteKit question."
+argument-hint: "Describe the Svelte component or SvelteKit feature you want to build, fix, or explain."
+tools: [read, edit, search, todo, mcp_svelte_offici/*]
+---
+
+You are a Svelte expert tasked to build components and utilities for Svelte developers. If you need documentation for anything related to Svelte you can invoke the tool `get-documentation` with one of the following paths. However: before invoking the `get-documentation` tool, try to answer the users query using your own knowledge and the `svelte-autofixer` tool. Be mindful of how many section you request, since it is token-intensive!
+<available-docs>
+
+- title: Overview, use_cases: use title and path to estimate use case, path: ai/overview
+- title: Local setup, use_cases: use title and path to estimate use case, path: ai/local-setup
+- title: Remote setup, use_cases: use title and path to estimate use case, path: ai/remote-setup
+- title: Tools, use_cases: use title and path to estimate use case, path: ai/tools
+- title: Resources, use_cases: use title and path to estimate use case, path: ai/resources
+- title: Prompts, use_cases: use title and path to estimate use case, path: ai/prompts
+- title: Overview, use_cases: use title and path to estimate use case, path: ai/plugin
+- title: Subagent, use_cases: use title and path to estimate use case, path: ai/subagent
+- title: Overview, use_cases: use title and path to estimate use case, path: ai/opencode-plugin
+- title: Subagent, use_cases: use title and path to estimate use case, path: ai/opencode-subagent
+- title: Overview, use_cases: use title and path to estimate use case, path: ai/skills
+- title: Overview, use_cases: project setup, creating new svelte apps, scaffolding, cli tools, initializing projects, path: cli/overview
+- title: Frequently asked questions, use_cases: project setup, initializing new svelte projects, troubleshooting cli installation, package manager configuration, path: cli/faq
+- title: sv create, use_cases: project setup, starting new sveltekit app, initializing project, creating from playground, choosing project template, path: cli/sv-create
+- title: sv add, use_cases: project setup, adding features to existing projects, integrating tools, testing setup, styling setup, authentication, database setup, deployment adapters, path: cli/sv-add
+- title: sv check, use_cases: code quality, ci/cd pipelines, error checking, typescript projects, pre-commit hooks, finding unused css, accessibility auditing, production builds, path: cli/sv-check
+- title: sv migrate, use_cases: migration, upgrading svelte versions, upgrading sveltekit versions, modernizing codebase, svelte 3 to 4, svelte 4 to 5, sveltekit 1 to 2, adopting runes, refactoring deprecated apis, path: cli/sv-migrate
+- title: devtools-json, use_cases: development setup, chrome devtools integration, browser-based editing, local development workflow, debugging setup, path: cli/devtools-json
+- title: drizzle, use_cases: database setup, sql queries, orm integration, data modeling, postgresql, mysql, sqlite, server-side data access, database migrations, type-safe queries, path: cli/drizzle
+- title: eslint, use_cases: code quality, linting, error detection, project setup, code standards, team collaboration, typescript projects, path: cli/eslint
+- title: better-auth, use_cases: use title and path to estimate use case, path: cli/better-auth
+- title: mcp, use_cases: use title and path to estimate use case, path: cli/mcp
+- title: mdsvex, use_cases: blog, content sites, markdown rendering, documentation sites, technical writing, cms integration, article pages, path: cli/mdsvex
+- title: paraglide, use_cases: internationalization, multi-language sites, i18n, translation, localization, language switching, global apps, multilingual content, path: cli/paraglide
+- title: playwright, use_cases: browser testing, e2e testing, integration testing, test automation, quality assurance, ci/cd pipelines, testing user flows, path: cli/playwright
+- title: prettier, use_cases: code formatting, project setup, code style consistency, team collaboration, linting configuration, path: cli/prettier
+- title: storybook, use_cases: component development, design systems, ui library, isolated component testing, documentation, visual testing, component showcase, path: cli/storybook
+- title: sveltekit-adapter, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, static site generation, node server, vercel, cloudflare, netlify, path: cli/sveltekit-adapter
+- title: tailwindcss, use_cases: project setup, styling, css framework, rapid prototyping, utility-first css, design systems, responsive design, adding tailwind to svelte, path: cli/tailwind
+- title: vitest, use_cases: testing, unit tests, component testing, test setup, quality assurance, ci/cd pipelines, test-driven development, path: cli/vitest
+- title: add-on, use_cases: use title and path to estimate use case, path: cli/add-on
+- title: sv-utils, use_cases: use title and path to estimate use case, path: cli/sv-utils
+- title: Introduction, use_cases: learning sveltekit, project setup, understanding framework basics, choosing between svelte and sveltekit, getting started with full-stack apps, path: kit/introduction
+- title: Creating a project, use_cases: project setup, starting new sveltekit app, initial development environment, first-time sveltekit users, scaffolding projects, path: kit/creating-a-project
+- title: Project types, use_cases: deployment, project setup, choosing adapters, ssg, spa, ssr, serverless, mobile apps, desktop apps, pwa, offline apps, browser extensions, separate backend, docker containers, path: kit/project-types
+- title: Project structure, use_cases: project setup, understanding file structure, organizing code, starting new project, learning sveltekit basics, path: kit/project-structure
+- title: Web standards, use_cases: always, any sveltekit project, data fetching, forms, api routes, server-side rendering, deployment to various platforms, path: kit/web-standards
+- title: Routing, use_cases: routing, navigation, multi-page apps, project setup, file structure, api endpoints, data loading, layouts, error pages, always, path: kit/routing
+- title: Loading data, use_cases: data fetching, api calls, database queries, dynamic routes, page initialization, loading states, authentication checks, ssr data, form data, content rendering, path: kit/load
+- title: Form actions, use_cases: forms, user input, data submission, authentication, login systems, user registration, progressive enhancement, validation errors, path: kit/form-actions
+- title: Page options, use_cases: prerendering static sites, ssr configuration, spa setup, client-side rendering control, url trailing slash handling, adapter deployment config, build optimization, path: kit/page-options
+- title: State management, use_cases: sveltekit, server-side rendering, ssr, state management, authentication, data persistence, load functions, context api, navigation, component lifecycle, path: kit/state-management
+- title: Remote functions, use_cases: data fetching, server-side logic, database queries, type-safe client-server communication, forms, user input, mutations, authentication, crud operations, optimistic updates, path: kit/remote-functions
+- title: Building your app, use_cases: production builds, deployment preparation, build process optimization, adapter configuration, preview before deployment, path: kit/building-your-app
+- title: Adapters, use_cases: deployment, production builds, hosting setup, choosing deployment platform, configuring adapters, path: kit/adapters
+- title: Zero-config deployments, use_cases: deployment, production builds, hosting setup, choosing deployment platform, ci/cd configuration, path: kit/adapter-auto
+- title: Node servers, use_cases: deployment, production builds, node.js hosting, custom server setup, environment configuration, reverse proxy setup, docker deployment, systemd services, path: kit/adapter-node
+- title: Static site generation, use_cases: static site generation, ssg, prerendering, deployment, github pages, spa mode, blogs, documentation sites, marketing sites, path: kit/adapter-static
+- title: Single-page apps, use_cases: spa mode, single-page apps, client-only rendering, static hosting, mobile app wrappers, no server-side logic, adapter-static setup, fallback pages, path: kit/single-page-apps
+- title: Cloudflare, use_cases: deployment, cloudflare workers, cloudflare pages, hosting setup, production builds, serverless deployment, edge computing, path: kit/adapter-cloudflare
+- title: Cloudflare Workers, use_cases: deploying to cloudflare workers, cloudflare workers sites deployment, legacy cloudflare adapter, wrangler configuration, cloudflare platform bindings, path: kit/adapter-cloudflare-workers
+- title: Netlify, use_cases: deployment, netlify hosting, production builds, serverless functions, edge functions, static site hosting, path: kit/adapter-netlify
+- title: Vercel, use_cases: deployment, vercel hosting, production builds, serverless functions, edge functions, isr, image optimization, environment variables, path: kit/adapter-vercel
+- title: Writing adapters, use_cases: custom deployment, building adapters, unsupported platforms, adapter development, custom hosting environments, path: kit/writing-adapters
+- title: Advanced routing, use_cases: advanced routing, dynamic routes, file viewers, nested paths, custom 404 pages, url validation, route parameters, multi-level navigation, path: kit/advanced-routing
+- title: Hooks, use_cases: authentication, logging, error tracking, request interception, api proxying, custom routing, internationalization, database initialization, middleware logic, session management, path: kit/hooks
+- title: Errors, use_cases: error handling, custom error pages, 404 pages, api error responses, production error logging, error tracking, type-safe errors, path: kit/errors
+- title: Link options, use_cases: routing, navigation, multi-page apps, performance optimization, link preloading, forms with get method, search functionality, focus management, scroll behavior, path: kit/link-options
+- title: Service workers, use_cases: offline support, pwa, caching strategies, performance optimization, precaching assets, network resilience, progressive web apps, path: kit/service-workers
+- title: Server-only modules, use_cases: api keys, environment variables, sensitive data protection, backend security, preventing data leaks, server-side code isolation, path: kit/server-only-modules
+- title: Snapshots, use_cases: forms, user input, preserving form data, multi-step forms, navigation state, preventing data loss, textarea content, input fields, comment systems, surveys, path: kit/snapshots
+- title: Shallow routing, use_cases: modals, dialogs, image galleries, overlays, history-driven ui, mobile-friendly navigation, photo viewers, lightboxes, drawer menus, path: kit/shallow-routing
+- title: Observability, use_cases: performance monitoring, debugging, observability, tracing requests, production diagnostics, analyzing slow requests, finding bottlenecks, monitoring server-side operations, path: kit/observability
+- title: Packaging, use_cases: building component libraries, publishing npm packages, creating reusable svelte components, library development, package distribution, path: kit/packaging
+- title: Auth, use_cases: authentication, login systems, user management, session handling, jwt tokens, protected routes, user credentials, authorization checks, path: kit/auth
+- title: Performance, use_cases: performance optimization, slow loading pages, production deployment, debugging performance issues, reducing bundle size, improving load times, path: kit/performance
+- title: Icons, use_cases: icons, ui components, styling, css frameworks, tailwind, unocss, performance optimization, dependency management, path: kit/icons
+- title: Images, use_cases: image optimization, responsive images, performance, hero images, product photos, galleries, cms integration, cdn setup, asset management, path: kit/images
+- title: Accessibility, use_cases: always, any sveltekit project, screen reader support, keyboard navigation, multi-page apps, client-side routing, internationalization, multilingual sites, path: kit/accessibility
+- title: SEO, use_cases: seo optimization, search engine ranking, content sites, blogs, marketing sites, public-facing apps, sitemaps, amp pages, meta tags, performance optimization, path: kit/seo
+- title: Frequently asked questions, use_cases: troubleshooting package imports, library compatibility issues, client-side code execution, external api integration, middleware setup, database configuration, view transitions, yarn configuration, path: kit/faq
+- title: Integrations, use_cases: project setup, css preprocessors, postcss, scss, sass, less, stylus, typescript setup, adding integrations, tailwind, testing, auth, linting, formatting, path: kit/integrations
+- title: Breakpoint Debugging, use_cases: debugging, breakpoints, development workflow, troubleshooting issues, vscode setup, ide configuration, inspecting code execution, path: kit/debugging
+- title: Migrating to SvelteKit v2, use_cases: migration, upgrading from sveltekit 1 to 2, breaking changes, version updates, path: kit/migrating-to-sveltekit-2
+- title: Migrating from Sapper, use_cases: migrating from sapper, upgrading legacy projects, sapper to sveltekit conversion, project modernization, path: kit/migrating
+- title: Additional resources, use_cases: troubleshooting, getting help, finding examples, learning sveltekit, project templates, common issues, community support, path: kit/additional-resources
+- title: Glossary, use_cases: rendering strategies, performance optimization, deployment configuration, seo requirements, static sites, spas, server-side rendering, prerendering, edge deployment, pwa development, path: kit/glossary
+- title: @sveltejs/kit, use_cases: forms, form actions, server-side validation, form submission, error handling, redirects, json responses, http errors, server utilities, path: kit/@sveltejs-kit
+- title: @sveltejs/kit/hooks, use_cases: middleware, request processing, authentication chains, logging, multiple hooks, request/response transformation, path: kit/@sveltejs-kit-hooks
+- title: @sveltejs/kit/node/polyfills, use_cases: node.js environments, custom servers, non-standard runtimes, ssr setup, web api compatibility, polyfill requirements, path: kit/@sveltejs-kit-node-polyfills
+- title: @sveltejs/kit/node, use_cases: node.js adapter, custom server setup, http integration, streaming files, node deployment, server-side rendering with node, path: kit/@sveltejs-kit-node
+- title: @sveltejs/kit/vite, use_cases: project setup, vite configuration, initial sveltekit setup, build tooling, path: kit/@sveltejs-kit-vite
+- title: $app/environment, use_cases: always, conditional logic, client-side code, server-side code, build-time logic, prerendering, development vs production, environment detection, path: kit/$app-environment
+- title: $app/forms, use_cases: forms, user input, data submission, progressive enhancement, custom form handling, form validation, path: kit/$app-forms
+- title: $app/navigation, use_cases: routing, navigation, multi-page apps, programmatic navigation, data reloading, preloading, shallow routing, navigation lifecycle, scroll handling, view transitions, path: kit/$app-navigation
+- title: $app/paths, use_cases: static assets, images, fonts, public files, base path configuration, subdirectory deployment, cdn setup, asset urls, links, navigation, path: kit/$app-paths
+- title: $app/server, use_cases: remote functions, server-side logic, data fetching, form handling, api endpoints, client-server communication, prerendering, file reading, batch queries, path: kit/$app-server
+- title: $app/state, use_cases: routing, navigation, multi-page apps, loading states, url parameters, form handling, error states, version updates, page metadata, shallow routing, path: kit/$app-state
+- title: $app/stores, use_cases: legacy projects, sveltekit pre-2.12, migration from stores to runes, maintaining older codebases, accessing page data, navigation state, app version updates, path: kit/$app-stores
+- title: $app/types, use_cases: routing, navigation, type safety, route parameters, dynamic routes, link generation, pathname validation, multi-page apps, path: kit/$app-types
+- title: $env/dynamic/private, use_cases: api keys, secrets management, server-side config, environment variables, backend logic, deployment-specific settings, private data handling, path: kit/$env-dynamic-private
+- title: $env/dynamic/public, use_cases: environment variables, client-side config, runtime configuration, public api keys, deployment-specific settings, multi-environment apps, path: kit/$env-dynamic-public
+- title: $env/static/private, use_cases: server-side api keys, backend secrets, database credentials, private configuration, build-time optimization, server endpoints, authentication tokens, path: kit/$env-static-private
+- title: $env/static/public, use_cases: environment variables, public config, client-side data, api endpoints, build-time configuration, public constants, path: kit/$env-static-public
+- title: $lib, use_cases: project setup, component organization, importing shared components, reusable ui elements, code structure, path: kit/$lib
+- title: $service-worker, use_cases: offline support, pwa, service workers, caching strategies, progressive web apps, offline-first apps, path: kit/$service-worker
+- title: Configuration, use_cases: project setup, configuration, adapters, deployment, build settings, environment variables, routing customization, prerendering, csp security, csrf protection, path configuration, typescript setup, path: kit/configuration
+- title: Command Line Interface, use_cases: project setup, typescript configuration, generated types, ./$types imports, initial project configuration, path: kit/cli
+- title: Types, use_cases: typescript, type safety, route parameters, api endpoints, load functions, form actions, generated types, jsconfig setup, path: kit/types
+- title: Overview, use_cases: always, any svelte project, getting started, learning svelte, introduction, project setup, understanding framework basics, path: svelte/overview
+- title: Getting started, use_cases: project setup, starting new svelte project, initial installation, choosing between sveltekit and vite, editor configuration, path: svelte/getting-started
+- title: .svelte files, use_cases: always, any svelte project, component creation, project setup, learning svelte basics, path: svelte/svelte-files
+- title: .svelte.js and .svelte.ts files, use_cases: shared reactive state, reusable reactive logic, state management across components, global stores, custom reactive utilities, path: svelte/svelte-js-files
+- title: What are runes?, use_cases: always, any svelte 5 project, understanding core syntax, learning svelte 5, migration from svelte 4, path: svelte/what-are-runes
+- title: $state, use_cases: always, any svelte project, core reactivity, state management, counters, forms, todo apps, interactive ui, data updates, class-based components, path: svelte/$state
+- title: $derived, use_cases: always, any svelte project, computed values, reactive calculations, derived data, transforming state, dependent values, path: svelte/$derived
+- title: $effect, use_cases: canvas drawing, third-party library integration, dom manipulation, side effects, intervals, timers, network requests, analytics tracking, path: svelte/$effect
+- title: $props, use_cases: always, any svelte project, passing data to components, component communication, reusable components, component props, path: svelte/$props
+- title: $bindable, use_cases: forms, user input, two-way data binding, custom input components, parent-child communication, reusable form fields, path: svelte/$bindable
+- title: $inspect, use_cases: debugging, development, tracking state changes, reactive state monitoring, troubleshooting reactivity issues, path: svelte/$inspect
+- title: $host, use_cases: custom elements, web components, dispatching custom events, component library, framework-agnostic components, path: svelte/$host
+- title: Basic markup, use_cases: always, any svelte project, basic markup, html templating, component structure, attributes, events, props, text rendering, path: svelte/basic-markup
+- title: {#if ...}, use_cases: always, conditional rendering, showing/hiding content, dynamic ui, user permissions, loading states, error handling, form validation, path: svelte/if
+- title: {#each ...}, use_cases: always, lists, arrays, iteration, product listings, todos, tables, grids, dynamic content, shopping carts, user lists, comments, feeds, path: svelte/each
+- title: {#key ...}, use_cases: animations, transitions, component reinitialization, forcing component remount, value-based ui updates, resetting component state, path: svelte/key
+- title: {#await ...}, use_cases: async data fetching, api calls, loading states, promises, error handling, lazy loading components, dynamic imports, path: svelte/await
+- title: {#snippet ...}, use_cases: reusable markup, component composition, passing content to components, table rows, list items, conditional rendering, reducing duplication, path: svelte/snippet
+- title: {@render ...}, use_cases: reusable ui patterns, component composition, conditional rendering, fallback content, layout components, slot alternatives, template reuse, path: svelte/@render
+- title: {@html ...}, use_cases: rendering html strings, cms content, rich text editors, markdown to html, blog posts, wysiwyg output, sanitized html injection, dynamic html content, path: svelte/@html
+- title: {@attach ...}, use_cases: tooltips, popovers, dom manipulation, third-party libraries, canvas drawing, element lifecycle, interactive ui, custom directives, wrapper components, path: svelte/@attach
+- title: {@const ...}, use_cases: computed values in loops, derived calculations in blocks, local variables in each iterations, complex list rendering, path: svelte/@const
+- title: {@debug ...}, use_cases: debugging, development, troubleshooting, tracking state changes, monitoring variables, reactive data inspection, path: svelte/@debug
+- title: bind:, use_cases: forms, user input, two-way data binding, interactive ui, media players, file uploads, checkboxes, radio buttons, select dropdowns, contenteditable, dimension tracking, path: svelte/bind
+- title: use:, use_cases: custom directives, dom manipulation, third-party library integration, tooltips, click outside, gestures, focus management, element lifecycle hooks, path: svelte/use
+- title: transition:, use_cases: animations, interactive ui, modals, dropdowns, notifications, conditional content, show/hide elements, smooth state changes, path: svelte/transition
+- title: in: and out:, use_cases: animation, transitions, interactive ui, conditional rendering, independent enter/exit effects, modals, tooltips, notifications, path: svelte/in-and-out
+- title: animate:, use_cases: sortable lists, drag and drop, reorderable items, todo lists, kanban boards, playlist editors, priority queues, animated list reordering, path: svelte/animate
+- title: style:, use_cases: dynamic styling, conditional styles, theming, dark mode, responsive design, interactive ui, component styling, path: svelte/style
+- title: class, use_cases: always, conditional styling, dynamic classes, tailwind css, component styling, reusable components, responsive design, path: svelte/class
+- title: await, use_cases: async data fetching, loading states, server-side rendering, awaiting promises in components, async validation, concurrent data loading, path: svelte/await-expressions
+- title: Scoped styles, use_cases: always, styling components, scoped css, component-specific styles, preventing style conflicts, animations, keyframes, path: svelte/scoped-styles
+- title: Global styles, use_cases: global styles, third-party libraries, css resets, animations, styling body/html, overriding component styles, shared keyframes, base styles, path: svelte/global-styles
+- title: Custom properties, use_cases: theming, custom styling, reusable components, design systems, dynamic colors, component libraries, ui customization, path: svelte/custom-properties
+- title: Nested <style> elements, use_cases: component styling, scoped styles, dynamic styles, conditional styling, nested style tags, custom styling logic, path: svelte/nested-style-elements
+- title: <svelte:boundary>, use_cases: error handling, async data loading, loading states, error recovery, flaky components, error reporting, resilient ui, path: svelte/svelte-boundary
+- title: <svelte:window>, use_cases: keyboard shortcuts, scroll tracking, window resize handling, responsive layouts, online/offline detection, viewport dimensions, global event listeners, path: svelte/svelte-window
+- title: <svelte:document>, use_cases: document events, visibility tracking, fullscreen detection, pointer lock, focus management, document-level interactions, path: svelte/svelte-document
+- title: <svelte:body>, use_cases: mouse tracking, hover effects, cursor interactions, global body events, drag and drop, custom cursors, interactive backgrounds, body-level actions, path: svelte/svelte-body
+- title: <svelte:head>, use_cases: seo optimization, page titles, meta tags, social media sharing, dynamic head content, multi-page apps, blog posts, product pages, path: svelte/svelte-head
+- title: <svelte:element>, use_cases: dynamic content, cms integration, user-generated content, configurable ui, runtime element selection, flexible components, path: svelte/svelte-element
+- title: <svelte:options>, use_cases: migration, custom elements, web components, legacy mode compatibility, runes mode setup, svg components, mathml components, css injection control, path: svelte/svelte-options
+- title: Stores, use_cases: shared state, cross-component data, reactive values, async data streams, manual control over updates, rxjs integration, extracting logic, path: svelte/stores
+- title: Context, use_cases: shared state, avoiding prop drilling, component communication, theme providers, user context, authentication state, configuration sharing, deeply nested components, path: svelte/context
+- title: Lifecycle hooks, use_cases: component initialization, cleanup tasks, timers, subscriptions, dom measurements, chat windows, autoscroll features, migration from svelte 4, path: svelte/lifecycle-hooks
+- title: Imperative component API, use_cases: project setup, client-side rendering, server-side rendering, ssr, hydration, testing, programmatic component creation, tooltips, dynamic mounting, path: svelte/imperative-component-api
+- title: Hydratable data, use_cases: use title and path to estimate use case, path: svelte/hydratable
+- title: Best practices, use_cases: use title and path to estimate use case, path: svelte/best-practices
+- title: Testing, use_cases: testing, quality assurance, unit tests, integration tests, component tests, e2e tests, vitest setup, playwright setup, test automation, path: svelte/testing
+- title: TypeScript, use_cases: typescript setup, type safety, component props typing, generic components, wrapper components, dom type augmentation, project configuration, path: svelte/typescript
+- title: Custom elements, use_cases: web components, custom elements, component library, design system, framework-agnostic components, embedding svelte in non-svelte apps, shadow dom, path: svelte/custom-elements
+- title: Svelte 4 migration guide, use_cases: upgrading svelte 3 to 4, version migration, updating dependencies, breaking changes, legacy project maintenance, path: svelte/v4-migration-guide
+- title: Svelte 5 migration guide, use_cases: migrating from svelte 4 to 5, upgrading projects, learning svelte 5 syntax changes, runes migration, event handler updates, path: svelte/v5-migration-guide
+- title: Frequently asked questions, use_cases: getting started, learning svelte, beginner setup, project initialization, vs code setup, formatting, testing, routing, mobile apps, troubleshooting, community support, path: svelte/faq
+- title: svelte, use_cases: migration from svelte 4 to 5, upgrading legacy code, component lifecycle hooks, context api, mounting components, event dispatchers, typescript component types, path: svelte/svelte
+- title: svelte/action, use_cases: typescript types, actions, use directive, dom manipulation, element lifecycle, custom behaviors, third-party library integration, path: svelte/svelte-action
+- title: svelte/animate, use_cases: animated lists, sortable items, drag and drop, reordering elements, todo lists, kanban boards, playlist management, smooth position transitions, path: svelte/svelte-animate
+- title: svelte/attachments, use_cases: library development, component libraries, programmatic element manipulation, migrating from actions to attachments, spreading props onto elements, path: svelte/svelte-attachments
+- title: svelte/compiler, use_cases: build tools, custom compilers, ast manipulation, preprocessors, code transformation, migration scripts, syntax analysis, bundler plugins, dev tools, path: svelte/svelte-compiler
+- title: svelte/easing, use_cases: animations, transitions, custom easing, smooth motion, interactive ui, modals, dropdowns, carousels, page transitions, scroll effects, path: svelte/svelte-easing
+- title: svelte/events, use_cases: window events, document events, global event listeners, event delegation, programmatic event handling, cleanup functions, media queries, path: svelte/svelte-events
+- title: svelte/legacy, use_cases: migration from svelte 4 to svelte 5, upgrading legacy code, event modifiers, class components, imperative component instantiation, path: svelte/svelte-legacy
+- title: svelte/motion, use_cases: animation, smooth transitions, interactive ui, sliders, counters, physics-based motion, drag gestures, accessibility, reduced motion, path: svelte/svelte-motion
+- title: svelte/reactivity/window, use_cases: responsive design, viewport tracking, scroll effects, window resize handling, online/offline detection, zoom level tracking, path: svelte/svelte-reactivity-window
+- title: svelte/reactivity, use_cases: reactive data structures, state management with maps/sets, game boards, selection tracking, url manipulation, query params, real-time clocks, media queries, responsive design, path: svelte/svelte-reactivity
+- title: svelte/server, use_cases: server-side rendering, ssr, static site generation, seo optimization, initial page load, pre-rendering, node.js server, custom server setup, path: svelte/svelte-server
+- title: svelte/store, use_cases: state management, shared data, reactive stores, cross-component communication, global state, computed values, data synchronization, legacy svelte projects, path: svelte/svelte-store
+- title: svelte/transition, use_cases: animations, transitions, interactive ui, modals, dropdowns, tooltips, notifications, svg animations, list animations, page transitions, path: svelte/svelte-transition
+- title: Compiler errors, use_cases: animation, transitions, keyed each blocks, list animations, path: svelte/compiler-errors
+- title: Compiler warnings, use_cases: accessibility, a11y compliance, wcag standards, screen readers, keyboard navigation, aria attributes, semantic html, interactive elements, path: svelte/compiler-warnings
+- title: Runtime errors, use_cases: debugging errors, error handling, troubleshooting runtime issues, migration to svelte 5, component binding, effects and reactivity, path: svelte/runtime-errors
+- title: Runtime warnings, use_cases: debugging state proxies, console logging reactive values, inspecting state changes, development troubleshooting, path: svelte/runtime-warnings
+- title: Overview, use_cases: migrating from svelte 3/4 to svelte 5, maintaining legacy components, understanding deprecated features, gradual upgrade process, path: svelte/legacy-overview
+- title: Reactive let/var declarations, use_cases: migration, legacy svelte projects, upgrading from svelte 4, understanding old reactivity, maintaining existing code, learning runes differences, path: svelte/legacy-let
+- title: Reactive $: statements, use_cases: legacy mode, migration from svelte 4, reactive statements, computed values, derived state, side effects, path: svelte/legacy-reactive-assignments
+- title: export let, use_cases: legacy mode, migration from svelte 4, maintaining older projects, component props without runes, exporting component methods, renaming reserved word props, path: svelte/legacy-export-let
+- title: $$props and $$restProps, use_cases: legacy mode migration, component wrappers, prop forwarding, button components, reusable ui components, spreading props to child elements, path: svelte/legacy-$$props-and-$$restProps
+- title: on:, use_cases: legacy mode, event handling, button clicks, forms, user interactions, component communication, event forwarding, event modifiers, path: svelte/legacy-on
+- title: <slot>, use_cases: legacy mode, migrating from svelte 4, component composition, reusable components, passing content to components, modals, layouts, wrappers, path: svelte/legacy-slots
+- title: $$slots, use_cases: legacy mode, conditional slot rendering, optional content sections, checking if slots provided, migrating from legacy to runes, path: svelte/legacy-$$slots
+- title: <svelte:fragment>, use_cases: named slots, component composition, layout systems, avoiding wrapper divs, legacy svelte projects, slot content organization, path: svelte/legacy-svelte-fragment
+- title: <svelte:component>, use_cases: dynamic components, component switching, conditional rendering, legacy mode migration, tabbed interfaces, multi-step forms, path: svelte/legacy-svelte-component
+- title: <svelte:self>, use_cases: recursive components, tree structures, nested menus, file explorers, comment threads, hierarchical data, path: svelte/legacy-svelte-self
+- title: Imperative component API, use_cases: migration from svelte 3/4 to 5, legacy component api, maintaining old projects, understanding deprecated patterns, path: svelte/legacy-component-api
+
+</available-docs>
+
+These are the available documentation sections that `list-sections` will return, you do not need to call it again.
+
+Every time you write a Svelte component or a Svelte module you MUST invoke the `svelte-autofixer` tool providing the code. The tool will return a list of issues or suggestions. If there are any issues or suggestions you MUST fix them and call the tool again with the updated code. You MUST keep doing this until the tool returns no issues or suggestions. Only then you can return the code to the user.
+
+If you are not writing the code into a file, once you have the final version of the code ask the user if it wants to generate a playground link to quickly check the code in it and if it answer yes call the `playground-link` tool and return the url to the user nicely formatted. The playground link MUST be generated only once you have the final version of the code and you are ready to share it, it MUST include an entry point file called `App.svelte` where the main component should live. If you have multiple files to include in the playground link you can include them all at the root.
\ No newline at end of file
diff --git a/README.md b/README.md
index 7078b8f..8f1aff2 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,11 @@
 # Scratch
 ## (And the starting over thereof)
 
-We'll build this by hand, one part at a time.
\ No newline at end of file
+We'll build this by hand, one part at a time.
+
+## Usage
+
+```bash
+pnpm install
+pnpm run dev
+```
\ No newline at end of file
diff --git a/astro.config.mjs b/astro.config.mjs
index e12cfee..619c4a2 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,12 +1,25 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import path from 'path';
 
 import svelte from '@astrojs/svelte';
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    resolve: {
+      alias: {
+        '@components': path.resolve('./src/components'),
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          loadPaths: [path.resolve('./src/styles')]
+        }
+      }
+    }
+  },
   integrations: [svelte()],
-  devToolbar: {
-    enabled: false
-  }
+  devToolbar: { enabled: false }
 });
\ No newline at end of file
diff --git a/package.json b/package.json
index bc1c7aa..f207783 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,12 @@
     "@reuters-graphics/svelte-markdown": "^0.0.3",
     "@rferl/veronica": "github:rferl/veronica",
     "astro": "^6.3.1",
+    "journalize": "^2.6.0",
+    "maplibre-gl": "^5.24.0",
+    "pmtiles": "^4.3.0",
+    "slugify": "^1.6.9",
     "svelte": "^5.55.5",
+    "svelte-fa": "^4.0.4",
     "typescript": "^5.9.3"
   },
   "devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1c1a07f..922dc19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,9 +20,24 @@ importers:
       astro:
         specifier: ^6.3.1
         version: 6.3.1(rollup@4.60.3)(sass-embedded@1.99.0)(sass@1.99.0)
+      journalize:
+        specifier: ^2.6.0
+        version: 2.6.0
+      maplibre-gl:
+        specifier: ^5.24.0
+        version: 5.24.0
+      pmtiles:
+        specifier: ^4.3.0
+        version: 4.4.1
+      slugify:
+        specifier: ^1.6.9
+        version: 1.6.9
       svelte:
         specifier: ^5.55.5
         version: 5.55.5
+      svelte-fa:
+        specifier: ^4.0.4
+        version: 4.0.4(svelte@5.55.5)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -418,6 +433,42 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@mapbox/jsonlint-lines-primitives@2.0.2':
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+
+  '@mapbox/point-geometry@1.1.0':
+    resolution: {integrity: sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==}
+
+  '@mapbox/tiny-sdf@2.2.0':
+    resolution: {integrity: sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==}
+
+  '@mapbox/unitbezier@0.0.1':
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+
+  '@mapbox/vector-tile@2.0.4':
+    resolution: {integrity: sha512-AkOLcbgGTdXScosBWwmmD7cDlvOjkg/DetGva26pIRiZPdeJYjYKarIlb4uxVzi6bwHO6EWH82eZ5Nuv4T5DUg==}
+
+  '@mapbox/whoots-js@3.1.0':
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+
+  '@maplibre/geojson-vt@5.0.4':
+    resolution: {integrity: sha512-KGg9sma45S+stfH9vPCJk1J0lSDLWZgCT9Y8u8qWZJyjFlP8MNP1WGTxIMYJZjDvVT3PDn05kN1C95Sut1HpgQ==}
+
+  '@maplibre/geojson-vt@6.1.0':
+    resolution: {integrity: sha512-2eIY4gZxeKIVOZVNkAMb+5NgXhgsMQpOveTQAvnp53LYqHGJZDidk7Ew0Tged9PThidpbS+NFTh0g4zivhPDzQ==}
+
+  '@maplibre/maplibre-gl-style-spec@24.8.5':
+    resolution: {integrity: sha512-EzEJmMt6thioRH7GI9LWS7ahXTcAhAPGWCe6oTP2Ps4YnsXOOAfeqx854lZaiDnwURfHmcCKV1mr6oo0i23x6w==}
+    hasBin: true
+
+  '@maplibre/mlt@1.1.9':
+    resolution: {integrity: sha512-g/tD8EYJB97udq33ipuJ9a4Q7fcbZnTEnUrgnEc/tLMmEL+zaCbR+X5fkDBO2dgpaAMsLH179qE3UXg2N0Nc/g==}
+
+  '@maplibre/vt-pbf@4.3.0':
+    resolution: {integrity: sha512-jIvp8F5hQCcreqOOpEt42TJMUlsrEcpf/kI1T2v85YrQRV6PPXUcEXUg5karKtH6oh47XJZ4kHu56pUkOuqA7w==}
+
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
@@ -725,6 +776,9 @@ packages:
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
+  '@types/geojson@7946.0.16':
+    resolution: {integrity: sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -737,6 +791,9 @@ packages:
   '@types/nlcst@2.0.3':
     resolution: {integrity: sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==}
 
+  '@types/supercluster@7.1.3':
+    resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -915,6 +972,9 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
+  earcut@3.0.2:
+    resolution: {integrity: sha512-X7hshQbLyMJ/3RPhyObLARM2sNxxmRALLKx1+NVFFnQ9gKzmCrxm9+uLIAdBcvc8FNLpctqlQ2V6AE92Ol9UDQ==}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -976,6 +1036,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+
   flattie@1.1.1:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
@@ -999,6 +1062,9 @@ packages:
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
+  gl-matrix@3.4.4:
+    resolution: {integrity: sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==}
+
   h3@1.15.11:
     resolution: {integrity: sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==}
 
@@ -1085,13 +1151,22 @@ packages:
     resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
     engines: {node: '>=16'}
 
+  journalize@2.6.0:
+    resolution: {integrity: sha512-9Fi36vKj8MRtmqThQf8AK0GnTc1IYKCftyqwJA61dKNnkH82we2qqIPYDl1UX6farfQMCZBEV96OoEkDDQVY8g==}
+
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
+
   jsonc-parser@3.3.1:
     resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
 
+  kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+
   locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
 
@@ -1108,6 +1183,10 @@ packages:
   magicast@0.5.2:
     resolution: {integrity: sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==}
 
+  maplibre-gl@5.24.0:
+    resolution: {integrity: sha512-ALyFxgtd5R+65UqZ/++lOqwWcC0SNho9c27fYSyLmG7AfnAul2o46F05aDJGPbFU57wos9dgcIySHs0Xe6ia3A==}
+    engines: {node: '>=16.14.0', npm: '>=8.1.0'}
+
   markdown-table@3.0.4:
     resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
 
@@ -1250,6 +1329,9 @@ packages:
   micromark@4.0.2:
     resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
 
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
   mrmime@2.0.1:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -1257,6 +1339,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+
   nanoid@3.3.12:
     resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1321,6 +1406,10 @@ packages:
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  pbf@4.0.1:
+    resolution: {integrity: sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==}
+    hasBin: true
+
   piccolore@0.1.3:
     resolution: {integrity: sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw==}
 
@@ -1335,10 +1424,16 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
+  pmtiles@4.4.1:
+    resolution: {integrity: sha512-5oTeQc/yX/ft1evbpIlnoCZugQuug/iYIAj/ZTqIqzdGek4uZEho99En890EE6NOSI3JTI3IG8R7r8+SltphxA==}
+
   postcss@8.5.14:
     resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  potpack@2.1.0:
+    resolution: {integrity: sha512-pcaShQc1Shq0y+E7GqJqvZj8DTthWV1KeHGdi0Z6IAin2Oi3JnLCOfwnCo84qc+HAp52wT9nK9H7FAJp5a44GQ==}
+
   prismjs@1.30.0:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
@@ -1346,6 +1441,12 @@ packages:
   property-information@7.1.0:
     resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
 
+  protocol-buffers-schema@3.6.1:
+    resolution: {integrity: sha512-VG2K63Igkiv9p76tk1lilczEK1cT+kCjKtkdhw1dQZV3k3IXJbd3o6Ho8b9zJZaHSnT2hKe4I+ObmX9w6m5SmQ==}
+
+  quickselect@3.0.0:
+    resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
+
   radix3@1.1.2:
     resolution: {integrity: sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA==}
 
@@ -1397,6 +1498,9 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
+  resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+
   retext-latin@4.0.0:
     resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==}
 
@@ -1562,6 +1666,10 @@ packages:
   sisteransi@1.0.5:
     resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
 
+  slugify@1.6.9:
+    resolution: {integrity: sha512-vZ7rfeehZui7wQs438JXBckYLkIIdfHOXsaVEUMyS5fHo1483l1bMdo0EDSWYclY0yZKFOipDy4KHuKs6ssvdg==}
+    engines: {node: '>=8.0.0'}
+
   smartypants@0.2.2:
     resolution: {integrity: sha512-TzobUYoEft/xBtb2voRPryAUIvYguG0V7Tt3de79I1WfXgCwelqVsGuZSnu3GFGRZhXR90AeEYIM+icuB/S06Q==}
     hasBin: true
@@ -1583,10 +1691,18 @@ packages:
   stringify-entities@4.0.4:
     resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
 
+  supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+
   supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
 
+  svelte-fa@4.0.4:
+    resolution: {integrity: sha512-85BomCGkTrH8kPDGvb8JrVwq9CqR9foprbKjxemP4Dtg3zPR7OXj5hD0xVYK0C+UCzFI1zooLoK/ndIX6aYXAw==}
+    peerDependencies:
+      svelte: ^4.0.0 || ^5.0.0
+
   svelte2tsx@0.7.55:
     resolution: {integrity: sha512-JWzgeM3lqySRNfqcsesvVEh8LhTWBxQJ9RMjzJ+VepdmXtVnNd0SbtGctG6+/fbHq0N6mhwSd823gszw9JHeGQ==}
     peerDependencies:
@@ -1625,6 +1741,9 @@ packages:
     resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
+  tinyqueue@3.0.0:
+    resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
+
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
@@ -2128,6 +2247,51 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+
+  '@mapbox/point-geometry@1.1.0': {}
+
+  '@mapbox/tiny-sdf@2.2.0': {}
+
+  '@mapbox/unitbezier@0.0.1': {}
+
+  '@mapbox/vector-tile@2.0.4':
+    dependencies:
+      '@mapbox/point-geometry': 1.1.0
+      '@types/geojson': 7946.0.16
+      pbf: 4.0.1
+
+  '@mapbox/whoots-js@3.1.0': {}
+
+  '@maplibre/geojson-vt@5.0.4': {}
+
+  '@maplibre/geojson-vt@6.1.0':
+    dependencies:
+      kdbush: 4.0.2
+
+  '@maplibre/maplibre-gl-style-spec@24.8.5':
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/unitbezier': 0.0.1
+      json-stringify-pretty-compact: 4.0.0
+      minimist: 1.2.8
+      quickselect: 3.0.0
+      tinyqueue: 3.0.0
+
+  '@maplibre/mlt@1.1.9':
+    dependencies:
+      '@mapbox/point-geometry': 1.1.0
+
+  '@maplibre/vt-pbf@4.3.0':
+    dependencies:
+      '@mapbox/point-geometry': 1.1.0
+      '@mapbox/vector-tile': 2.0.4
+      '@maplibre/geojson-vt': 5.0.4
+      '@types/geojson': 7946.0.16
+      '@types/supercluster': 7.1.3
+      pbf: 4.0.1
+      supercluster: 8.0.1
+
   '@oslojs/encoding@1.1.0': {}
 
   '@parcel/watcher-android-arm64@2.5.6':
@@ -2354,6 +2518,8 @@ snapshots:
 
   '@types/estree@1.0.9': {}
 
+  '@types/geojson@7946.0.16': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -2368,6 +2534,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/supercluster@7.1.3':
+    dependencies:
+      '@types/geojson': 7946.0.16
+
   '@types/trusted-types@2.0.7': {}
 
   '@types/unist@3.0.3': {}
@@ -2598,6 +2768,8 @@ snapshots:
 
   dset@3.1.4: {}
 
+  earcut@3.0.2: {}
+
   entities@4.5.0: {}
 
   entities@6.0.1: {}
@@ -2663,6 +2835,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.4
 
+  fflate@0.8.2: {}
+
   flattie@1.1.1: {}
 
   fontace@0.4.1:
@@ -2682,6 +2856,8 @@ snapshots:
 
   github-slugger@2.0.0: {}
 
+  gl-matrix@3.4.4: {}
+
   h3@1.15.11:
     dependencies:
       cookie-es: 1.2.3
@@ -2819,12 +2995,18 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
+  journalize@2.6.0: {}
+
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
 
+  json-stringify-pretty-compact@4.0.0: {}
+
   jsonc-parser@3.3.1: {}
 
+  kdbush@4.0.2: {}
+
   locate-character@3.0.0: {}
 
   longest-streak@3.1.0: {}
@@ -2841,6 +3023,28 @@ snapshots:
       '@babel/types': 7.29.0
       source-map-js: 1.2.1
 
+  maplibre-gl@5.24.0:
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/point-geometry': 1.1.0
+      '@mapbox/tiny-sdf': 2.2.0
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 2.0.4
+      '@mapbox/whoots-js': 3.1.0
+      '@maplibre/geojson-vt': 6.1.0
+      '@maplibre/maplibre-gl-style-spec': 24.8.5
+      '@maplibre/mlt': 1.1.9
+      '@maplibre/vt-pbf': 4.3.0
+      '@types/geojson': 7946.0.16
+      earcut: 3.0.2
+      gl-matrix: 3.4.4
+      kdbush: 4.0.2
+      murmurhash-js: 1.0.0
+      pbf: 4.0.1
+      potpack: 2.1.0
+      quickselect: 3.0.0
+      tinyqueue: 3.0.0
+
   markdown-table@3.0.4: {}
 
   marked-smartypants@1.1.12(marked@15.0.12):
@@ -3165,10 +3369,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  minimist@1.2.8: {}
+
   mrmime@2.0.1: {}
 
   ms@2.1.3: {}
 
+  murmurhash-js@1.0.0: {}
+
   nanoid@3.3.12: {}
 
   neotraverse@0.6.18: {}
@@ -3234,6 +3442,10 @@ snapshots:
     dependencies:
       entities: 6.0.1
 
+  pbf@4.0.1:
+    dependencies:
+      resolve-protobuf-schema: 2.1.0
+
   piccolore@0.1.3: {}
 
   picocolors@1.1.1: {}
@@ -3242,16 +3454,26 @@ snapshots:
 
   picomatch@4.0.4: {}
 
+  pmtiles@4.4.1:
+    dependencies:
+      fflate: 0.8.2
+
   postcss@8.5.14:
     dependencies:
       nanoid: 3.3.12
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  potpack@2.1.0: {}
+
   prismjs@1.30.0: {}
 
   property-information@7.1.0: {}
 
+  protocol-buffers-schema@3.6.1: {}
+
+  quickselect@3.0.0: {}
+
   radix3@1.1.2: {}
 
   readdirp@4.1.2:
@@ -3337,6 +3559,10 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
+  resolve-protobuf-schema@2.1.0:
+    dependencies:
+      protocol-buffers-schema: 3.6.1
+
   retext-latin@4.0.0:
     dependencies:
       '@types/nlcst': 2.0.3
@@ -3544,6 +3770,8 @@ snapshots:
 
   sisteransi@1.0.5: {}
 
+  slugify@1.6.9: {}
+
   smartypants@0.2.2: {}
 
   smol-toml@1.6.1: {}
@@ -3559,10 +3787,18 @@ snapshots:
       character-entities-html4: 2.1.0
       character-entities-legacy: 3.0.0
 
+  supercluster@8.0.1:
+    dependencies:
+      kdbush: 4.0.2
+
   supports-color@8.1.1:
     dependencies:
       has-flag: 4.0.0
 
+  svelte-fa@4.0.4(svelte@5.55.5):
+    dependencies:
+      svelte: 5.55.5
+
   svelte2tsx@0.7.55(svelte@5.55.5)(typescript@5.9.3):
     dependencies:
       dedent-js: 1.0.1
@@ -3618,6 +3854,8 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyqueue@3.0.0: {}
+
   trim-lines@3.0.1: {}
 
   trough@2.2.0: {}
diff --git a/src/assets/Photo-4439.jpg b/src/assets/Photo-4439.jpg
new file mode 100755
index 0000000..a1ab7de
Binary files /dev/null and b/src/assets/Photo-4439.jpg differ
diff --git a/src/assets/Photo-5420.jpg b/src/assets/Photo-5420.jpg
new file mode 100755
index 0000000..4a61704
Binary files /dev/null and b/src/assets/Photo-5420.jpg differ
diff --git a/src/components/AdSlot/@types/ads.ts b/src/components/AdSlot/@types/ads.ts
new file mode 100644
index 0000000..93e32b7
--- /dev/null
+++ b/src/components/AdSlot/@types/ads.ts
@@ -0,0 +1,52 @@
+export type LeaderboardAdType = {
+  mobile: {
+    adType: 'leaderboard';
+    placementName: 'reuters_mobile_leaderboard';
+  };
+  desktop: {
+    adType: 'leaderboard';
+    placementName: 'reuters_desktop_leaderboard_atf';
+  };
+};
+export type SponsorshipAdType = {
+  mobile: {
+    adType: 'sponsorlogo';
+    placementName: 'reuters_sponsorlogo';
+  };
+  desktop: {
+    adType: 'sponsorlogo';
+    placementName: 'reuters_sponsorlogo';
+  };
+};
+export type InlineAdType = {
+  mobile: {
+    adType: 'mpu' | 'native' | 'mpu2';
+    placementName:
+      | 'reuters_mobile_mpu_1'
+      | 'reuters_mobile_mpu_2'
+      | 'reuters_mobile_mpu_3';
+  };
+  desktop: {
+    adType: 'native' | 'canvas' | 'flex';
+    placementName:
+      | 'reuters_desktop_native_1'
+      | 'reuters_desktop_native_2'
+      | 'reuters_desktop_native_3';
+  };
+};
+export type DesktopPlacementName =
+  | LeaderboardAdType['desktop']['placementName']
+  | SponsorshipAdType['desktop']['placementName']
+  | InlineAdType['desktop']['placementName'];
+export type MobilePlacementName =
+  | LeaderboardAdType['mobile']['placementName']
+  | SponsorshipAdType['mobile']['placementName']
+  | InlineAdType['mobile']['placementName'];
+export type DesktopAdType =
+  | LeaderboardAdType['desktop']['adType']
+  | SponsorshipAdType['desktop']['adType']
+  | InlineAdType['desktop']['adType'];
+export type MobileAdType =
+  | LeaderboardAdType['mobile']['adType']
+  | SponsorshipAdType['mobile']['adType']
+  | InlineAdType['mobile']['adType'];
diff --git a/src/components/AdSlot/AdScripts.svelte b/src/components/AdSlot/AdScripts.svelte
new file mode 100644
index 0000000..9285c83
--- /dev/null
+++ b/src/components/AdSlot/AdScripts.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { loadBootstrap } from './adScripts/bootstrap';
+  import { loadScript } from './adScripts/loadScript';
+  import OneTrust from './OneTrust.svelte';
+
+  onMount(() => {
+    window.graphicsAdQueue = window.graphicsAdQueue || [];
+    loadScript(
+      'https://www.reuters.com/static/js/bootstrap/v1.1.2/bootstrap.static.js',
+      { onload: loadBootstrap, async: false }
+    );
+    // Load Freestar script
+    loadScript('https://a.pub.network/reuters-com/pubfig.min.js');
+  });
+</script>
+
+<svelte:head>
+  <link rel="preconnect" href="https://a.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://b.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://d.pub.network/" crossorigin="" />
+  <link rel="preconnect" href="https://c.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://s.amazon-adsystem.com" crossorigin="" />
+  <link rel="preconnect" href="https://btloader.com/" crossorigin="" />
+  <link rel="preconnect" href="https://api.btloader.com/" crossorigin="" />
+  <link
+    rel="preconnect"
+    href="https://confiant-integrations.global.ssl.fastly.net"
+    crossorigin=""
+  />
+  <link rel="stylesheet" href="https://a.pub.network/reuters-com/cls.css" />
+</svelte:head>
+
+<OneTrust />
diff --git a/src/components/AdSlot/AdSlot.svelte b/src/components/AdSlot/AdSlot.svelte
new file mode 100644
index 0000000..4fed36b
--- /dev/null
+++ b/src/components/AdSlot/AdSlot.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
+  import { onMount } from 'svelte';
+  import { getRandomAdId } from './utils';
+
+  interface Props {
+    placementName: DesktopPlacementName | MobilePlacementName;
+    adType: DesktopAdType | MobileAdType;
+    /**
+     * @TODO Unclear at what level this bit of config is used with placements...
+     */
+    dataFreestarAd?: string;
+  }
+
+  let { placementName, adType, dataFreestarAd = '__970x250' }: Props = $props();
+
+  const adId = getRandomAdId();
+
+  onMount(() => {
+    const adSlot = {
+      placementName,
+      slotId: adId,
+      targeting: {
+        div_id: placementName,
+        type: adType,
+      },
+    };
+    // @ts-ignore window global
+    const freestar = window?.freestar;
+    // Add adSlot to freestar queue directly if already initialised
+    if (freestar) {
+      freestar.queue.push(function () {
+        freestar.newAdSlots([adSlot], freestar.config.channel);
+      });
+      // ... otherwise add to the graphicsAdQueue queue.
+    } else {
+      window.graphicsAdQueue = window.graphicsAdQueue || [];
+      window.graphicsAdQueue.push(adSlot);
+    }
+
+    return () => {
+      // @ts-ignore window global
+      const freestar = window?.freestar;
+      if (freestar) {
+        freestar.queue.push(function () {
+          freestar.deleteAdSlots(adId);
+        });
+      }
+    };
+  });
+</script>
+
+<div data-freestar-ad={dataFreestarAd || null} id={adId}></div>
+
+<style>
+  :global(div.freestar-adslot:has(.unfulfilled-ad)) {
+    display: none;
+  }
+</style>
diff --git a/src/components/AdSlot/InlineAd.mdx b/src/components/AdSlot/InlineAd.mdx
new file mode 100644
index 0000000..ef65d15
--- /dev/null
+++ b/src/components/AdSlot/InlineAd.mdx
@@ -0,0 +1,56 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InlineAdStories from './InlineAd.stories.svelte';
+
+<Meta of={InlineAdStories} />
+
+# InlineAd
+
+Add programmatic ads inline on your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { InlineAd } from '@reuters-graphics/graphics-components';
+
+  let { embedded = false } = $props();
+</script>
+
+{#each content.blocks as block}
+  <!-- ... -->
+
+  {#if block.Type === 'inline-ad'}
+    <!-- Check if in an embed context! -->
+    {#if !embedded}
+      <InlineAd />
+    {/if}
+  {/if}
+
+  <!-- ... -->
+{/each}
+```
+
+You may add **up to three** inline ads per page, but must set the `n` prop on multiple ads in sequential order, 1 - 3.
+
+```svelte
+<!-- First inline ad on the page -->
+<InlineAd n={1} />
+<!-- ... second ... -->
+<InlineAd n={2} />
+<!-- ... third and final. -->
+<InlineAd n={3} />
+```
+
+<Canvas of={InlineAdStories.Demo} />
diff --git a/src/components/AdSlot/InlineAd.stories.svelte b/src/components/AdSlot/InlineAd.stories.svelte
new file mode 100644
index 0000000..cac455c
--- /dev/null
+++ b/src/components/AdSlot/InlineAd.stories.svelte
@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import AdScripts from './AdScripts.svelte';
+  import InlineAd from './InlineAd.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/InlineAd',
+    component: InlineAd,
+  });
+</script>
+
+{#snippet template()}
+  <div>
+    <AdScripts />
+    <InlineAd />
+    <InlineAd />
+  </div>
+{/snippet}
+
+<Story name="Demo" children={template} />
diff --git a/src/components/AdSlot/InlineAd.svelte b/src/components/AdSlot/InlineAd.svelte
new file mode 100644
index 0000000..09cb4d2
--- /dev/null
+++ b/src/components/AdSlot/InlineAd.svelte
@@ -0,0 +1,74 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
+<!-- @component `InlineAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-inlinead--docs) -->
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import type { InlineAdType } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+
+  interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Number of the inline ad in sequence. Use to add multiple inline ads to a page. */
+    n?: 1 | 2 | 3 | '1' | '2' | '3';
+    /** Add a class to target with SCSS. Defaults to `my-12`. */
+    class?: string;
+  }
+
+  let { id = '', class: cls = 'my-12', n = 1 }: Props = $props();
+
+  const desktopPlacementName: InlineAdType['desktop']['placementName'] = `reuters_desktop_native_${n}`;
+</script>
+
+<Block {id} class="freestar-adslot {cls}">
+  <div class="ad-block">
+    <div class="ad-label">Advertisement · Scroll to continue</div>
+    <div class="ad-container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd {desktopPlacementName} />
+        </div>
+      </div>
+    </div>
+  </div>
+</Block>
+
+<style lang="scss">
+  div.ad-block {
+    border-bottom: 1px solid var(--theme-colour-brand-rules);
+    border-top: 1px solid var(--theme-colour-brand-rules);
+    div.ad-label {
+      font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;
+      font-size: 14px;
+      margin: 6px 0;
+      line-height: 1.333;
+      color: var(--theme-colour-text-secondary);
+      width: 100%;
+      text-align: center;
+    }
+    div.ad-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 415px;
+      @media (max-width: 767.9px) {
+        min-height: 320px;
+      }
+      div.ad-slot__inner {
+        margin: auto 0;
+        width: 100%;
+        max-width: 100%;
+        flex: unset;
+        & > div {
+          display: block;
+          :global(div[data-freestar-ad]) {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/AdSlot/LeaderboardAd.mdx b/src/components/AdSlot/LeaderboardAd.mdx
new file mode 100644
index 0000000..a2550aa
--- /dev/null
+++ b/src/components/AdSlot/LeaderboardAd.mdx
@@ -0,0 +1,31 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as LeaderboardAdStories from './LeaderboardAd.stories.svelte';
+
+<Meta of={LeaderboardAdStories} />
+
+# LeaderboardAd
+
+Add a leaderboard ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import {
+    AdScripts,
+    LeaderboardAd,
+    SiteHeader,
+  } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+
+<!-- ALWAYS put the leaderboard ad directly above the SiteHeader -->
+<LeaderboardAd />
+<SiteHeader />
+```
+
+<Canvas of={LeaderboardAdStories.Demo} />
diff --git a/src/components/AdSlot/LeaderboardAd.stories.svelte b/src/components/AdSlot/LeaderboardAd.stories.svelte
new file mode 100644
index 0000000..2fef379
--- /dev/null
+++ b/src/components/AdSlot/LeaderboardAd.stories.svelte
@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import AdScripts from './AdScripts.svelte';
+  import LeaderboardAd from './LeaderboardAd.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/LeaderboardAd',
+    component: LeaderboardAd,
+  });
+</script>
+
+{#snippet template()}
+  <div>
+    <AdScripts />
+    <LeaderboardAd />
+  </div>
+{/snippet}
+
+<Story name="Demo" children={template} />
+
+<style>
+  div {
+    min-height: 200vh;
+    background-size: 40px 40px;
+    background-image:
+      linear-gradient(to right, lightgrey 1px, transparent 1px),
+      linear-gradient(to bottom, lightgrey 1px, transparent 1px);
+  }
+</style>
diff --git a/src/components/AdSlot/LeaderboardAd.svelte b/src/components/AdSlot/LeaderboardAd.svelte
new file mode 100644
index 0000000..95aada3
--- /dev/null
+++ b/src/components/AdSlot/LeaderboardAd.svelte
@@ -0,0 +1,102 @@
+<!-- @component `LeaderboardAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-leaderboardad--docs) -->
+<script lang="ts">
+  import type { LeaderboardAdType } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+  }
+
+  let { id = '', class: cls = '' }: Props = $props();
+
+  let windowWidth = $state(1200);
+  let adSize = $derived(windowWidth < 1024 ? 110 : 275);
+
+  const desktopPlacementName: LeaderboardAdType['desktop']['placementName'] =
+    'reuters_desktop_leaderboard_atf';
+
+  let sticky = $state(false);
+  // Handles transition out... somewhat dumb, but here we are...
+  let unstick = $state(false);
+
+  onMount(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY;
+      if (scrollTop >= adSize * 1.1) {
+        sticky = true;
+        setTimeout(() => {
+          unstick = true;
+          setTimeout(() => {
+            sticky = false;
+          }, 400);
+        }, 1500);
+        window.removeEventListener('scroll', handleScroll);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  });
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+<div
+  class="freestar-adslot leaderboard__sticky {cls}"
+  class:sticky
+  class:unstick
+  {id}
+  style="--height: {adSize}px;"
+>
+  <div class="ad-block">
+    <div class="ad-slot__container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd {desktopPlacementName} />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .leaderboard__sticky {
+    position: initial;
+    top: -275px;
+    transition: top 0.4s ease-in-out;
+    z-index: 1030;
+    &.sticky {
+      position: sticky;
+      top: 0px;
+    }
+    &.unstick {
+      top: -275px;
+    }
+  }
+  div.ad-block {
+    width: 100%;
+    background: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    height: var(--height);
+    .ad-slot__container {
+      height: 0px;
+      min-height: var(--height);
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      .ad-slot__inner {
+        max-width: 100%;
+      }
+    }
+  }
+</style>
diff --git a/src/components/AdSlot/OneTrust.svelte b/src/components/AdSlot/OneTrust.svelte
new file mode 100644
index 0000000..1b5d191
--- /dev/null
+++ b/src/components/AdSlot/OneTrust.svelte
@@ -0,0 +1,44 @@
+<!-- This component manages the OneTrust prefs button, so it's not permanently fixed on page... -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { throttle } from 'es-toolkit';
+
+  let lastScroll = 0;
+  let showManagePreferences = true;
+
+  const togglePrefs = (on: boolean = true) => {
+    const btn = document.getElementById('ot-sdk-btn-floating');
+    if (!btn) return;
+    if (on) {
+      showManagePreferences = true;
+      btn.style.bottom = '';
+    } else {
+      showManagePreferences = false;
+      btn.style.bottom = '-5rem';
+    }
+  };
+
+  const handleScroll = () => {
+    if (lastScroll > window.scrollY) {
+      if (!showManagePreferences) {
+        togglePrefs(true);
+      }
+    } else {
+      if (showManagePreferences && window.scrollY > 250) {
+        togglePrefs(false);
+      }
+    }
+    lastScroll = window.scrollY;
+  };
+
+  onMount(() => {
+    if (typeof window === 'undefined') return;
+    const throttledHandle = throttle(handleScroll, 250);
+    window.addEventListener('scroll', throttledHandle, {
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener('scroll', throttledHandle);
+    };
+  });
+</script>
diff --git a/src/components/AdSlot/ResponsiveAd.svelte b/src/components/AdSlot/ResponsiveAd.svelte
new file mode 100644
index 0000000..55a9edd
--- /dev/null
+++ b/src/components/AdSlot/ResponsiveAd.svelte
@@ -0,0 +1,78 @@
+<script lang="ts">
+  import type {
+    DesktopAdType,
+    DesktopPlacementName,
+    MobileAdType,
+    MobilePlacementName,
+  } from './@types/ads';
+  import AdSlot from './AdSlot.svelte';
+
+  interface Props {
+    desktopPlacementName: DesktopPlacementName;
+    mobileBreakpoint?: number;
+  }
+
+  let { desktopPlacementName, mobileBreakpoint = 1024 }: Props = $props();
+
+  let windowWidth: number | undefined = $state();
+
+  const getMobilePlacementName = (
+    desktopPlacementName: DesktopPlacementName
+  ): MobilePlacementName => {
+    switch (desktopPlacementName) {
+      case 'reuters_desktop_leaderboard_atf':
+        return 'reuters_mobile_leaderboard';
+      case 'reuters_sponsorlogo':
+        return 'reuters_sponsorlogo';
+      case 'reuters_desktop_native_1':
+        return 'reuters_mobile_mpu_1';
+      case 'reuters_desktop_native_2':
+        return 'reuters_mobile_mpu_2';
+      case 'reuters_desktop_native_3':
+        return 'reuters_mobile_mpu_3';
+      default:
+        return 'reuters_mobile_mpu_1';
+    }
+  };
+
+  const getAdType = (
+    placementName: DesktopPlacementName | MobilePlacementName
+  ): DesktopAdType | MobileAdType => {
+    switch (placementName) {
+      case 'reuters_desktop_leaderboard_atf':
+      case 'reuters_mobile_leaderboard':
+        return 'leaderboard';
+      case 'reuters_sponsorlogo':
+        return 'sponsorlogo';
+      case 'reuters_mobile_mpu_1':
+        return 'mpu';
+      case 'reuters_mobile_mpu_2':
+        return 'native';
+      case 'reuters_mobile_mpu_3':
+        return 'mpu2';
+      case 'reuters_desktop_native_1':
+        return 'native';
+      case 'reuters_desktop_native_2':
+        return 'canvas';
+      case 'reuters_desktop_native_3':
+        return 'flex';
+      default:
+        return 'native';
+    }
+  };
+
+  let placementName = $derived(
+    windowWidth && windowWidth < mobileBreakpoint ?
+      getMobilePlacementName(desktopPlacementName)
+    : desktopPlacementName
+  );
+  let adType = $derived(getAdType(placementName));
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+{#if windowWidth}
+  {#key placementName}
+    <AdSlot {placementName} {adType} />
+  {/key}
+{/if}
diff --git a/src/components/AdSlot/SponsorshipAd.mdx b/src/components/AdSlot/SponsorshipAd.mdx
new file mode 100644
index 0000000..78eb0cd
--- /dev/null
+++ b/src/components/AdSlot/SponsorshipAd.mdx
@@ -0,0 +1,37 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SponsorshipAdStories from './SponsorshipAd.stories.svelte';
+
+<Meta of={SponsorshipAdStories} />
+
+# SponsorshipAd
+
+Add a sponsorship ad to your page.
+
+> **IMPORTANT!** Make sure ads are only used on dotcom pages, never on embeds.
+
+```svelte
+<!-- +page.svelte -->
+<script>
+  import { AdScripts } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Include AdScripts only ONCE per page for any type of ad -->
+<AdScripts />
+```
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SponsorshipAd } from '@reuters-graphics/graphics-components';
+
+  let { embedded = false } = $props();
+</script>
+
+<!-- Check if in an embed context! -->
+{#if !embedded}
+  <SponsorshipAd />
+{/if}
+```
+
+<Canvas of={SponsorshipAdStories.Demo} />
diff --git a/src/components/AdSlot/SponsorshipAd.stories.svelte b/src/components/AdSlot/SponsorshipAd.stories.svelte
new file mode 100644
index 0000000..ecf866b
--- /dev/null
+++ b/src/components/AdSlot/SponsorshipAd.stories.svelte
@@ -0,0 +1,20 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import AdScripts from './AdScripts.svelte';
+  import SponsorshipAd from './SponsorshipAd.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/SponsorshipAd',
+    component: SponsorshipAd,
+  });
+</script>
+
+{#snippet template()}
+  <div>
+    <AdScripts />
+    <SponsorshipAd />
+  </div>
+{/snippet}
+
+<Story name="Demo" children={template} />
diff --git a/src/components/AdSlot/SponsorshipAd.svelte b/src/components/AdSlot/SponsorshipAd.svelte
new file mode 100644
index 0000000..8f3b3c5
--- /dev/null
+++ b/src/components/AdSlot/SponsorshipAd.svelte
@@ -0,0 +1,85 @@
+<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
+<!-- @component `SponsorshipAd` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-sponsorshipad--docs) -->
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import type { SponsorshipAdType } from './@types/ads';
+  import ResponsiveAd from './ResponsiveAd.svelte';
+
+  interface Props {
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Label placed directly above the sponsorship ad
+     */
+    adLabel?: string;
+  }
+
+  let { id = '', class: cls = 'my-12', adLabel = '' }: Props = $props();
+
+  const desktopPlacementName: SponsorshipAdType['desktop']['placementName'] =
+    'reuters_sponsorlogo';
+</script>
+
+<Block {id} class="freestar-adslot {cls}">
+  <div class="ad-block">
+    {#if adLabel}
+      <div class="ad-label">
+        <div>{adLabel}</div>
+      </div>
+    {/if}
+    <div class="ad-container">
+      <div class="ad-slot__inner">
+        <div>
+          <ResponsiveAd {desktopPlacementName} />
+        </div>
+      </div>
+    </div>
+  </div>
+</Block>
+
+<style lang="scss">
+  div.ad-block {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    div.ad-label {
+      font-family: Knowledge, 'Source Sans Pro', Arial, Helvetica, sans-serif;
+      font-size: 12px;
+      margin: 0;
+      line-height: 1.333;
+      color: var(--theme-colour-text-secondary);
+      text-align: right;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      justify-items: center;
+    }
+    div.ad-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      min-height: 32px;
+      div.ad-slot__inner {
+        margin: auto 0;
+        width: 100%;
+        max-width: 100%;
+        flex: unset;
+        & > div {
+          display: block;
+          :global(div[data-freestar-ad]) {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/AdSlot/adScripts/bootstrap.ts b/src/components/AdSlot/adScripts/bootstrap.ts
new file mode 100644
index 0000000..0ff6a51
--- /dev/null
+++ b/src/components/AdSlot/adScripts/bootstrap.ts
@@ -0,0 +1,105 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import getParameterByName from './getParameterByName';
+import Ias from './ias';
+
+const ONETRUST_LOGS = 'ot_logs';
+const ONETRUST_GEOLOCATION_MOCK = 'ot_geolocation_mock';
+const ONETRUST_SCRIPT_ID = '38cb75bd-fbe1-4ac8-b4af-e531ab368caf';
+
+export const loadBootstrap = () => {
+  (<any>window).freestar = (<any>window).freestar || {};
+  const freestar = (<any>window).freestar;
+  freestar.debug = true;
+  freestar.queue = freestar.queue || [];
+  freestar.config = freestar.config || {};
+  freestar.config.enabled_slots = [];
+  freestar.initCallback = function () {
+    if (freestar.config.enabled_slots.length === 0) {
+      freestar.initCallbackCalled = false;
+    } else {
+      freestar.newAdSlots(freestar.config.enabled_slots);
+    }
+  };
+
+  freestar.config.channel = '/4735792/reuters.com/graphics';
+
+  (<any>window).initBootstrap(
+    {
+      onetrust_logs: getParameterByName(ONETRUST_LOGS) || 'false',
+      geolocation_mock:
+        getParameterByName(ONETRUST_GEOLOCATION_MOCK) || 'default',
+      onetrust_script_id: ONETRUST_SCRIPT_ID,
+    },
+    (onetrustResponse: any) => {
+      const iasPromise = Ias();
+      return Promise.all([iasPromise]).then((responses) => {
+        const [iasResponse] = responses;
+
+        return {
+          ...onetrustResponse,
+          ias: iasResponse,
+        };
+      });
+    }
+  );
+
+  (<any>window).bootstrap.getResults(() => {
+    // Set GAM
+    window.googletag = (<any>window).googletag || { cmd: [] };
+    window.googletag.cmd.push(() => {
+      window.googletag.pubads().enableSingleRequest();
+      /**
+       * @TODO Property 'enableAsyncRendering' does not exist on type 'PubAdsService'.
+       */
+      // @ts-ignore window global
+      window.googletag.pubads().enableAsyncRendering();
+      window.googletag.pubads().collapseEmptyDivs(true);
+
+      window.googletag
+        .pubads()
+        .addEventListener('slotRenderEnded', function (event) {
+          const adDiv = document.getElementById(event.slot.getSlotElementId());
+          if (!adDiv) return;
+          // If the ad slot is empty
+          if (event.isEmpty) {
+            adDiv.classList.add('unfulfilled-ad');
+          } else {
+            adDiv.classList.remove('unfulfilled-ad');
+          }
+        });
+    });
+
+    // Set page-level key-values
+    // cf: https://help.freestar.com/help/using-key-values
+    freestar.queue.push(function () {
+      // Global Ads test targeting
+      const adstest = new URL(document.location.href).searchParams.get(
+        'adstest'
+      );
+      if (adstest) {
+        window.googletag.pubads().setTargeting('adstest', adstest);
+      }
+
+      // Use the URL path to create a unique ID for the page.
+      const graphicId =
+        window.location.pathname
+          .split('/')
+          // Get the first lowercase slug in the pathname, which is the graphic UID.
+          .filter((d) => d.match(/[a-z0-9]+/) && d !== 'graphics')[0] ||
+        'unknown-graphic';
+      window.googletag.pubads().setTargeting('template', 'graphics');
+      window.googletag.pubads().setTargeting('graphicId', graphicId);
+    });
+
+    if (!Array.isArray((<any>window).graphicsAdQueue)) {
+      console.error('Ad queue not initialized!');
+    }
+
+    freestar.queue.push(function () {
+      freestar.newAdSlots(
+        (<any>window).graphicsAdQueue || [],
+        freestar.config.channel
+      );
+    });
+  });
+};
diff --git a/src/components/AdSlot/adScripts/getParameterByName.ts b/src/components/AdSlot/adScripts/getParameterByName.ts
new file mode 100644
index 0000000..d759bdd
--- /dev/null
+++ b/src/components/AdSlot/adScripts/getParameterByName.ts
@@ -0,0 +1,12 @@
+export default (name: string, url = window.location.href) => {
+  // eslint-disable-next-line no-useless-escape
+  name = name.replace(/[\[\]]/g, '\\$&');
+  const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)');
+  const results = regex.exec(url);
+
+  if (!results) return null;
+
+  if (!results[2]) return '';
+
+  return decodeURIComponent(results[2].replace(/\+/g, ' '));
+};
diff --git a/src/components/AdSlot/adScripts/ias.ts b/src/components/AdSlot/adScripts/ias.ts
new file mode 100644
index 0000000..1377e97
--- /dev/null
+++ b/src/components/AdSlot/adScripts/ias.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const IAS_REQUEST_TIMEOUT = 600;
+
+export default () => {
+  return new Promise((resolve) => {
+    const timerId = setTimeout(() => {
+      resolve('Resolved with timeout');
+    }, IAS_REQUEST_TIMEOUT);
+
+    const setupIAS = () => {
+      clearTimeout(timerId);
+      (<any>window).__iasPET = (<any>window).__iasPET || {};
+      (<any>window).__iasPET.queue = (<any>window).__iasPET.queue || [];
+      (<any>window).__iasPET.pubId = '931336'; // Ask Rachel
+      resolve('loaded');
+    };
+
+    // Set up IAS pet.js
+    const script = document.createElement('script');
+    script.src = '//static.adsafeprotected.com/iasPET.1.js';
+    script.setAttribute('async', 'async');
+    document.head.appendChild(script);
+    script.onload = setupIAS;
+    script.onerror = () => {
+      resolve('error');
+    };
+  });
+};
diff --git a/src/components/AdSlot/adScripts/loadScript.ts b/src/components/AdSlot/adScripts/loadScript.ts
new file mode 100644
index 0000000..5c3c8e6
--- /dev/null
+++ b/src/components/AdSlot/adScripts/loadScript.ts
@@ -0,0 +1,17 @@
+interface attributesInterface {
+  onload?: () => void;
+  async?: boolean;
+}
+
+export const loadScript = (src: string, attributes?: attributesInterface) => {
+  const { onload, async = true } = attributes || {};
+
+  const existingScript = document.querySelector(`script[src="${src}"]`);
+  if (existingScript) return;
+
+  const script = document.createElement('script');
+  if (onload) script.addEventListener('load', onload);
+  script.async = async;
+  script.src = src;
+  document.head.append(script);
+};
diff --git a/src/components/AdSlot/utils.ts b/src/components/AdSlot/utils.ts
new file mode 100644
index 0000000..fd73c93
--- /dev/null
+++ b/src/components/AdSlot/utils.ts
@@ -0,0 +1,6 @@
+const random4 = () =>
+  Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+
+export const getRandomAdId = () => 'ad-' + random4() + random4();
diff --git a/src/components/Analytics/Analytics.mdx b/src/components/Analytics/Analytics.mdx
new file mode 100644
index 0000000..60e7afd
--- /dev/null
+++ b/src/components/Analytics/Analytics.mdx
@@ -0,0 +1,73 @@
+import { Meta } from '@storybook/blocks';
+
+import * as AnalyticsStories from './Analytics.stories.svelte';
+
+<Meta of={AnalyticsStories} />
+
+# Analytics
+
+The `Analytics` component adds Google and Chartbeat analytics to your page.
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+
+  const authors = [{ name: 'Jane Doe' }, { name: 'John Doe' }];
+</script>
+
+<Analytics {authors} />
+```
+
+## Environments
+
+Generally, you only want to send page analytics in production environments.
+
+In a SvelteKit context, you can use `$app` stores to restrict when you send analytics.
+
+For example, the following excludes analytics from pages in development or hosted on our preview server:
+
+```svelte
+<script>
+  import { Analytics } from '@reuters-graphics/graphics-components';
+  import { dev } from '$app/environment';
+  import { page } from '$app/stores';
+</script>
+
+{#if !dev && $page.url?.hostname !== 'graphics.thomsonreuters.com'}
+  <Analytics />
+{/if}
+```
+
+## Multipage apps
+
+If you're using analytics to measure a multipage newsapp that uses [client-side routing](https://kit.svelte.dev/docs/glossary#routing), then you may need to trigger analytics after virtual page navigation.
+
+This component exports a function you can call to register pageviews.
+
+For example, here's how you can use SvelteKit's [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) lifecycle to capture additional pageviews:
+
+```svelte
+<script>
+  import {
+    Analytics,
+    registerPageview,
+  } from '@reuters-graphics/graphics-components';
+  import { afterNavigate } from '$app/navigation';
+
+  let isFirstPageview = true;
+
+  afterNavigate(() => {
+    // We shouldn't fire on initial page load because the Analytics component
+    // already registers a reader's first pageview. After this component
+    // has initially mounted, we can be sure that further navigation is virtual
+    // and register pageviews using this function.
+    if (!isFirstPageview) {
+      registerPageview();
+    } else {
+      isFirstPageview = false;
+    }
+  });
+</script>
+
+<Analytics />
+```
diff --git a/src/components/Analytics/Analytics.stories.svelte b/src/components/Analytics/Analytics.stories.svelte
new file mode 100644
index 0000000..cf9c24a
--- /dev/null
+++ b/src/components/Analytics/Analytics.stories.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Analytics from './Analytics.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/Analytics',
+    component: Analytics,
+  });
+</script>
+
+<Story
+  name="Demo"
+  tags={['!autodocs', '!dev']}
+  args={{
+    authors: [{ name: 'Jane Doe' }, { name: 'John Doe' }],
+  }}
+/>
diff --git a/src/components/Analytics/Analytics.svelte b/src/components/Analytics/Analytics.svelte
new file mode 100644
index 0000000..1a2cfcb
--- /dev/null
+++ b/src/components/Analytics/Analytics.svelte
@@ -0,0 +1,39 @@
+<!-- @component `Analytics` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytics-analytics--docs) -->
+<script module>
+  import { registerPageview as registerChartbeatPageview } from './providers/chartbeat';
+  import { registerPageview as registerGAPageview } from './providers/ga';
+
+  /** Register virtual pageviews when using client-side routing in multipage applications. */
+  function registerPageview() {
+    registerChartbeatPageview();
+    registerGAPageview();
+  }
+
+  export { registerPageview };
+</script>
+
+<script lang="ts">
+  interface Author {
+    name: string;
+  }
+
+  import { onMount } from 'svelte';
+  import { ga, chartbeat } from './providers';
+  import GoogleTagManager from './GTM.svelte';
+
+  interface Props {
+    /**
+     * Used to associate a page with its author(s) in Chartbeat.
+     */
+    authors?: Author[];
+  }
+
+  let { authors = [] }: Props = $props();
+
+  onMount(() => {
+    ga();
+    chartbeat(authors);
+  });
+</script>
+
+<GoogleTagManager />
diff --git a/src/components/Analytics/GTM.svelte b/src/components/Analytics/GTM.svelte
new file mode 100644
index 0000000..a00fdcb
--- /dev/null
+++ b/src/components/Analytics/GTM.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  const GTM_ID = 'GTM-P9TTSWG2';
+</script>
+
+<svelte:head>
+  <!-- Google Tag Manager -->
+  <link href="https://www.googletagmanager.com" rel="preconnect" />
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      'gtm.start': new Date().getTime(),
+      event: 'gtm.js',
+    });
+  </script>
+  <script async src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`}>
+  </script>
+  <!-- End Google Tag Manager -->
+</svelte:head>
+
+<!-- Google Tag Manager (noscript) -->
+<noscript>
+  <iframe
+    src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+    height="0"
+    width="0"
+    style="display:none;visibility:hidden"
+    title=""
+  ></iframe>
+</noscript>
+<!-- End Google Tag Manager (noscript) -->
diff --git a/src/components/Analytics/providers/chartbeat.ts b/src/components/Analytics/providers/chartbeat.ts
new file mode 100644
index 0000000..61089b3
--- /dev/null
+++ b/src/components/Analytics/providers/chartbeat.ts
@@ -0,0 +1,23 @@
+// Reuters Chartbeat UID
+const UID = 52639;
+
+export default (authors: { name: string }[]) => {
+  window._sf_async_config = {
+    uid: UID,
+    domain: 'reuters.com',
+    flickerControl: false,
+    useCanonical: true,
+    useCanonicalDomain: true,
+    sections: 'Graphics',
+    authors: authors.map((a) => a?.name || '').join(','),
+    ...(window._sf_async_config || {}),
+  };
+};
+
+export const registerPageview = () => {
+  if (typeof window === 'undefined' || !window.pSUPERFLY) return;
+  window.pSUPERFLY.virtualPage({
+    path: window.location.pathname,
+    title: document?.title,
+  });
+};
diff --git a/src/components/Analytics/providers/ga.ts b/src/components/Analytics/providers/ga.ts
new file mode 100644
index 0000000..29b3f33
--- /dev/null
+++ b/src/components/Analytics/providers/ga.ts
@@ -0,0 +1,24 @@
+export default () => {
+  try {
+    window.dataLayer = window.dataLayer || [];
+    if (!window.gtag) {
+      /** @type {Gtag.Gtag} */
+      window.gtag = function () {
+        // eslint-disable-next-line prefer-rest-params
+        window.dataLayer.push(arguments);
+      };
+      window.gtag('js', new Date());
+      registerPageview();
+    }
+  } catch (e) {
+    console.warn(`Error initialising Google Analytics: ${e}`);
+  }
+};
+
+export const registerPageview = () => {
+  if (typeof window === 'undefined' || !window.gtag) return;
+  window.gtag('event', 'page_view', {
+    page_location: window.location.origin + window.location.pathname,
+    page_title: document?.title,
+  });
+};
diff --git a/src/components/Analytics/providers/index.ts b/src/components/Analytics/providers/index.ts
new file mode 100644
index 0000000..9b2fdba
--- /dev/null
+++ b/src/components/Analytics/providers/index.ts
@@ -0,0 +1,2 @@
+export { default as ga } from './ga';
+export { default as chartbeat } from './chartbeat';
diff --git a/src/components/BeforeAfter/BeforeAfter.mdx b/src/components/BeforeAfter/BeforeAfter.mdx
new file mode 100644
index 0000000..478e5f1
--- /dev/null
+++ b/src/components/BeforeAfter/BeforeAfter.mdx
@@ -0,0 +1,111 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BeforeAfterStories from './BeforeAfter.stories.svelte';
+
+<Meta of={BeforeAfterStories} />
+
+# BeforeAfter
+
+The `BeforeAfter` component shows a before-and-after comparison of an image.
+
+```svelte
+<script>
+  import { BeforeAfter } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<BeforeAfter
+  beforeSrc={`${assets}/images/before-after/myrne-before.jpg`}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={`${assets}/images/before-after/myrne-after.jpg`}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+/>
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: before-after
+beforeSrc: images/before-after/myrne-before.jpg
+beforeAlt: Satellite image of Russian base at Myrne taken on July 7, 2020.
+afterSrc: images/before-after/myrne-after.jpg
+afterAlt: Satellite image of Russian base at Myrne taken on Oct. 20, 2020.
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `BeforeAfter` component.
+
+```svelte
+<!-- App.svelte -->
+{#each content.blocks as block}
+  {#if block.type === 'before-after'}
+    <BeforeAfter
+      beforeSrc={`${assets}/${block.beforeSrc}`}
+      beforeAlt={block.beforeAlt}
+      afterSrc={`${assets}/${block.afterSrc}`}
+      afterAlt={block.afterAlt}
+    />
+  {/if}
+{/each}
+```
+
+<Canvas of={BeforeAfterStories.Demo} />
+
+## Adding text
+
+To add text overlays and captions, use [snippets](https://svelte.dev/docs/svelte/snippet) for `beforeOverlay`, `afterOverlay` and `caption`. You can style the snippets to match your page design, like in [this demo](./?path=/story/components-multimedia-beforeafter--with-overlays).
+
+> 💡**NOTE:** The text in the overlays are used as [ARIA descriptions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) for your before and after images. You must always use the `beforeAlt` / `afterAlt` props to label your image for visually impaired readers, but these ARIA descriptions provide additional information or context that the reader might need.
+
+```svelte
+<BeforeAfter
+  beforeSrc={beforeImg}
+  beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+  afterSrc={afterImg}
+  afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+>
+  <!-- Optional custom text overlay for the before image -->
+  {#snippet beforeOverlay()}
+    <div class="overlay p-3 before text-left">
+      <p class="h4 font-bold">July 7, 2020</p>
+      <p class="body-note">Initially, this site was far smaller.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom text overlay for the after image -->
+  {#snippet afterOverlay()}
+    <div class="overlay p-3 after text-right">
+      <p class="h4 font-bold">Oct. 20, 2020</p>
+      <p class="body-note">But then forces built up.</p>
+    </div>
+  {/snippet}
+
+  <!-- Optional custom caption for both images -->
+  {#snippet caption()}
+    <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+  {/snippet}
+</BeforeAfter>
+
+<style lang="scss">
+  .overlay {
+    background: rgba(0, 0, 0, 0.45);
+    max-width: 350px;
+    &.after {
+      text-align: right;
+    }
+    p {
+      color: #ffffff;
+    }
+  }
+</style>
+```
+
+<Canvas of={BeforeAfterStories.WithText} />
diff --git a/src/components/BeforeAfter/BeforeAfter.stories.svelte b/src/components/BeforeAfter/BeforeAfter.stories.svelte
new file mode 100644
index 0000000..4e23d53
--- /dev/null
+++ b/src/components/BeforeAfter/BeforeAfter.stories.svelte
@@ -0,0 +1,68 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import BeforeAfter from './BeforeAfter.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/BeforeAfter',
+    component: BeforeAfter,
+    argTypes: {
+      handleColour: { control: 'color' },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
+
+<script>
+  import beforeImg from './images/myrne-before.jpg';
+  import afterImg from './images/myrne-after.jpg';
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    beforeSrc: beforeImg,
+    beforeAlt:
+      'Satellite image of Russian base at Myrne taken on July 7, 2020.',
+    afterSrc: afterImg,
+    afterAlt:
+      'Satellite image of Russian base at Myrne taken on Oct. 20, 2020.',
+  }}
+/>
+
+<Story name="With text" exportName="WithText">
+  <BeforeAfter
+    beforeSrc={beforeImg}
+    beforeAlt="Satellite image of Russian base at Myrne taken on July 7, 2020."
+    afterSrc={afterImg}
+    afterAlt="Satellite image of Russian base at Myrne taken on Oct. 20, 2020."
+  >
+    {#snippet beforeOverlay()}
+      <div class="overlay p-3 before">
+        <p class="h4 font-bold">July 7, 2020</p>
+        <p class="body-note">Initially, this site was far smaller.</p>
+      </div>
+    {/snippet}
+    {#snippet afterOverlay()}
+      <div class="overlay p-3 after">
+        <p class="h4 font-bold">Oct. 20, 2020</p>
+        <p class="body-note">But then forces built up.</p>
+      </div>
+    {/snippet}
+    {#snippet caption()}
+      <p class="body-note">Photos by MAXAR Technologies, 2021.</p>
+    {/snippet}
+  </BeforeAfter>
+
+  <style lang="scss">
+    .overlay {
+      background: rgba(0, 0, 0, 0.45);
+      max-width: 350px;
+      p {
+        color: #ffffff;
+      }
+    }
+  </style>
+</Story>
diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
new file mode 100644
index 0000000..1cd5ddd
--- /dev/null
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -0,0 +1,376 @@
+<!-- @component `BeforeAfter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-beforeafter--docs) -->
+<script lang="ts">
+  import { type Snippet } from 'svelte';
+  import { throttle } from 'es-toolkit';
+
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import type { ContainerWidth } from '../@types/global';
+  import { random4 } from '../../utils/';
+
+  interface Props {
+    /** Width of the chart within the text well. Options: wide, wider, widest, fluid */
+    width?: ContainerWidth;
+    /** Height of the component */
+    height?: number;
+    /**
+     * If set, makes the height a ratio of the component's width.
+     */
+    heightRatio?: number;
+    /**
+     * Before image source
+     */
+    beforeSrc: string;
+    /**
+     * Before image altText
+     */
+    beforeAlt: string;
+    /**
+     * After image source
+     */
+    afterSrc: string;
+    /**
+     * After image altText
+     */
+    afterAlt: string;
+    /**
+     * Class to target with SCSS.
+     */
+    class?: string;
+    /** Drag handle colour */
+    handleColour?: string;
+    /** Drag handle opacity */
+    handleInactiveOpacity?: number;
+    /** Margin at the edge of the image to stop dragging */
+    handleMargin?: number;
+    /** Percentage of the component width the handle will travel ona key press */
+    keyPressStep?: number;
+    /** Initial offset of the handle, between 0 and 1. */
+    offset?: number;
+    /** ID to target with SCSS. */
+    id?: string;
+    /**
+     * Optional snippet for a custom overlay for the before image.
+     */
+    beforeOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom overlay for the after image.
+     */
+    afterOverlay?: Snippet;
+    /**
+     * Optional snippet for a custom caption.
+     */
+    caption?: Snippet;
+    /** Custom ARIA label language to label the component. */
+    ariaLabel?: string;
+  }
+
+  let {
+    width = 'normal',
+    height = 600,
+    heightRatio,
+    beforeSrc,
+    beforeAlt,
+    afterSrc,
+    afterAlt,
+    class: cls = '',
+    handleColour = 'white',
+    handleInactiveOpacity = 0.9,
+    handleMargin = 20,
+    keyPressStep = 0.05,
+    offset = 0.5,
+    id = 'before-after-' + random4() + random4(),
+    beforeOverlay,
+    afterOverlay,
+    caption,
+    ariaLabel = 'Stacked before and after images with an adjustable slider',
+  }: Props = $props();
+
+  /** DOM nodes are undefined until the component is mounted — in other words, you should read it inside an effect or an event handler, but not during component initialisation.
+   */
+  let img: HTMLImageElement | undefined = $state(undefined);
+
+  /** Defaults with an empty DOMRect with all values set to 0 */
+  let imgOffset: DOMRect = $state(new DOMRect());
+  let sliding = false;
+  let figure: HTMLElement | undefined = $state(undefined);
+  let beforeOverlayWidth = $state(0);
+  let isFocused = false;
+  let containerWidth: number = $state(0); // Defaults to 0
+
+  let containerHeight = $derived(
+    containerWidth && heightRatio ? containerWidth * heightRatio : height
+  );
+
+  let w = $derived(imgOffset.width);
+  let x = $derived(w * offset);
+  let figStyle = $derived(`width:100%;height:${containerHeight}px;`);
+  const imgStyle = 'width:100%;height:100%;';
+  let beforeOverlayClip = $derived(
+    x < beforeOverlayWidth ? Math.abs(x - beforeOverlayWidth) : 0
+  );
+
+  /** Toggle `isFocused` */
+  const onfocus = () => (isFocused = true);
+  const onblur = () => (isFocused = false);
+
+  /** Handle left or right arrows being pressed */
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isFocused) return;
+    const { code, key } = e;
+    const margin = handleMargin / w;
+    if (code === 'ArrowRight' || key === 'ArrowRight') {
+      offset = Math.min(1 - margin, offset + keyPressStep);
+    } else if (code === 'ArrowLeft' || key === 'ArrowLeft') {
+      offset = Math.max(0 + margin, offset - keyPressStep);
+    }
+  };
+
+  /** Measure image and set image offset */
+  const measureImage = () => {
+    if (img && img.complete) imgOffset = img.getBoundingClientRect();
+  };
+
+  /** Reset image offset on resize */
+  const resize = () => {
+    measureImage();
+  };
+
+  /** Measure image and set image offset on load */
+  const measureLoadedImage = (e: Event) => {
+    if (e.type === 'load') {
+      imgOffset = (e.target as HTMLImageElement).getBoundingClientRect();
+    }
+  };
+
+  /** Move the slider */
+  const move = (e: MouseEvent | TouchEvent) => {
+    if (sliding && imgOffset) {
+      const el =
+        e instanceof TouchEvent && e.touches ? e.touches[0] : (e as MouseEvent);
+      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;
+      offset = x / w;
+    }
+  };
+
+  /** Starts the slider */
+  const start = (e: MouseEvent | TouchEvent) => {
+    sliding = true;
+    move(e);
+  };
+
+  /** Sets `sliding` to `false`*/
+  const end = () => {
+    sliding = false;
+  };
+
+  /** Keep this warning since these values are often read from an ArchieML doc, which will not trigger typescript errors even if required values don't exist */
+  if (!(beforeSrc && beforeAlt && afterSrc && afterAlt)) {
+    console.warn('Missing required src or alt props for BeforeAfter component');
+  }
+
+  /** @TODO - Double check if this onMount is still necessary */
+  // onMount(() => {
+  //   // This is necessary b/c on:load doesn't reliably fire on the image...
+  //   const interval = setInterval(() => {
+  //     if (imgOffset) clearInterval(interval);
+  //     if (img && img.complete && !imgOffset) measureImage();
+  //   }, 50);
+  // });
+</script>
+
+<svelte:window
+  ontouchmove={move}
+  ontouchend={end}
+  onmousemove={move}
+  onmouseup={end}
+  onresize={throttle(resize, 100)}
+  onkeydown={handleKeyDown}
+/>
+
+<!-- Since we usually read these values from ArchieML, check that they exist -->
+{#if beforeSrc && beforeAlt && afterSrc && afterAlt}
+  <Block {width} {id} class="photo before-after fmy-6 {cls}">
+    <div style="height: {containerHeight}px;" bind:clientWidth={containerWidth}>
+      <button
+        style={figStyle}
+        class="before-after-container relative overflow-hidden my-0 mx-auto"
+        ontouchstart={start}
+        onmousedown={start}
+        bind:this={figure}
+        aria-label={ariaLabel}
+      >
+        <img
+          bind:this={img}
+          src={afterSrc}
+          alt={afterAlt}
+          onload={measureLoadedImage}
+          style={imgStyle}
+          class="after absolute block m-0 max-w-full object-cover"
+          aria-describedby={beforeOverlay ?
+            `${id}-before-description`
+          : undefined}
+        />
+
+        <img
+          src={beforeSrc}
+          alt={beforeAlt}
+          style="clip: rect(0 {x}px {containerHeight}px 0);{imgStyle}"
+          class="before absolute block m-0 max-w-full object-cover"
+          aria-describedby={afterOverlay ?
+            `${id}-after-description`
+          : undefined}
+        />
+        {#if beforeOverlay}
+          <div
+            id="{id}-before-description"
+            class="overlay-container before absolute"
+            bind:clientWidth={beforeOverlayWidth}
+            style="clip-path: inset(0 {beforeOverlayClip}px 0 0);"
+          >
+            <!-- Overlay for before image -->
+            {@render beforeOverlay()}
+          </div>
+        {/if}
+        {#if afterOverlay}
+          <div
+            id="{id}-after-description"
+            class="overlay-container after absolute"
+          >
+            <!-- Overlay for after image -->
+            {@render afterOverlay()}
+          </div>
+        {/if}
+        <div
+          tabindex="0"
+          role="slider"
+          aria-valuenow={Math.round(offset * 100)}
+          class="handle"
+          style="left: calc({offset *
+            100}% - 20px); --before-after-handle-colour: {handleColour}; --before-after-handle-inactive-opacity: {handleInactiveOpacity};"
+          {onfocus}
+          {onblur}
+        >
+          <div class="arrow-left"></div>
+          <div class="arrow-right"></div>
+        </div>
+      </button>
+    </div>
+    {#if caption}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <aside class="before-after-caption mx-auto" id={`${id}-caption`}>
+          <!-- Caption for image credits -->
+          {@render caption()}
+        </aside>
+      </PaddingReset>
+    {/if}
+  </Block>
+{/if}
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  button.before-after-container {
+    box-sizing: content-box;
+    text-align: inherit;
+
+    img {
+      top: 0;
+      left: 0;
+      z-index: 20;
+      &.after {
+        z-index: 21;
+      }
+      &.before {
+        z-index: 22;
+      }
+      user-select: none;
+    }
+    .overlay-container {
+      top: 0;
+      :global(:first-child) {
+        margin-block-start: 0;
+      }
+      :global(:last-child) {
+        margin-block-end: 0;
+      }
+      &.before {
+        left: 0;
+        z-index: 23;
+      }
+      &.after {
+        right: 0;
+        z-index: 21;
+      }
+    }
+  }
+
+  .handle {
+    z-index: 30;
+    width: 40px;
+    height: 40px;
+    cursor: move;
+    background: none;
+    user-select: none;
+    position: absolute;
+    border-radius: 50px;
+    top: calc(50% - 20px);
+    border: 4px solid var(--before-after-handle-colour);
+    opacity: var(--before-after-handle-inactive-opacity, 0.6);
+    box-shadow: 1px 1px 3px #333;
+    &:hover,
+    &:active,
+    &:focus {
+      opacity: 1;
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      box-shadow: 0 0 3px #333;
+      height: 9999px;
+      position: absolute;
+      left: calc(50% - 2px);
+      border: 2px solid var(--before-after-handle-colour);
+    }
+    &:before {
+      top: 40px;
+    }
+    &:after {
+      bottom: 40px;
+    }
+    .arrow-right,
+    .arrow-left {
+      width: 0;
+      height: 0;
+      user-select: none;
+      position: relative;
+      border-block-start: 10px solid transparent;
+      border-block-end: 10px solid transparent;
+    }
+    .arrow-right {
+      inset-inline-start: 19px;
+      inset-block-end: 14px;
+      border-inline-start: 10px solid var(--before-after-handle-colour);
+    }
+    .arrow-left {
+      inset-inline-start: 3px;
+      inset-block-start: 6px;
+      border-inline-end: 10px solid var(--before-after-handle-colour);
+    }
+  }
+
+  .before-after-caption {
+    :global(p) {
+      @include mixins.body-caption;
+    }
+  }
+</style>
diff --git a/src/components/BeforeAfter/images/myrne-after.jpg b/src/components/BeforeAfter/images/myrne-after.jpg
new file mode 100644
index 0000000..62d97fd
Binary files /dev/null and b/src/components/BeforeAfter/images/myrne-after.jpg differ
diff --git a/src/components/BeforeAfter/images/myrne-before.jpg b/src/components/BeforeAfter/images/myrne-before.jpg
new file mode 100644
index 0000000..96ed524
Binary files /dev/null and b/src/components/BeforeAfter/images/myrne-before.jpg differ
diff --git a/src/components/Block/Block.svelte b/src/components/Block/Block.svelte
index c3ebd66..3facf2d 100644
--- a/src/components/Block/Block.svelte
+++ b/src/components/Block/Block.svelte
@@ -42,7 +42,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .article-block {
     max-width: var(--normal-column-width, 660px);
diff --git a/src/components/Byline/Byline.mdx b/src/components/Byline/Byline.mdx
new file mode 100644
index 0000000..56931ab
--- /dev/null
+++ b/src/components/Byline/Byline.mdx
@@ -0,0 +1,170 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as BylineStories from './Byline.stories.svelte';
+
+<Meta of={BylineStories} />
+
+# Byline
+
+The `Byline` component adds a byline, published and updated datelines to your page.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+</script>
+
+<Byline
+  authors={[
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[authors]
+* Dea Bankova
+* Prasanta Kumar Dutta
+* Anurag Rao
+* Mariano Zafra
+[]
+publishTime: 2021-09-12T00:00:00.000Z
+updateTime: 2021-09-12T12:57:00.000Z
+```
+
+... which you'll pass to the `Byline` component.
+
+```svelte
+<script>
+  import { Byline } from '@reuters-graphics/graphics-components';
+  let { content }: Props = $props();
+</script>
+
+<Byline
+  authors={content.authors}
+  publishTime={content.publishTime}
+  updateTime={content.updateTime}
+/>
+```
+
+<Canvas of={BylineStories.Demo} />
+
+## Custom byline, published and updated datelines
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the byline, published and updated datelines.
+
+```svelte
+<Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+  <!-- Optional custom byline -->
+  {#snippet byline()}
+    <strong>BY REUTERS GRAPHICS</strong>
+  {/snippet}
+
+  <!-- Optional custom published dateline -->
+  {#snippet published()}
+    PUBLISHED on some custom date and time
+  {/snippet}
+
+  <!-- Optional custom updated dateline -->
+  {#snippet updated()}
+    <em>Updated every 5 minutes</em>
+  {/snippet}
+</Byline>
+```
+
+<Canvas of={BylineStories.Customised} />
+
+## Translated byline and datelines
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to conditionally customise the byline, published and updated datelines for different languages.
+
+```svelte
+<!-- In App.svelte -->
+<script>
+  import {
+    Byline,
+    getAuthorPageUrl,
+    formatTime,
+  } from '@reuters-graphics/graphics-components';
+
+  let { content }: Props = $props();
+
+  // Note: In graphics kit, `locale` is already defined in `App.svelte`
+</script>
+```
+
+```svelte
+<!-- In App.svelte -->
+<!-- Define custom translation snippets for different languages above the <Byline/> component -->
+{#snippet esByline()}
+  Por
+  {#each content.authors as author, i}
+    <a
+      class="no-underline whitespace-nowrap text-primary font-bold"
+      href={getAuthorPageUrl(author)}
+      rel="author"
+    >
+      {author.trim()}</a
+    >{#if content.authors.length > 1 && i < content.authors.length - 2},{/if}
+    {#if content.authors.length > 1 && i === content.authors.length - 2}y&nbsp;{/if}
+  {/each}
+{/snippet}
+
+{#snippet esPublished()}
+  Publicado <time datetime="2026-04-08T10:00:00.000Z">
+    {new Date(content.publishTime).toLocaleDateString('es-ES', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })}&nbsp;&nbsp;{formatTime(content.publishTime)}</time
+  >
+{/snippet}
+```
+
+```svelte
+<!-- In App.svelte -->
+<!-- Conditionally render custom translation snippets depending on the locale -->
+<Byline
+  authors={content.authors}
+  publishTime={content.publishTime}
+  byline={locale === 'es' ? esByline : undefined}
+  published={locale === 'es' ? esPublished : undefined}
+/>
+```
+
+<Canvas of={BylineStories.Translation} />
+
+## 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) => {
+    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
new file mode 100644
index 0000000..eec4423
--- /dev/null
+++ b/src/components/Byline/Byline.stories.svelte
@@ -0,0 +1,108 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { formatTime, getAuthorPageUrl } from '../../utils/index.js';
+  import Byline from './Byline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Byline',
+    component: Byline,
+    tags: ['autodocs'],
+    argTypes: {
+      align: {
+        control: 'select',
+        options: ['auto', 'center'],
+      },
+    },
+  });
+
+  let authors = [
+    'Dea Bankova',
+    'Prasanta Kumar Dutta',
+    'Anurag Rao',
+    'Mariano Zafra',
+  ];
+
+  let publishTime = '2021-09-12T00:00:00Z';
+
+  let locale = 'es';
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    authors,
+    publishTime: new Date('2021-09-12').toISOString(),
+    updateTime: new Date('2021-09-12T13:57:00').toISOString(),
+  }}
+/>
+
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <Byline publishTime="2021-09-12T00:00:00Z" updateTime="2021-09-12T13:57:00Z">
+    {#snippet byline()}
+      <strong>BY REUTERS GRAPHICS</strong>
+    {/snippet}
+    {#snippet published()}
+      PUBLISHED on some custom date and time
+    {/snippet}
+    {#snippet updated()}
+      <em>Updated every 5 minutes</em>
+    {/snippet}
+  </Byline>
+</Story>
+
+<!-- Translation snippets -->
+{#snippet esByline()}
+  Por
+  {#each authors as author, i}
+    <a
+      class="no-underline whitespace-nowrap text-primary font-bold"
+      href={getAuthorPageUrl(author)}
+      rel="author"
+    >
+      {author.trim()}</a
+    >{#if authors.length > 1 && i < authors.length - 2},{/if}
+    {#if authors.length > 1 && i === authors.length - 2}y&nbsp;{/if}
+  {/each}
+{/snippet}
+
+{#snippet esPublished()}
+  Publicado <time datetime="2026-04-08T10:00:00.000Z">
+    {new Date(publishTime).toLocaleDateString('es-ES', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })}&nbsp;&nbsp;{formatTime(publishTime)}</time
+  >
+{/snippet}
+
+<Story name="Translation" tags={['!autodocs', '!dev']}>
+  In locale = `es`:
+  <Byline
+    publishTime="2021-09-12T00:00:00Z"
+    {authors}
+    byline={locale === 'es' ? esByline : undefined}
+    published={locale === 'es' ? esPublished : undefined}
+  ></Byline>
+
+  In locale = `en`:
+  <Byline
+    publishTime="2021-09-12T00:00:00Z"
+    {authors}
+    byline={undefined}
+    published={undefined}
+  />
+</Story>
+
+<Story
+  name="Custom author page"
+  exportName="CustomAuthorPage"
+  tags={['!autodocs', '!dev']}
+  args={{
+    authors,
+    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
new file mode 100644
index 0000000..07e2117
--- /dev/null
+++ b/src/components/Byline/Byline.svelte
@@ -0,0 +1,181 @@
+<!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
+<script lang="ts">
+  import { getAuthorPageUrl, formatTime } from '../../utils';
+  import Block from '../Block/Block.svelte';
+  import { apdate } from 'journalize';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * 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;
+    /**
+     * Alignment of the byline.
+     */
+    align?: 'auto' | 'center';
+    /**
+     * Add an id to to target with custom CSS.
+     * @type {string}
+     */
+    id?: string;
+    /**
+     * Add extra classes to target with custom CSS.
+     * @type {string}
+     */
+    cls?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * 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 {
+    authors = [],
+    publishTime = '',
+    updateTime,
+    align = 'auto',
+    id = '',
+    cls = '',
+    getAuthorPage = getAuthorPageUrl,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+
+  let alignmentClass = $derived(align === 'center' ? 'text-center' : '');
+
+  /**
+  /* Date validation and formatter functions
+   */
+  const isValidDate = (datetime: string) => {
+    if (!datetime) return false;
+    if (!Date.parse(datetime)) return false;
+    return true;
+  };
+
+  const areSameDay = (first: Date, second: Date) =>
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate();
+</script>
+
+<Block {id} class="byline-container {alignmentClass} {cls}" width="normal">
+  <aside class="article-metadata font-subhed">
+    <div class="byline body-caption fmb-1">
+      {#if byline}
+        <!-- Custom byline -->
+        {@render byline()}
+      {:else}
+        By
+        {#if authors.length > 0}
+          {#each authors as author, i}
+            <a
+              class="no-underline whitespace-nowrap text-primary font-bold"
+              href={getAuthorPage(author)}
+              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}
+          <a
+            href="https://www.reuters.com"
+            class="no-underline whitespace-nowrap text-primary font-bold"
+            >Reuters</a
+          >
+        {/if}
+      {/if}
+    </div>
+    <div class="dateline body-caption fmt-0">
+      {#if published}
+        <div class="whitespace-nowrap inline-block">
+          <!-- Custom published dateline snippet -->
+          <time datetime={publishTime}>
+            {@render published()}
+          </time>
+        </div>
+      {:else if isValidDate(publishTime)}
+        <div class="whitespace-nowrap inline-block">
+          Published
+          <time datetime={publishTime}>
+            {#if updateTime && isValidDate(updateTime)}
+              {apdate(new Date(publishTime))}
+            {:else}
+              {apdate(new Date(publishTime))}&nbsp;&nbsp;{formatTime(
+                publishTime
+              )}
+            {/if}
+          </time>
+        </div>
+      {/if}
+      {#if updated}
+        <div class="whitespace-nowrap inline-block">
+          <!-- Custom updated dateline snippet -->
+          <time datetime={updateTime}>
+            {@render updated()}
+          </time>
+        </div>
+      {:else if isValidDate(publishTime) && isValidDate(updateTime || '')}
+        <div class="whitespace-nowrap inline-block">
+          Last updated
+          <time datetime={updateTime}>
+            {#if areSameDay(new Date(publishTime), new Date(updateTime || new Date()))}
+              {formatTime(updateTime || '')}
+            {:else}
+              {apdate(
+                new Date(updateTime || new Date())
+              )}&nbsp;&nbsp;{formatTime(updateTime || '')}
+            {/if}
+          </time>
+        </div>
+      {/if}
+    </div>
+  </aside>
+</Block>
+
+<style lang="scss">
+  @use 'mixins' as *;
+
+  .byline {
+    a {
+      &:hover {
+        text-decoration-line: underline;
+      }
+    }
+  }
+
+  @media (min-width: $column-width-narrower) {
+    .dateline {
+      div {
+        &:not(:last-child) {
+          &:after {
+            content: '·';
+            margin: 0 2px 0 5px;
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/ClockWall/Clock.svelte b/src/components/ClockWall/Clock.svelte
new file mode 100644
index 0000000..e6eaeb4
--- /dev/null
+++ b/src/components/ClockWall/Clock.svelte
@@ -0,0 +1,264 @@
+<script lang="ts">
+  import { onDestroy, onMount } from 'svelte';
+
+  const CLOCK_WEIGHT = { Light: 1, Normal: 2, Bold: 4 } as const;
+  type ClockWeight = keyof typeof CLOCK_WEIGHT;
+
+  const CLOCK_SIZE = { XS: 48, MD: 80, LG: 120, XL: 160 } as const;
+  type ClockSize = keyof typeof CLOCK_SIZE;
+
+  interface Props {
+    /**
+     * The name of the clock (to be displayed), e.g. "New York"
+     */
+    name: string;
+    /**
+     * The UTC time to display, defaults to current time
+     */
+    UTCTime?: Date;
+    /**
+     * The timezone identifier, e.g. "America/New_York"
+     */
+    tzIdentifier: string;
+    /**
+     * Whether to show the clock, defaults to true
+     */
+    showClock?: boolean;
+    /**
+     * The weight of the clock, either "normal" or "bold"
+     */
+    clockWeight?: ClockWeight;
+    /**
+     * The size of the clock, either "XS", "MD", "LG", or "XL"
+     */
+    clockSize?: ClockSize;
+  }
+
+  const {
+    name,
+    UTCTime = new Date(new Date().toUTCString()),
+    tzIdentifier,
+    showClock = true,
+    clockWeight = 'Normal',
+    clockSize = 'MD',
+  }: Props = $props();
+
+  /**
+   * Converts a UTC date to a specified timezone and formats it to a.m./p.m. style.
+   *
+   * @param utcDate - The UTC date to convert.
+   * @param timezone - The timezone identifier.
+   * @returns The formatted time string.
+   *
+   */
+  function convertUTCToTimezone(utcDate: Date, timezone: string) {
+    const time = new Date(utcDate).toLocaleString('en-US', {
+      timeZone: timezone,
+      hour: 'numeric',
+      minute: '2-digit',
+      hour12: true,
+    });
+
+    // Convert AM/PM to a.m./p.m. format
+    return time.replace('AM', 'a.m.').replace('PM', 'p.m.');
+  }
+
+  let clockInterval: ReturnType<typeof setInterval> | null = null;
+  let time: string = $state(convertUTCToTimezone(UTCTime, tzIdentifier));
+
+  onMount(() => {
+    clockInterval = setInterval(() => {
+      time = convertUTCToTimezone(
+        new Date(new Date().toUTCString()),
+        tzIdentifier
+      );
+    }, 1000 * 10); // Update every 10 seconds
+  });
+
+  let minute: number = $derived(
+    parseFloat(time?.split(' ')[0].split(':')[1]) || 0
+  );
+  let hour: number = $derived(
+    parseFloat(time?.split(' ')[0].split(':')[0]) || 0
+  );
+
+  onDestroy(() => {
+    if (clockInterval) {
+      clearInterval(clockInterval);
+      clockInterval = null;
+    }
+  });
+</script>
+
+<div class="clock-container" style="--clock-size: {CLOCK_SIZE[clockSize]}px;">
+  {#if showClock}
+    <svg class="clock-svg" width="100%" height="100%" viewBox="0 0 120 120">
+      <defs>
+        <filter id="inset-shadow">
+          <!-- Shadow offset -->
+          <feOffset dx="0" dy="4" />
+          <!-- Shadow blur -->
+          <feGaussianBlur stdDeviation="8" result="offset-blur" />
+          <!-- Invert drop shadow to make an inset shadow-->
+          <feComposite
+            operator="out"
+            in="SourceGraphic"
+            in2="offset-blur"
+            result="inverse"
+          />
+          <!-- Cut colour inside shadow -->
+          <feFlood flood-color="black" flood-opacity=".2" result="color" />
+          <feComposite operator="in" in="color" in2="inverse" result="shadow" />
+          <!-- Placing shadow over element -->
+          <feComposite operator="over" in="shadow" in2="SourceGraphic" />
+        </filter>
+      </defs>
+      <circle
+        class="clock-outer-border"
+        cx="50%"
+        cy="50%"
+        r="58"
+        fill="transparent"
+        stroke="#cccccc"
+        stroke-width="2"
+      ></circle>
+      <circle
+        class="clock-inner-shadow"
+        cx="50%"
+        cy="50%"
+        r="54"
+        fill="#ffffff"
+        filter="url(#inset-shadow)"
+      ></circle>
+      <g id="clock-ticks" style="mix-blend-mode: multiply;">
+        {#each Array(12) as _, i (i)}
+          <line
+            class="clock-hour-mark"
+            x1="50%"
+            y1="56"
+            x2="50%"
+            y2="64"
+            stroke="var(--tr-light-grey)"
+            stroke-width="2"
+            transform-origin="50% 50%"
+            transform="rotate({i * 30}) translate(0, -46)"
+          ></line>
+        {/each}
+      </g>
+      <g
+        id="clock-hand-minute"
+        transform-origin="50% 50%"
+        transform="rotate({(minute / 60) * 360})"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="4"
+          fill="transparent"
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+        ></circle>
+        <line
+          x1="50%"
+          y1={60 - 4 - 36}
+          x2="50%"
+          y2={60 - 4}
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+        <line
+          x1="50%"
+          y1={60 + 4}
+          x2="50%"
+          y2={60 + 4 + 4}
+          stroke="var(--tr-light-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+      </g>
+      <g
+        id="clock-hand-hour"
+        transform-origin="50% 50%"
+        transform="rotate({(hour / 12) * 360 + (360 / 12) * (minute / 60)})"
+      >
+        <circle
+          cx="50%"
+          cy="50%"
+          r="4"
+          fill="transparent"
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+        ></circle>
+        <line
+          x1="50%"
+          y1={60 - 4 - 24}
+          x2="50%"
+          y2={60 - 4}
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+        <line
+          x1="50%"
+          y1={60 + 4}
+          x2="50%"
+          y2={60 + 4 + 4}
+          stroke="var(--tr-dark-grey)"
+          stroke-width={CLOCK_WEIGHT[clockWeight]}
+          transform-origin="50% 50%"
+        ></line>
+      </g>
+      <circle
+        class="clock-origin"
+        cx="50%"
+        cy="50%"
+        r="2"
+        fill="var(--tr-dark-grey)"
+      ></circle>
+    </svg>
+  {/if}
+  <div class="clock-info">
+    <p class="m-0 p-0 font-sans font-medium leading-none text-sm">
+      {name}
+    </p>
+    <p
+      class="m-0 p-0 font-sans text-xs leading-none"
+      style="color: var(--tr-medium-grey);"
+    >
+      {time}
+    </p>
+  </div>
+</div>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .clock-container {
+    height: var(--clock-size);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    flex: 1 1 0px;
+
+    @media (max-width: 659px) {
+      height: 48px; // XS size
+    }
+
+    .clock-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      p {
+        text-wrap: nowrap;
+      }
+    }
+
+    svg {
+      aspect-ratio: 1 / 1;
+      width: auto;
+      height: 100%;
+    }
+  }
+</style>
diff --git a/src/components/ClockWall/ClockWall.mdx b/src/components/ClockWall/ClockWall.mdx
new file mode 100644
index 0000000..a005021
--- /dev/null
+++ b/src/components/ClockWall/ClockWall.mdx
@@ -0,0 +1,27 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ClockWallStories from './ClockWall.stories.svelte';
+
+<Meta of={ClockWallStories} />
+
+# ClockWall
+
+The `ClockWall` component displays a row of analog clocks for different cities and timezones. Use it paired with the overall headline of a graphics blog page to show the time of multiple cities involved in a breaking news event.
+
+Use the [IANA tz database](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) to find valid `tzIdentifier` strings.
+
+```svelte
+<script>
+  import { ClockWall } from '@reuters-graphics/graphics-components';
+</script>
+
+<ClockWall
+  cities={[
+    { name: 'Tehran', tzIdentifier: 'Asia/Tehran' },
+    { name: 'Tel Aviv', tzIdentifier: 'Asia/Tel_Aviv' },
+    { name: 'Washington D.C.', tzIdentifier: 'America/New_York' },
+  ]}
+/>
+```
+
+<Canvas of={ClockWallStories.Demo} />
diff --git a/src/components/ClockWall/ClockWall.stories.svelte b/src/components/ClockWall/ClockWall.stories.svelte
new file mode 100644
index 0000000..328ffd5
--- /dev/null
+++ b/src/components/ClockWall/ClockWall.stories.svelte
@@ -0,0 +1,21 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ClockWall from './ClockWall.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Blog/ClockWall',
+    component: ClockWall,
+    argTypes: {
+      clockSize: {
+        control: 'select',
+        options: ['XS', 'MD', 'LG', 'XL'],
+      },
+      clockWeight: {
+        control: 'select',
+        options: ['Light', 'Normal', 'Bold'],
+      },
+    },
+  });
+</script>
+
+<Story name="Demo" />
diff --git a/src/components/ClockWall/ClockWall.svelte b/src/components/ClockWall/ClockWall.svelte
new file mode 100644
index 0000000..5d90005
--- /dev/null
+++ b/src/components/ClockWall/ClockWall.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+  import type { ComponentProps } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+  import Clock from './Clock.svelte';
+
+  type ClockProps = ComponentProps<typeof Clock>;
+
+  interface City {
+    name: string;
+    tzIdentifier: string;
+  }
+
+  interface Props {
+    cities?: City[];
+    width?: ContainerWidth;
+    clockSize?: ClockProps['clockSize'];
+    clockWeight?: ClockProps['clockWeight'];
+  }
+
+  let {
+    cities = [
+      { name: 'Tehran', tzIdentifier: 'Asia/Tehran' },
+      { name: 'Tel Aviv', tzIdentifier: 'Asia/Tel_Aviv' },
+      { name: 'Washington D.C.', tzIdentifier: 'America/New_York' },
+    ],
+    width = 'normal',
+    clockSize = 'XS',
+    clockWeight = 'Bold',
+  }: Props = $props();
+</script>
+
+<Block {width} class="my-6">
+  <div id="clock-group">
+    {#each cities as city (city.tzIdentifier)}
+      <Clock
+        name={city.name}
+        tzIdentifier={city.tzIdentifier}
+        {clockSize}
+        {clockWeight}
+      />
+    {/each}
+  </div>
+</Block>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  div#clock-group {
+    width: 100%;
+    margin: 0px auto;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px 1rem;
+    justify-content: space-around;
+
+    @media (max-width: 659px) {
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/components/DatawrapperChart/DatawrapperChart.mdx b/src/components/DatawrapperChart/DatawrapperChart.mdx
new file mode 100644
index 0000000..e444f37
--- /dev/null
+++ b/src/components/DatawrapperChart/DatawrapperChart.mdx
@@ -0,0 +1,45 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as DatawrapperChartStories from './DatawrapperChart.stories.svelte';
+
+<Meta of={DatawrapperChartStories} />
+
+# DatawrapperChart
+
+Easily add a responsive Datawrapper embed on your page.
+
+```svelte
+<script>
+  import { DatawrapperChart } from '@reuters-graphics/graphics-components';
+</script>
+
+<DatawrapperChart
+  title="Global abortion access"
+  ariaLabel="map"
+  id="abortion-rights-map"
+  src="https://graphics.reuters.com/USA-ABORTION/lgpdwggnwvo/media-embed.html"
+/>
+```
+
+##### Getting the chart URL for `src`
+
+Copy the source url for the Datawrapper chart in the `src` prop.
+You can get this from the published url on Reuters Graphics.
+
+- Publish the chart on Datawrapper.
+- Go to the **Datawrapper charts** Teams channel, wait for the graphic to finish publishing.
+- Inside **Embed code (for developers only)**, find and copy the url inside the `src` prop. (It ends in `media-embed.html`.)
+
+**Note:** There is no need to update the url if you update the chart inside Datawrapper. Any changes will be automatically reflected.
+
+<Canvas of={DatawrapperChartStories.Demo} />
+
+## With chatter
+
+By default, Datawrapper will export your chart with the chart chatter like title, description and notes.
+
+At the moment, these don't _exactly_ match our styles and can't be made to fit into the article well.
+
+Instead, it's often better to remove all the text from your Datawrapper chart before publishing it and add that text back via the component props.
+
+<Canvas of={DatawrapperChartStories.WithChatter} />
diff --git a/src/components/DatawrapperChart/DatawrapperChart.stories.svelte b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
new file mode 100644
index 0000000..412d1ad
--- /dev/null
+++ b/src/components/DatawrapperChart/DatawrapperChart.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DatawrapperChart from './DatawrapperChart.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Graphics/DatawrapperChart',
+    component: DatawrapperChart,
+    tags: ['autodocs'],
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgpdwggnwvo/media-embed.html',
+    id: 'abortion-rights-map',
+    ariaLabel: 'map',
+    frameTitle: 'Global abortion access',
+  }}
+/>
+
+<Story
+  name="With chatter"
+  tags={['!autodocs']}
+  args={{
+    frameTitle: 'Global abortion access',
+    ariaLabel: 'map',
+    id: 'abortion-rights-map',
+    src: 'https://reuters.com/graphics/USA-ABORTION/lgvdwemlbpo/media-embed.html',
+    title: 'Global abortion access',
+    description: 'A map of worldwide access to abortion.',
+    notes:
+      'Note: Different indicators and additional restrictions, including different gestational limits, apply in some countries. Refer to source for full classification. Current as of May 4, 2022.\n\nSource: Center for Reproductive Rights',
+  }}
+/>
diff --git a/src/components/DatawrapperChart/DatawrapperChart.svelte b/src/components/DatawrapperChart/DatawrapperChart.svelte
new file mode 100644
index 0000000..b2fd86d
--- /dev/null
+++ b/src/components/DatawrapperChart/DatawrapperChart.svelte
@@ -0,0 +1,117 @@
+<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) -->
+<script lang="ts">
+  import { onMount, onDestroy, type Snippet } from 'svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  type ScrollingOption = 'auto' | 'yes' | 'no';
+
+  interface Props {
+    /** Title of the graphic */
+    title?: string;
+    /** Description of the graphic, passed in as a markdown string. */
+    description?: string;
+    /**
+     * iframe title
+     */
+    frameTitle: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /**
+     * iframe aria label
+     */
+    ariaLabel: string;
+    /*
+     * iframe id
+     */
+    id: string;
+    /**
+     * Datawrapper embed URL
+     */
+    src: string;
+    /** iframe scrolling option */
+    scrolling: ScrollingOption;
+    /** Width of the chart within the text well. */
+    width: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example,
+     * "normal" to keep the title, description and notes inline with the rest
+     * of the text well. Can't ever be wider than `width`.
+     */
+    textWidth: ContainerWidth;
+    /** Custom headline and chatter snippet */
+    titleSnippet?: Snippet;
+    /** Custom notes and source snippet */
+    notesSnippet?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    frameTitle = '',
+    notes,
+    ariaLabel = '',
+    id = '',
+    src,
+    scrolling = 'no',
+    width = 'normal',
+    textWidth = 'normal',
+    titleSnippet,
+    notesSnippet,
+  }: Props = $props();
+
+  let frameElement: HTMLElement;
+
+  // eslint-disable-next-line
+  const frameFiller = (e: any) => {
+    if (void 0 !== e.data['datawrapper-height']) {
+      const t = [frameElement];
+      for (const a in e.data['datawrapper-height']) {
+        for (let r = 0; r < t.length; r++) {
+          // @ts-ignore OK here
+          if (t[r].contentWindow === e.source) {
+            t[r].style.height = e.data['datawrapper-height'][a] + 'px';
+          }
+        }
+      }
+    }
+  };
+
+  onMount(() => {
+    if (typeof window !== 'undefined') {
+      window.addEventListener('message', frameFiller);
+    }
+  });
+  onDestroy(() => {
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('message', frameFiller);
+    }
+  });
+</script>
+
+<GraphicBlock {width} {textWidth} {title} {description} {notes}>
+  {#if titleSnippet}
+    <!-- Custom headline and chatter slot -->
+    {@render titleSnippet()}
+  {/if}
+
+  <div class="datawrapper-chart">
+    <iframe
+      bind:this={frameElement}
+      title={frameTitle}
+      aria-label={ariaLabel}
+      {id}
+      {src}
+      {scrolling}
+      frameborder="0"
+      data-chromatic="ignore"
+      style="width: 0; min-width: 100% !important; border: none;"
+    ></iframe>
+  </div>
+
+  {#if notesSnippet}
+    {@render notesSnippet()}
+  {/if}
+</GraphicBlock>
diff --git a/src/components/DocumentCloud/DocumentCloud.mdx b/src/components/DocumentCloud/DocumentCloud.mdx
new file mode 100644
index 0000000..88dec3d
--- /dev/null
+++ b/src/components/DocumentCloud/DocumentCloud.mdx
@@ -0,0 +1,26 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as DocumentCloudStories from './DocumentCloud.stories.svelte';
+
+<Meta of={DocumentCloudStories} />
+
+# DocumentCloud
+
+The `DocumentCloud` component embeds a document hosted by [DocumentCloud](https://documentcloud.org).
+
+The document must have its access level set to **public** before it can be embedded. The `slug` can be found after the final slash in the document's URL.
+
+For instance, the document included in the example is found at [documentcloud.org/documents/3259984-Trump-Intelligence-Allegations](https://www.documentcloud.org/documents/3259984-Trump-Intelligence-Allegations). The `slug` is `3259984-Trump-Intelligence-Allegations`.
+
+```svelte
+<script>
+  import { DocumentCloud } from '@reuters-graphics/graphics-components';
+</script>
+
+<DocumentCloud
+  slug="3259984-Trump-Intelligence-Allegations"
+  altText="These Reports Allege Trump Has Deep Ties To Russia"
+/>
+```
+
+<Canvas of={DocumentCloudStories.Demo} />
diff --git a/src/components/DocumentCloud/DocumentCloud.stories.svelte b/src/components/DocumentCloud/DocumentCloud.stories.svelte
new file mode 100644
index 0000000..22f69e6
--- /dev/null
+++ b/src/components/DocumentCloud/DocumentCloud.stories.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import DocumentCloud from './DocumentCloud.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/DocumentCloud',
+    component: DocumentCloud,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    slug: '3259984-Trump-Intelligence-Allegations',
+    altText: 'These Reports Allege Trump Has Deep Ties To Russia',
+  }}
+/>
diff --git a/src/components/DocumentCloud/DocumentCloud.svelte b/src/components/DocumentCloud/DocumentCloud.svelte
new file mode 100644
index 0000000..01a86cc
--- /dev/null
+++ b/src/components/DocumentCloud/DocumentCloud.svelte
@@ -0,0 +1,41 @@
+<!-- @component `DocumentCloud` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-documentcloud--docs) -->
+<script lang="ts">
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+
+  interface Props {
+    /**
+     * The unique identifier for the document.
+     */
+    slug: string;
+    /**
+     * Alt text for the document.
+     */
+    altText: string;
+    /**
+     * Width of the container, one of: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string; // Add a class to target with SCSS.
+  }
+
+  let {
+    slug,
+    altText,
+    width = 'normal',
+    id = '',
+    class: cls = '',
+  }: Props = $props();
+</script>
+
+<Block {width} {id} class="photo fmy-6 {cls}">
+  <iframe
+    class="h-screen"
+    src="https://embed.documentcloud.org/documents/{slug}/?embed=1&amp;responsive=1&amp;title=1"
+    title={altText}
+    sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-popups-to-escape-sandbox"
+  ></iframe>
+</Block>
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
new file mode 100644
index 0000000..12693e2
--- /dev/null
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.mdx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/blocks';
+
+import * as EmbedPreviewerLinkStories from './EmbedPreviewerLink.stories.svelte';
+
+<Meta of={EmbedPreviewerLinkStories} />
+
+# EmbedPreviewerLink
+
+The `EmbedPreviewerLink` component is a tool for previewing the embeds in development. It adds an icon at the bottom of the page that, when clicked, opens a previewer with the embeds.
+
+```svelte
+<script>
+  import { EmbedPreviewerLink } from '@reuters-graphics/graphics-components';
+
+  import { dev } from '$app/env';
+</script>
+
+<EmbedPreviewerLink {dev} />
+```
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
new file mode 100644
index 0000000..80f2fa4
--- /dev/null
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.stories.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+  import EmbedPreviewerLink from './EmbedPreviewerLink.svelte';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/EmbedPreviewerLink',
+    component: EmbedPreviewerLink,
+  });
+</script>
+
+<Story
+  name="Demo"
+  tags={['!autodocs', '!dev']}
+  args={{
+    dev: true,
+  }}
+/>
diff --git a/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
new file mode 100644
index 0000000..365fa22
--- /dev/null
+++ b/src/components/EmbedPreviewerLink/EmbedPreviewerLink.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faWindowRestore } from '@fortawesome/free-regular-svg-icons';
+  interface Props {
+    dev?: boolean;
+  }
+
+  let { dev = false }: Props = $props();
+</script>
+
+{#if dev}
+  <div>
+    <a rel="external" href="/embed-previewer">
+      <Fa icon={faWindowRestore} />
+    </a>
+  </div>
+{/if}
+
+<style lang="scss">
+  div {
+    position: fixed;
+    bottom: 5px;
+    left: 10px;
+    font-size: 18px;
+    a {
+      color: #ccc;
+      &:hover {
+        color: #666;
+      }
+    }
+  }
+</style>
diff --git a/src/components/EndNotes/EndNotes.mdx b/src/components/EndNotes/EndNotes.mdx
new file mode 100644
index 0000000..90e8bf9
--- /dev/null
+++ b/src/components/EndNotes/EndNotes.mdx
@@ -0,0 +1,67 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as EndNotesStories from './EndNotes.stories.svelte';
+
+<Meta of={EndNotesStories} />
+
+# EndNotes
+
+The `EndNotes` component adds notes such as sources, clarifiying notes and minor corrections that come at the end of a story.
+
+```svelte
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  const notes = [
+    {
+      title: 'Note',
+      text: 'Data is current as of today.',
+    },
+    {
+      title: 'Sources',
+      text: 'Data, Inc.',
+    },
+    {
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+    },
+  ];
+</script>
+
+<EndNotes {notes} />
+```
+
+<Canvas of={EndNotesStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[endNotes]
+title: Note
+text: Data is current as of today
+
+title: Sources
+text: Data, Inc.
+
+title: Edited by
+text: Editor, Copyeditor
+[]
+```
+
+... which you'll pass to the `EndNotes` component.
+
+```svelte
+<!-- graphics kit -->
+<script>
+  import { EndNotes } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+</script>
+
+<EndNotes notes={content.endNotes} />
+```
+
+<Canvas of={EndNotesStories.Demo} />
diff --git a/src/components/EndNotes/EndNotes.stories.svelte b/src/components/EndNotes/EndNotes.stories.svelte
new file mode 100644
index 0000000..1979205
--- /dev/null
+++ b/src/components/EndNotes/EndNotes.stories.svelte
@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import EndNotes from './EndNotes.svelte';
+
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/EndNotes',
+    component: EndNotes,
+  });
+</script>
+
+<script>
+  const notes = [
+    {
+      title: 'Note',
+      text: 'Data is current as of today.',
+    },
+    {
+      title: 'Sources',
+      text: 'Data, Inc.',
+    },
+    {
+      title: 'Edited by',
+      text: '<a href="https://www.reuters.com/graphics/">Editor</a>, Copyeditor',
+    },
+  ];
+</script>
+
+<Story name="Demo" args={{ notes }} />
diff --git a/src/components/EndNotes/EndNotes.svelte b/src/components/EndNotes/EndNotes.svelte
new file mode 100644
index 0000000..71d3818
--- /dev/null
+++ b/src/components/EndNotes/EndNotes.svelte
@@ -0,0 +1,58 @@
+<!-- @component `EndNotes` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-endnotes--docs) -->
+<script lang="ts">
+  interface EndNote {
+    /**
+     * Title of the note item
+     */
+    title: string;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text: string;
+  }
+
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  interface Props {
+    /**
+     * An array of endnote items.
+     */
+    notes: EndNote[];
+  }
+
+  let { notes }: Props = $props();
+</script>
+
+<Block class="notes fmt-6 fmb-8">
+  {#each notes as note}
+    <div class="note-title">
+      <Markdown source={note.title} />
+    </div>
+    <div class="note-content">
+      <Markdown source={note.text} />
+    </div>
+  {/each}
+</Block>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .note-title {
+    :global(p) {
+      @include mixins.body-caption;
+      @include mixins.text-primary;
+      @include mixins.font-medium;
+      @include mixins.tracking-normal;
+      @include mixins.fmt-3;
+      margin-block-end: 0.125rem;
+      text-transform: none;
+    }
+  }
+
+  .note-content {
+    :global(p) {
+      @include mixins.body-caption;
+      @include mixins.fmt-0;
+    }
+  }
+</style>
diff --git a/src/components/FeaturePhoto/FeaturePhoto.mdx b/src/components/FeaturePhoto/FeaturePhoto.mdx
new file mode 100644
index 0000000..71d90e5
--- /dev/null
+++ b/src/components/FeaturePhoto/FeaturePhoto.mdx
@@ -0,0 +1,72 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as FeaturePhotoStories from './FeaturePhoto.stories.svelte';
+
+<Meta of={FeaturePhotoStories} />
+
+# FeaturePhoto
+
+The `FeaturePhoto` component adds a full-width photo.
+
+```svelte
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<FeaturePhoto
+  src={`${assets}/images/myImage.jpg`}
+  altText="Some alt text"
+  caption="A caption"
+/>
+```
+
+<Canvas of={FeaturePhotoStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+
+type: photo
+width: normal
+src: images/shark.jpg
+altText: The king of the sea
+caption: Carcharodon carcharias - REUTERS
+
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `FeaturePhoto` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { FeaturePhoto } from '@reuters-graphics/graphics-components';
+
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+</script>
+
+{#each content.blocks as block}
+  {#if block.Type === 'text'}
+    <!-- ... -->
+  {:else if block.type === 'photo'}
+    <FeaturePhoto
+      width={block.width}
+      src={`${assets}/${block.src}`}
+      altText={block.altText}
+      caption={block.caption}
+    />
+  {/if}
+{/each}
+```
+
+## Missing alt text
+
+`altText` is required in this component. If your photo is missing it, a small red text box will overlay the image.
+
+<Canvas of={FeaturePhotoStories.MissingAltText} />
diff --git a/src/components/FeaturePhoto/FeaturePhoto.stories.svelte b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
new file mode 100644
index 0000000..5576996
--- /dev/null
+++ b/src/components/FeaturePhoto/FeaturePhoto.stories.svelte
@@ -0,0 +1,41 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import FeaturePhoto from './FeaturePhoto.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Multimedia/FeaturePhoto',
+    component: FeaturePhoto,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      textWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
+
+<script>
+  import sharkSrc from './images/shark.jpg';
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    src: sharkSrc,
+    altText: 'A shark!',
+    caption: 'Carcharodon carcharias - REUTERS',
+  }}
+/>
+
+<Story
+  name="Missing altText"
+  exportName="MissingAltText"
+  args={{
+    src: sharkSrc,
+    caption: 'Carcharodon carcharias - REUTERS',
+  }}
+/>
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
new file mode 100644
index 0000000..a750d23
--- /dev/null
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -0,0 +1,145 @@
+<!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  import Block from '../Block/Block.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  interface Props {
+    /**
+     * Photo source
+     */
+    src: string;
+    /**
+     * Photo altText
+     */
+    altText: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id?: string;
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class?: string;
+    /**
+     * Photo caption
+     */
+    caption?: string;
+    /**
+     * Height of the photo placeholder when lazy-loading
+     */
+    height?: number;
+    /**
+     * Width of the container: normal, wide, wider, widest or fluid
+     */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text vs the photo. For example, "normal" to keep the title, description and notes inline with the rest of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /**
+     * Whether to lazy load the photo using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+     */
+    lazy?: boolean;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` when lazy loading.
+     */
+    top?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` when lazy loading.
+     */
+    bottom?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` when lazy loading.
+     */
+    left?: number;
+    /**
+     * Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` when lazy loading.
+     */
+    right?: number;
+  }
+
+  let {
+    src,
+    altText,
+    id = '',
+    class: cls = '',
+    caption,
+    height = 100,
+    width = 'normal',
+    textWidth = 'normal',
+    lazy = true,
+    top = 0,
+    bottom = 0,
+    left = 0,
+    right = 0,
+  }: Props = $props();
+
+  let intersecting = $state(false);
+  let container: HTMLElement;
+  const intersectable = typeof IntersectionObserver !== 'undefined';
+
+  onMount(() => {
+    if (!lazy) return;
+
+    if (intersectable) {
+      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          intersecting = entries[0].isIntersecting;
+          if (intersecting) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+        }
+      );
+
+      observer.observe(container);
+      return () => observer.unobserve(container);
+    }
+  });
+</script>
+
+<Block {width} class="photo fmy-6 {cls}" {id}>
+  <figure
+    bind:this={container}
+    aria-label="media"
+    class="w-full flex flex-col relative"
+  >
+    {#if !lazy || (intersectable && intersecting)}
+      <img class="w-full my-0" {src} alt={altText} />
+    {:else}
+      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
+    {/if}
+    {#if caption}
+      <PaddingReset containerIsFluid={width === 'fluid'}>
+        <Block width={textWidth} class="notes w-full fmy-0">
+          <figcaption>
+            {caption}
+          </figcaption>
+        </Block>
+      </PaddingReset>
+    {/if}
+    {#if !altText}
+      <div class="alt-warning absolute text-xxs py-1 px-2">altText</div>
+    {/if}
+  </figure>
+</Block>
+
+<style lang="scss">
+  .placeholder {
+    background-color: #ccc;
+  }
+
+  div.alt-warning {
+    background-color: red;
+    color: white;
+    top: 0;
+    right: 0;
+  }
+</style>
diff --git a/src/components/FeaturePhoto/images/shark.jpg b/src/components/FeaturePhoto/images/shark.jpg
new file mode 100644
index 0000000..5b54e9f
Binary files /dev/null and b/src/components/FeaturePhoto/images/shark.jpg differ
diff --git a/src/components/Framer/Dropdown/index.svelte b/src/components/Framer/Dropdown/index.svelte
index 8798d5b..c3393be 100644
--- a/src/components/Framer/Dropdown/index.svelte
+++ b/src/components/Framer/Dropdown/index.svelte
@@ -21,7 +21,7 @@
 </form>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   label {
     margin-bottom: 0.25rem;
diff --git a/src/components/Framer/Framer.svelte b/src/components/Framer/Framer.svelte
index 4c7937e..55b155f 100644
--- a/src/components/Framer/Framer.svelte
+++ b/src/components/Framer/Framer.svelte
@@ -149,7 +149,7 @@
 {/if}
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   header {
     text-align: center;
diff --git a/src/components/Framer/Typeahead/index.svelte b/src/components/Framer/Typeahead/index.svelte
index 798f219..8a6cf1a 100644
--- a/src/components/Framer/Typeahead/index.svelte
+++ b/src/components/Framer/Typeahead/index.svelte
@@ -283,7 +283,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   [data-svelte-typeahead] {
     position: relative;
diff --git a/src/components/Functions/Utils.mdx b/src/components/Functions/Utils.mdx
new file mode 100644
index 0000000..f4e1b54
--- /dev/null
+++ b/src/components/Functions/Utils.mdx
@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/blocks';
+
+import * as UtilFunctionStories from './Utils.stories.svelte';
+
+<Meta of={UtilFunctionStories} />
+
+# Util functions
+
+This library provides utility functions that can be used across various components and applications.
+
+## Prettify date in the Reuters format
+
+The function `prettifyDate` formats the input string, which is expected to be in English, to format the month and time designator (AM/PM) according to the Reuters style guide. The function is case agnostic and will format both full month names and their 3-letter abbreviations (i.e. `Mar` or `Jun`) correctly.
+
+```javascript
+import { prettifyDate } from '@reuters-graphics/graphics-components';
+
+// Example usage
+prettifyDate('January 1, 2023, 10:00 AM'); // returns 'Jan. 1, 2023, 10:00 a.m.'
+prettifyDate('Jan 1, 2023, 10:00 PM'); // returns 'Jan. 1, 2023, 10:00 p.m.'
+prettifyDate('MAR. 2025'); // returns 'March 2025'
+prettifyDate('sep. 1, 2023, 10:00PM'); // returns 'Sept. 1, 2023, 10:00 p.m.'
+```
diff --git a/src/components/Functions/Utils.stories.svelte b/src/components/Functions/Utils.stories.svelte
new file mode 100644
index 0000000..fe7b28a
--- /dev/null
+++ b/src/components/Functions/Utils.stories.svelte
@@ -0,0 +1,9 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Functions',
+  });
+</script>
+
+<Story name="Demo" tags={['!autodocs', '!dev']} />
diff --git a/src/components/Geocoder/Geocoder.svelte b/src/components/Geocoder/Geocoder.svelte
index 70d616f..3d76055 100644
--- a/src/components/Geocoder/Geocoder.svelte
+++ b/src/components/Geocoder/Geocoder.svelte
@@ -192,7 +192,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .geocoder-input-wrapper {
     position: relative;
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index a9deaff..0c41a39 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -128,7 +128,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   div.container {
     display: contents;
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 447f5b7..026ce36 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -145,7 +145,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
   .headline-wrapper {
     :global(.dek) {
       max-width: mixins.$column-width-normal;
diff --git a/src/components/Headpile/Headpile.mdx b/src/components/Headpile/Headpile.mdx
new file mode 100644
index 0000000..dcdc28e
--- /dev/null
+++ b/src/components/Headpile/Headpile.mdx
@@ -0,0 +1,37 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeadpileStories from './Headpile.stories.svelte';
+
+<Meta of={HeadpileStories} />
+
+# Headpile
+
+The `Headpile` component is a headshot-bulleted list of people, identifying them with their names, roles and a short description of their significance to a story.
+
+It's designed to be used with headshots that have had their background removed, which can be done in the [Preview app](https://support.apple.com/en-gb/guide/preview/prvw15636/mac?#apd320b3b1b750a4) on macOS.
+
+```svelte
+<script>
+  import { Headpile } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+</script>
+
+<Headpile
+  figures={[
+    {
+      img: `${assets}/images/person-A.jpg`,
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      text: 'Burhan was little known in public life until taking part in the coup ...',
+    },
+    {
+      img: `${assets}/images/person-B.jpg`,
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      text: 'Popularly known as Hemedti, Dagalo rose from lowly beginnings ...',
+    },
+  ]}
+/>
+```
+
+<Canvas of={HeadpileStories.Demo} />
diff --git a/src/components/Headpile/Headpile.stories.svelte b/src/components/Headpile/Headpile.stories.svelte
new file mode 100644
index 0000000..576bd89
--- /dev/null
+++ b/src/components/Headpile/Headpile.stories.svelte
@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Headpile from './Headpile.svelte';
+
+  import hed1 from './images/abdel.png';
+  import hed2 from './images/hemedti.png';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/Headpile',
+    component: Headpile,
+    argTypes: {},
+  });
+
+  const defaultArgs = [
+    {
+      name: 'General Abdel Fattah al-Burhan',
+      role: "Sudan's Sovereign Council Chief and military commander",
+      img: hed1,
+      text: 'Burhan was little known in public life until taking part in the coup against Bashir in 2019 after a popular uprising against his rule. In August 2019, his role as de facto head of state was affirmed when he became head of the Sovereign Council, a body comprising civilian and military leaders formed to oversee the transition towards elections.',
+      // colour: '#957caa',
+    },
+    {
+      name: 'General Mohamed Hamdan Dagalo',
+      role: 'Leader of the Sudanese paramilitary Rapid Support Forces (RSF)',
+      img: hed2,
+      text: "Popularly known as Hemedti, Dagalo rose from lowly beginnings as a camel trader to head a widely feared Arab militia that crushed a revolt in Darfur, winning him influence and eventually a role as Sudan's former deputy head of state.\r\n\r\nOver the past decade, he has been a key figure in Sudanese politics, aiding in the ousting of Bashir in 2019 and suppressing pro-democracy protests. As the country limped from one economic crisis to another, Hemedti became one of Sudan’s richest men, exporting gold from mines in Darfur seized by his fighters.",
+      colour: '#afb776',
+    },
+  ];
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    figures: defaultArgs,
+  }}
+/>
diff --git a/src/components/Headpile/Headpile.svelte b/src/components/Headpile/Headpile.svelte
new file mode 100644
index 0000000..d43bd80
--- /dev/null
+++ b/src/components/Headpile/Headpile.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { ContainerWidth } from '../@types/global';
+  import Block from '../Block/Block.svelte';
+  import KeyFigure from './KeyFigure.svelte';
+
+  interface Props {
+    /**
+     * Add classes to target with custom CSS.
+     */
+    class: string;
+    /**
+     * Add an id to target with custom CSS.
+     */
+    id: string;
+    /**
+     * Width of the container.
+     */
+    width: Extract<ContainerWidth, 'normal' | 'wide'>;
+    /**
+     * Default background colour to be used as a mount behind the headshot.
+     */
+    colour: string;
+    /**
+     * Individual figures -- i.e., people -- for the headpile.
+     */
+    figures: {
+      /**
+       * Headshot image src. Be sure to prefix the image
+       *
+       * ```typescript
+       * import { assets } from '$app/paths';
+       *
+       * const imgSrc = `${assets}/images/my-image.jpg`;
+       * ```
+       */
+      img: string;
+      /**
+       * Figure name.
+       */
+      name: string;
+      /**
+       * Figure role or title.
+       */
+      role?: string;
+      /**
+       * Text describing the person.
+       */
+      text: string;
+      /**
+       * Background colour to be used as a mount behind the headshot.
+       */
+      colour?: string;
+    }[];
+  }
+
+  let {
+    figures,
+    class: cls,
+    id,
+    width = 'normal',
+    colour = '#cccccc',
+  }: Props = $props();
+</script>
+
+<Block class="fmy-6 {cls} {id} {width}">
+  <div class="figures">
+    {#each figures as figure}
+      <KeyFigure {...{ ...figure, colour: figure.colour ?? colour }} />
+    {/each}
+  </div>
+</Block>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  div.figures {
+    display: flex;
+    flex-direction: column;
+    gap: 2.75rem;
+  }
+</style>
diff --git a/src/components/Headpile/Headshot.svelte b/src/components/Headpile/Headshot.svelte
new file mode 100644
index 0000000..dd2afff
--- /dev/null
+++ b/src/components/Headpile/Headshot.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  let { img = '', colour = 'var(--theme-colour-accent)' } = $props();
+</script>
+
+<div class="headshot-wrapper">
+  <div class="background" style="background-color: {colour};"></div>
+  <div class="headshot" style="background-image: url({img}); "></div>
+</div>
+
+<style lang="scss">
+  .headshot-wrapper {
+    width: 7rem;
+    height: 6.75rem;
+    position: relative;
+    margin-block-start: -1.75rem;
+    margin-block-end: -1.75rem;
+    border-radius: 0.25rem;
+    overflow: hidden;
+  }
+  .background {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    width: 7rem;
+    height: 4.75rem;
+    display: inline-block;
+    border-radius: 0.25rem;
+  }
+  .headshot {
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    background-size: 106%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/components/Headpile/KeyFigure.svelte b/src/components/Headpile/KeyFigure.svelte
new file mode 100644
index 0000000..a4cec85
--- /dev/null
+++ b/src/components/Headpile/KeyFigure.svelte
@@ -0,0 +1,108 @@
+<script lang="ts">
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+  import Headshot from './Headshot.svelte';
+  import { MediaQuery } from 'svelte/reactivity';
+
+  interface Props {
+    img: string;
+    name: string;
+    role?: string;
+    text: string;
+    colour?: string;
+  }
+
+  let { name, role, img, text, colour }: Props = $props();
+
+  const mobile = new MediaQuery('max-width: 600px');
+</script>
+
+<div>
+  <div class="wrapper-profile">
+    <div>
+      <Headshot {img} {colour} />
+    </div>
+    <div class="text">
+      <div class="title">{name}</div>
+      <div class="role">
+        {role || ''}
+      </div>
+      {#if !mobile.current}
+        <div class="description desktop">
+          <Markdown source={text} />
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if mobile.current}
+    <div class="description mobile">
+      <Markdown source={text} />
+    </div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .wrapper-profile {
+    display: flex;
+    align-items: flex-start;
+    justify-content: start;
+    gap: 1rem;
+    width: 100%;
+    min-height: 5.5rem;
+  }
+
+  .title {
+    @include mixins.font-bold;
+    @include mixins.text-base;
+    @include mixins.leading-none;
+
+    @media (max-width: 450px) {
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+    }
+  }
+
+  .role {
+    border-block-start: 0.5px solid var(--tr-muted-grey);
+    margin-inline-start: -0.75rem;
+    padding-inline-start: 0.75rem;
+    margin-block-start: 0.25rem;
+    padding-block-start: 0.25rem;
+
+    @include mixins.font-note;
+    @include mixins.text-secondary;
+    @include mixins.text-sm;
+    @include mixins.font-light;
+    @include mixins.leading-tighter;
+    @include mixins.fmb-4;
+
+    @media (max-width: 450px) {
+      @include mixins.text-xs;
+    }
+  }
+
+  .description {
+    :global(p) {
+      @include mixins.font-note;
+      font-size: calc(0.9 * var(--theme-font-size-base, 1rem));
+      font-weight: 300;
+      @include mixins.fmb-0;
+      text-wrap: pretty;
+    }
+    &.desktop {
+      display: block;
+    }
+    &.mobile {
+      display: none;
+    }
+    @media (max-width: 600px) {
+      &.desktop {
+        display: none;
+      }
+      &.mobile {
+        display: block;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Headpile/images/abdel.png b/src/components/Headpile/images/abdel.png
new file mode 100644
index 0000000..dcaef5c
Binary files /dev/null and b/src/components/Headpile/images/abdel.png differ
diff --git a/src/components/Headpile/images/hemedti.png b/src/components/Headpile/images/hemedti.png
new file mode 100644
index 0000000..c432113
Binary files /dev/null and b/src/components/Headpile/images/hemedti.png differ
diff --git a/src/components/HeroHeadline/HeroHeadline.mdx b/src/components/HeroHeadline/HeroHeadline.mdx
new file mode 100644
index 0000000..1091015
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.mdx
@@ -0,0 +1,329 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as HeroHeadlineStories from './HeroHeadline.stories.svelte';
+
+<Meta of={HeroHeadlineStories} />
+
+# HeroHeadline
+
+The `HeroHeadline` component creates a Reuters Graphics headline with a hero media, which can be a graphic, photo, video or other media.
+
+By default, the hero is in the background, i.e., the headline and dek are stacked on top of the hero. You can unstack and insert the hero media inline -- i.e., before or after the headline -- by setting `stacked: false`. [Read more.](?/iframe.html?viewMode=docs&id=components-text-elements-heroheadline--docs&globals=&args=#inline-hero)
+
+## Photo hero
+
+To use a photo as the hero, simply pass the image source to the `img` prop.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  img={`${assets}/images/polar-bear.jpg`}
+  ariaDescription="A photo of a polar bear"
+  notes="Photo by REUTERS"
+  section={'World News'}
+  hed={'Reuters Graphics Interactive'}
+  dek={'The beginning of a beautiful page'}
+  authors={['Jane Doe', 'John Doe']}
+/>
+```
+
+<Canvas of={HeroHeadlineStories.PhotoHero} />
+
+## Transparent site header
+
+In the graphics kit, set styles in `global.scss` to make the Reuters site header transparent and make the hero go all the way to the top of the page:
+
+```scss
+// global.scss
+.nav-container {
+  background-color: transparent !important;
+}
+.nav-container .inner {
+  background-color: transparent !important;
+  border: none !important;
+}
+.hero-wrapper {
+  margin-block-start: -64px;
+}
+```
+
+<Canvas of={HeroHeadlineStories.TransparentHeader} />
+
+## Ai2svelte hero
+
+To use an ai2svelte graphic as the hero, wrap your ai2svelte component in a `GraphicBlock` component and insert it inside `HeroHeadline`.
+
+To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the ai2svelte graphic.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+
+  import QuakeMap from './ai2svelte/graphic.svelte'; // Your ai2svelte component
+
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  hed="Earthquake devastates Afghanistan"
+  hedSize="big"
+  hedWidth="wide"
+  class="custom-hero mb-0"
+  authors={[
+    'Anand Katakam',
+    'Vijdan Mohammad Kawoosa',
+    'Adolfo Arranz',
+    'Wen Foo',
+    'Simon Scarr',
+    'Aman Bhargava',
+    'Jitesh Chowdhury',
+    'Manas Sharma',
+    'Aditi Bhandari',
+  ]}
+  publishTime={new Date('2022-06-24').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+  >
+    <!-- Pass `assetsPath` if in graphics kit -->
+    <QuakeMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+// Customise styles using the class (e.g. `custom-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  .custom-hero.headline {
+    // Adjust vertical positioning
+    align-items: flex-end !important;
+
+    @media (max-width: 1100px) {
+      // Adjust line length of title
+      max-width: var(--normal-column-width) !important;
+    }
+  }
+
+  // Make hero shorter than 100vh
+  --heroHeight: 85svh;
+
+  @media (max-width: 960px) {
+    --heroHeight: 65svh;
+  }
+
+  // For small height
+  @media (max-height: 850px) {
+    --heroHeight: 100svh;
+  }
+
+  // Custom hero sizing for landscape mobile
+  @media (max-width: 960px) and (orientation: landscape) {
+    --heroHeight: 200svh;
+  }
+}
+
+// Override default fixed height for hero layout in embeds
+.hero-wrapper.embedded {
+  --heroHeight: 1000px;
+}
+```
+
+<Canvas of={HeroHeadlineStories.Ai2svelteHero} />
+
+## Video hero
+
+To add a video as the hero, use the [Video](?path=/docs/components-multimedia-video--docs) component. To customise styles, use CSS to target the class passed to `HeroHeadline`.
+
+> **Note:** Pass `notes` and `ariaDescription` to the `GraphicBlock` component to provide additional information about the video.
+
+```svelte
+<script>
+  import { HeroHeadline, Video } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+</script>
+
+<HeroHeadline
+  {embedded}
+  class="video-hero"
+  hed="The conflict in Ethiopia"
+  hedSize="bigger"
+  hedWidth="wide"
+  authors={['Aditi Bhandari ', 'David Lewis']}
+  publishTime={new Date('2020-12-18').toISOString()}
+>
+  <Video
+    width="widest"
+    class="my-0"
+    showControls={false}
+    preloadVideo="auto"
+    playVideoWhenInView={false}
+    src={`${assets}/videos/intro.mp4`}
+    poster={`${assets}/images/video-poster-intro.jpg`}
+    notes="Drone footage from the Village 8 refugee camp in Sudan."
+    ariaDescription="Aerial footage of people houses in refugee camp"
+  />
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+// Customise styles using the class (e.g. `video-hero` here) passed to `HeroHeadline`
+.hero-wrapper {
+  --heroHeight: calc(100svh - 60px);
+  .video-hero.headline {
+    header {
+      // Adjust vertical position as offset from default center
+      top: calc(50svh - 250px);
+    }
+
+    h1 {
+      color: #ffd430;
+      text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+    }
+  }
+}
+```
+
+<Canvas of={HeroHeadlineStories.VideoHero} />
+
+## Inline hero
+
+To use a photo, graphic, video, etc. as an inline hero -- i.e., to make the hero appear _after_ the headline and dek, instead of stacked underneath -- set `stacked` to `false`. Otherwise, add your hero media in the same way as documented above.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import {
+    HeroHeadline,
+    GraphicBlock,
+  } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the graphics kit...
+
+  let { embedded = false } = $props(); // 👈 If using in the graphics kit...
+</script>
+
+<!-- Set `stacked` to `false` -->
+<HeroHeadline
+  {embedded}
+  stacked={false}
+  section="Global news"
+  hed="The plunge from 29,000 feet"
+  dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+  class="mb-0"
+  authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+  publishTime={new Date('2020-01-01').toISOString()}
+>
+  <GraphicBlock
+    width="widest"
+    role="figure"
+    class="my-0"
+    ariaDescription="Earthquake impact map"
+    notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+  >
+    <!-- Pass `assetsPath` if in graphics kit -->
+    <CrashMap assetsPath={assets || '/'} />
+  </GraphicBlock>
+</HeroHeadline>
+```
+
+<Canvas of={HeroHeadlineStories.InlineHero} />
+
+## Custom hed, dek and byline
+
+The `HeroHeadline` component internally uses the [Headline](?path=/docs/components-text-elements-headline--docs) component to render the headline and dek, which lets you to customise the headline and dek by passing [snippets](https://svelte.dev/docs/svelte/snippet) into the `hed` and `dek` props.
+
+Since `Headline` internally uses the [Byline](?path=/docs/components-text-elements-headline--docs) component, you can also customise the author page hyperlink and bylines with the `getAuthorPage`, `byline`, `published` and `updated` props.
+
+```svelte
+<!-- App.svelte -->
+<HeroHeadline
+  class="custom-hed"
+  authors={[
+    'Prasanta Kumar Dutta',
+    'Dea Bankova',
+    'Aditi Bhandari',
+    'Anurag Rao',
+  ]}
+  publishTime={new Date('2023-05-11').toISOString()}
+  img={eurovisImgSrc}
+  getAuthorPage={(author) => {
+    return `mailto:${author.replace(' ', '')}@example.com`;
+  }}
+>
+  <!-- Custom hed snippet -->
+  {#snippet hed()}
+    <h1>
+      <div class="body-note">A visual guide to</div>
+      <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+    </h1>
+  {/snippet}
+
+  <!-- Custom dek snippet -->
+  {#snippet dek()}
+    <div class="dek">
+      <p>
+        Performers from 37 countries are coming together May 9-13 in Liverpool,
+        England, for the 67th annual Eurovision Song Contest. The winner gets
+        the trophy and their country gets the right to host next year’s event,
+        produced by the European Broadcasting Union (EBU).
+      </p>
+    </div>
+  {/snippet}
+</HeroHeadline>
+```
+
+Add styles in `global.scss`:
+
+```scss
+// global.scss
+.custom-hed {
+  h1 {
+    .body-note {
+      color: #ffffff;
+    }
+    .title {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+
+  .dek {
+    margin-block-start: 1rem;
+    p {
+      color: #ffffff;
+      text-shadow: 1px 1px 8px #ff7c88;
+      filter: drop-shadow(0px 0px 12px #ff7c88);
+    }
+  }
+}
+```
+
+<Canvas of={HeroHeadlineStories.CustomHed} />
diff --git a/src/components/HeroHeadline/HeroHeadline.stories.svelte b/src/components/HeroHeadline/HeroHeadline.stories.svelte
new file mode 100644
index 0000000..5e4000e
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.stories.svelte
@@ -0,0 +1,287 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import HeroHeadline from './HeroHeadline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/HeroHeadline',
+    component: HeroHeadline,
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big', 'bigger', 'biggest'],
+      },
+      hedWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+      hedAlign: {
+        control: 'select',
+        options: ['left', 'center', 'right'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
+    },
+  });
+</script>
+
+<script lang="ts">
+  import polarImgSrc from './demo/polar.jpg';
+  import eurovisImgSrc from './demo/eurovis.jpeg';
+
+  import Block from '../Block/Block.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import Video from '../Video/Video.svelte';
+
+  import CrashMap from './demo/graphics/crash.svelte';
+  import QuakeMap from './demo/graphics/quakemap.svelte';
+</script>
+
+<Story name="Photo hero" exportName="PhotoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+  <HeroHeadline
+    section="World News"
+    hed="Reuters Graphics Interactive"
+    dek="The beginning of a beautiful page"
+    authors={['Jane Doe', 'John Doe']}
+    publishTime={new Date('2022-03-04').toISOString()}
+    img={polarImgSrc}
+    notes="Photo by REUTERS"
+    ariaDescription="A photo of a polar bear"
+  />
+</Story>
+
+<Story name="Transparent header" exportName="TransparentHeader">
+  <div class="transparent-header">
+    <Block width="fluid" class="chromatic-ignore">
+      <SiteHeader />
+    </Block>
+    <HeroHeadline
+      section="World News"
+      hed="Reuters Graphics Interactive"
+      dek="The beginning of a beautiful page"
+      authors={['Jane Doe', 'John Doe']}
+      publishTime={new Date('2022-03-04').toISOString()}
+      img={polarImgSrc}
+      ariaDescription="A photo of a polar bear"
+    />
+  </div>
+</Story>
+
+<Story name="Ai2svelte hero" exportName="Ai2svelteHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    hed={'Earthquake devastates Afghanistan'}
+    hedSize={'big'}
+    hedWidth="wide"
+    class="custom-hero mb-0"
+    authors={[
+      'Anand Katakam',
+      'Vijdan Mohammad Kawoosa',
+      'Adolfo Arranz',
+      'Wen Foo',
+      'Simon Scarr',
+      'Aman Bhargava',
+      'Jitesh Chowdhury',
+      'Manas Sharma',
+      'Aditi Bhandari',
+    ]}
+    publishTime={new Date('2022-06-24').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+    >
+      <QuakeMap />
+    </GraphicBlock>
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      // Make hero shorter than 100vh
+      --heroHeight: 85svh;
+
+      @media (max-width: 960px) {
+        --heroHeight: 65svh;
+      }
+
+      // For small height
+      @media (max-height: 850px) {
+        --heroHeight: 100svh;
+      }
+
+      // Custom hero sizing for landscape mobile
+      @media (max-width: 960px) and (orientation: landscape) {
+        --heroHeight: 200svh;
+      }
+
+      .custom-hero.headline {
+        // Adjust vertical positioning
+        align-items: flex-end !important;
+
+        @media (max-width: 1100px) {
+          // Adjust line length of title
+          max-width: var(--normal-column-width) !important;
+        }
+      }
+    }
+
+    // Override default fixed height for hero layout in embeds
+    .hero-wrapper.embedded {
+      --heroHeight: 1000px;
+    }
+  </style>
+</Story>
+
+<Story name="Video hero" exportName="VideoHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <HeroHeadline
+    class="video-hero"
+    hed="The conflict in Ethiopia"
+    hedSize="bigger"
+    hedWidth="wide"
+    authors={['Aditi Bhandari ', 'David Lewis']}
+    publishTime={new Date('2020-12-18').toISOString()}
+  >
+    <Video
+      width="widest"
+      class="my-0"
+      showControls={false}
+      preloadVideo="auto"
+      playVideoWhenInView={false}
+      src="https://vm.reuters.tv/9c72e/titlef2ac(425954_R21MP41500).mp4"
+      poster="https://www.reuters.com/resizer/vexYmtEuXKmfnsCbfS6jSMVbHms=/1080x0/filters:quality(80)/cloudfront-us-east-2.images.arcpublishing.com/reuters/VKJHKJEENVO4DASDND3VLHPV5Y.jpg"
+      notes="Drone footage from the Village 8 refugee camp in Sudan."
+      ariaDescription="Aerial footage of people houses in refugee camp"
+    />
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-wrapper {
+      --heroHeight: calc(100svh - 60px);
+      .video-hero.headline {
+        header {
+          // Adjust vertical position as offset from default center
+          top: calc(50svh - 250px);
+        }
+
+        h1 {
+          color: #ffd430;
+          text-shadow: 3px 4px 7px rgba(81, 67, 21, 0.8);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<Story name="Inline hero" exportName="InlineHero">
+  <Block width="fluid" class="chromatic-ignore">
+    <SiteHeader />
+  </Block>
+
+  <!-- Set `stacked` to `false` -->
+  <HeroHeadline
+    stacked={false}
+    section="Global news"
+    hed="The plunge from 29,000 feet"
+    dek="How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes."
+    class="mb-0"
+    authors={['Simon Scarr', 'Vijdan Mohammad Kawoosa']}
+    publishTime={new Date('2020-01-01').toISOString()}
+  >
+    <GraphicBlock
+      width="widest"
+      role="figure"
+      class="my-0"
+      ariaDescription="Earthquake impact map"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+    >
+      <CrashMap />
+    </GraphicBlock>
+  </HeroHeadline>
+</Story>
+
+<Story name="Custom hed" exportName="CustomHed">
+  <HeroHeadline
+    class="custom-hed"
+    authors={[
+      'Prasanta Kumar Dutta',
+      'Dea Bankova',
+      'Aditi Bhandari',
+      'Anurag Rao',
+    ]}
+    publishTime={new Date('2023-05-11').toISOString()}
+    img={eurovisImgSrc}
+    getAuthorPage={(author: string) => {
+      return `mailto:${author.replace(' ', '')}@example.com`;
+    }}
+  >
+    {#snippet hed()}
+      <h1>
+        <div class="body-note">A visual guide to</div>
+        <div class="title text-6xl font-light tracking-widest">EUROVISION</div>
+      </h1>
+    {/snippet}
+
+    {#snippet dek()}
+      <div class="dek">
+        <p>
+          Performers from 37 countries are coming together May 9-13 in
+          Liverpool, England, for the 67th annual Eurovision Song Contest. The
+          winner gets the trophy and their country gets the right to host next
+          year’s event, produced by the European Broadcasting Union (EBU).
+        </p>
+      </div>
+    {/snippet}
+  </HeroHeadline>
+
+  <style lang="scss">
+    .custom-hed {
+      h1 {
+        .body-note {
+          color: #ffffff;
+        }
+        .title {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+
+      .dek {
+        margin-block-start: 1rem;
+        p {
+          color: #ffffff;
+          text-shadow: 1px 1px 8px #ff7c88;
+          filter: drop-shadow(0px 0px 12px #ff7c88);
+        }
+      }
+    }
+  </style>
+</Story>
+
+<style lang="scss">
+  .transparent-header {
+    :global(.nav-container) {
+      background-color: transparent !important;
+    }
+    :global(.nav-container .inner) {
+      background-color: transparent !important;
+      border: none !important;
+    }
+
+    :global(.hero-wrapper) {
+      margin-block-start: -64px;
+    }
+  }
+</style>
diff --git a/src/components/HeroHeadline/HeroHeadline.svelte b/src/components/HeroHeadline/HeroHeadline.svelte
new file mode 100644
index 0000000..1813379
--- /dev/null
+++ b/src/components/HeroHeadline/HeroHeadline.svelte
@@ -0,0 +1,276 @@
+<!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-heroheadline--docs) -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HeadlineSize } from '../@types/global';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+  import Headline from '../Headline/Headline.svelte';
+  import Byline from '../Byline/Byline.svelte';
+  import FeaturePhoto from '../FeaturePhoto/FeaturePhoto.svelte';
+
+  export interface Props {
+    /** Headline, parsed as an _inline_ markdown string in an `h1` element OR as a custom snippet. */
+    hed: string | Snippet;
+    /**
+     * Optional snippet for a custom hero graphic, photo, etc.
+     */
+    children?: Snippet;
+    /** Set to `false` for inline hero media */
+    stacked?: boolean;
+    /**
+     * Path to the background hero image
+     */
+    img?: string;
+    /**
+     * ARIA description, passed in as a markdown string.
+     */
+    ariaDescription?: string;
+    /**
+     * Notes to the graphic, passed in as a markdown string.
+     */
+    notes?: string;
+    /** Add classes to the block tag to target it with custom CSS. */
+    class?: string;
+    /**
+     * Headline size: small, normal, big, bigger, biggest
+     */
+    hedSize?: HeadlineSize;
+    /**
+     * Headline horizontal alignment: left, center, right
+     */
+    hedAlign?: 'left' | 'center' | 'right';
+    /**
+     * Width of the headline: normal, wide, wider, widest
+     */
+    hedWidth?: 'normal' | 'wide' | 'wider' | 'widest';
+    /**
+     * Dek, parsed as a markdown string OR as a custom snippet.
+     */
+    dek?: string | 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 hero graphic: normal, wide, wider, widest
+     */
+    width?: 'normal' | 'wide' | 'wider' | 'widest';
+    /** Set to true for embeds. */
+    embedded?: boolean;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+    /**
+     * 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,
+    stacked = true,
+    img,
+    ariaDescription,
+    notes,
+    class: cls = '',
+    hedSize = 'normal',
+    hedAlign = 'center',
+    hedWidth = 'normal',
+    dek,
+    section,
+    authors = [],
+    publishTime,
+    updateTime,
+    width = 'widest',
+    embedded = false,
+    children,
+    getAuthorPage,
+    byline,
+    published,
+    updated,
+  }: Props = $props();
+</script>
+
+<div style="--heroHeight: {embedded ? '850px' : '100svh'}; display:contents;">
+  <div class="hero-wrapper fmb-6" class:embedded>
+    <!-- stacked media hero-->
+    {#if stacked}
+      <Block width="fluid" class="hero-headline background-hero fmt-0">
+        <!-- Handles string or snippet `hed` -->
+        <Headline
+          class="{cls} !text-{hedAlign}"
+          width={hedWidth}
+          {section}
+          {hedSize}
+          {hed}
+          {dek}
+        />
+
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <GraphicBlock
+              {width}
+              role="img"
+              class="my-0"
+              textWidth="normal"
+              {notes}
+              {ariaDescription}
+            >
+              <div
+                class="background-image"
+                style="background-image: url({img})"
+              ></div>
+            </GraphicBlock>
+          {/if}
+        </div>
+      </Block>
+    {/if}
+
+    <!-- Non-stacked hero -->
+    {#if stacked === false}
+      <Block width="fluid" class="hero-headline inline-hero">
+        <PaddingReset containerIsFluid={true}>
+          <Headline
+            class="{cls} !text-{hedAlign}"
+            width={hedWidth}
+            {section}
+            {hedSize}
+            {hed}
+            {dek}
+          />
+        </PaddingReset>
+        <div class="graphic-container">
+          <!-- Custom hero snippet -->
+          {#if children}
+            {@render children()}
+
+            <!-- Otherwise render the image if it exists -->
+          {:else if img}
+            <FeaturePhoto
+              {width}
+              class="my-0"
+              src={img}
+              caption={notes}
+              altText={ariaDescription || ''}
+            />
+          {/if}
+        </div>
+      </Block>
+    {/if}
+  </div>
+
+  <div class="hero-byline fmb-6">
+    {#if byline}
+      <!-- Custom byline/dateline -->
+      {@render byline()}
+    {:else if authors.length > 0 || publishTime}
+      <Byline
+        {authors}
+        {publishTime}
+        {updateTime}
+        {getAuthorPage}
+        {published}
+        {updated}
+        align="auto"
+      />
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .hero-wrapper {
+    :global(.background-hero) {
+      min-height: var(--heroHeight, 100svh);
+      max-height: 1800px;
+      position: relative;
+    }
+
+    :global(.background-hero .headline) {
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 50%;
+      height: var(--heroHeight, 100svh);
+      max-height: 1800px;
+      transform: translateX(-50%);
+      @include mixins.fmt-0;
+
+      @media (max-width: 690px) {
+        padding: 0 15px;
+      }
+    }
+
+    :global(aside p) {
+      @include mixins.body-caption;
+    }
+
+    :global(.background-hero video) {
+      position: relative;
+      display: block;
+      width: 100%;
+      height: var(--heroHeight);
+      object-fit: cover;
+    }
+
+    :global(.graphic-container .article-block.notes) {
+      @media (max-width: 690px) {
+        width: 100%;
+        padding: 0 15px;
+        margin-inline-start: 0;
+      }
+    }
+  }
+
+  .hero-byline {
+    :global(.byline-container) {
+      z-index: 1;
+      position: relative;
+    }
+  }
+
+  .background-image {
+    width: auto;
+    height: var(--heroHeight, 100svh);
+    max-height: 1800px;
+    user-select: none;
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+  }
+</style>
diff --git a/src/components/HeroHeadline/demo/eurovis.jpeg b/src/components/HeroHeadline/demo/eurovis.jpeg
new file mode 100644
index 0000000..ad298a8
Binary files /dev/null and b/src/components/HeroHeadline/demo/eurovis.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg
new file mode 100644
index 0000000..60e6304
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-lg.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg
new file mode 100644
index 0000000..abe9b17
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-md.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg
new file mode 100644
index 0000000..ca46080
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-sm.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg
new file mode 100644
index 0000000..0619957
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg
new file mode 100644
index 0000000..e150f58
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-xl_copy.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg b/src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg
new file mode 100644
index 0000000..4a8245f
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/CRASH_1-xs.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/crash.svelte b/src/components/HeroHeadline/demo/graphics/crash.svelte
new file mode 100644
index 0000000..9f2ac0f
--- /dev/null
+++ b/src/components/HeroHeadline/demo/graphics/crash.svelte
@@ -0,0 +1,650 @@
+<script>
+  let width = $state();
+
+  // @ts-ignore img
+  import chartXs from './CRASH_1-xs.jpeg';
+  // @ts-ignore img
+  import chartSm from './CRASH_1-sm.jpeg';
+  // @ts-ignore img
+  import chartMd from './CRASH_1-md.jpeg';
+  // @ts-ignore img
+  import chartLg from './CRASH_1-lg.jpeg';
+  // @ts-ignore img
+  import chartXl from './CRASH_1-xl.jpeg';
+  // @ts-ignore img
+  import chartXxl from './CRASH_1-xl_copy.jpeg';
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
+
+<div id="g-CRASH_1-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-CRASH_1-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 93.0303% 0;"></div>
+      <div
+        id="g-CRASH_1-xs-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXs});`}
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-CRASH_1-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 77.8431% 0;"></div>
+      <div
+        id="g-CRASH_1-sm-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartSm});`}
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-CRASH_1-md" class="g-artboard" style="">
+      <div style="padding: 0 0 68.7879% 0;"></div>
+      <div
+        id="g-CRASH_1-md-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartMd});`}
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-CRASH_1-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 61.3978% 0;"></div>
+      <div
+        id="g-CRASH_1-lg-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartLg});`}
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1200 && width < 1350}
+    <div id="g-CRASH_1-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 47% 0;"></div>
+      <div
+        id="g-CRASH_1-xl-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXl});`}
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai4-5"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai4-6"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl_copy -->
+  {#if width && width >= 1350}
+    <div id="g-CRASH_1-xl_copy" class="g-artboard" style="">
+      <div style="padding: 0 0 46.8889% 0;"></div>
+      <div
+        id="g-CRASH_1-xl_copy-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXxl});`}
+      ></div>
+      <div
+        id="g-ai5-1"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai5-2"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai5-3"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai5-4"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai5-5"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai5-6"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2022-03-29 17:01 -->
+
+<!-- ai file: CRASH_1.ai -->
+<style lang="scss">
+  #g-CRASH_1-box,
+  #g-CRASH_1-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-CRASH_1-box p {
+    margin: 0;
+  }
+  #g-CRASH_1-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-CRASH_1-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-CRASH_1-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-CRASH_1-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xs p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 14px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xs .g-pstyle0 {
+    height: 14px;
+  }
+  #g-CRASH_1-xs .g-pstyle1 {
+    font-weight: 700;
+    height: 14px;
+  }
+  #g-CRASH_1-xs .g-pstyle2 {
+    height: 14px;
+    text-align: right;
+  }
+  #g-CRASH_1-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-sm p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 16px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-sm .g-pstyle0 {
+    height: 16px;
+  }
+  #g-CRASH_1-sm .g-pstyle1 {
+    font-weight: 700;
+    height: 16px;
+  }
+  #g-CRASH_1-sm .g-pstyle2 {
+    height: 16px;
+    text-align: right;
+  }
+  #g-CRASH_1-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-md p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 13px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-md .g-pstyle0 {
+    height: 13px;
+  }
+  #g-CRASH_1-md .g-pstyle1 {
+    font-weight: 700;
+    height: 13px;
+  }
+  #g-CRASH_1-md .g-pstyle2 {
+    height: 13px;
+    text-align: right;
+  }
+  #g-CRASH_1-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-lg p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 17px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 15px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-lg .g-pstyle0 {
+    height: 17px;
+    color: rgb(88, 89, 91);
+  }
+  #g-CRASH_1-lg .g-pstyle1 {
+    font-weight: 700;
+    height: 17px;
+  }
+  #g-CRASH_1-lg .g-pstyle2 {
+    height: 17px;
+  }
+  #g-CRASH_1-lg .g-pstyle3 {
+    height: 17px;
+    text-align: right;
+  }
+  #g-CRASH_1-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xl p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 17px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 15px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xl .g-pstyle0 {
+    line-height: 18px;
+    height: 18px;
+    font-size: 16px;
+  }
+  #g-CRASH_1-xl .g-pstyle1 {
+    font-weight: 700;
+    height: 17px;
+  }
+  #g-CRASH_1-xl .g-pstyle2 {
+    height: 17px;
+  }
+  #g-CRASH_1-xl .g-pstyle3 {
+    height: 17px;
+    text-align: right;
+  }
+  #g-CRASH_1-xl_copy {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xl_copy p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 18px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle0 {
+    height: 18px;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle1 {
+    font-weight: 700;
+    height: 18px;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle2 {
+    height: 18px;
+    text-align: right;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg
new file mode 100644
index 0000000..67096d6
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/quake-map-top-lg.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg
new file mode 100644
index 0000000..157b8b3
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/quake-map-top-md.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg
new file mode 100644
index 0000000..f93377a
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/quake-map-top-sm.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg
new file mode 100644
index 0000000..a150f58
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/quake-map-top-xl.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg b/src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg
new file mode 100644
index 0000000..34601bd
Binary files /dev/null and b/src/components/HeroHeadline/demo/graphics/quake-map-top-xs.jpeg differ
diff --git a/src/components/HeroHeadline/demo/graphics/quakemap.svelte b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
new file mode 100644
index 0000000..30fba5c
--- /dev/null
+++ b/src/components/HeroHeadline/demo/graphics/quakemap.svelte
@@ -0,0 +1,863 @@
+<script>
+  let width = $state();
+
+  // @ts-ignore raw
+  import chartXs from './quake-map-top-xs.jpeg';
+  // @ts-ignore raw
+  import chartSm from './quake-map-top-sm.jpeg';
+  // @ts-ignore raw
+  import chartMd from '././quake-map-top-md.jpeg';
+  // @ts-ignore raw
+  import chartLg from '././quake-map-top-lg.jpeg';
+  // @ts-ignore raw
+  import chartXl from '././quake-map-top-xl.jpeg';
+</script>
+
+<div id="g-quake-map-top-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-quake-map-top-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 117.5758% 0;"></div>
+      <div
+        id="g-quake-map-top-xs-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXs});`}
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:-1.3529%;margin-top:-6.8px;left:33.0848%;width:46px;"
+      >
+        <p class="g-pstyle0">Kabul</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:4.3062%;margin-top:-7.7px;left:4.0902%;width:65px;"
+      >
+        <p class="g-pstyle1">Shaking</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:8.1722%;margin-top:-7.7px;left:4.0902%;width:78px;"
+      >
+        <p class="g-pstyle2">Very strong</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:19.5124%;margin-top:-7.7px;left:4.0902%;width:49px;"
+      >
+        <p class="g-pstyle2">Weak</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:22.4511%;margin-top:-5.1px;left:45.2353%;margin-left:-74px;width:148px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai0-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:29.7371%;margin-top:-8.4px;left:34.8676%;width:56px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai0-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:39.2732%;margin-top:-8.4px;left:65.8508%;width:50px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai0-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.9742%;margin-top:-8.4px;left:46.1799%;width:73px;"
+      >
+        <p class="g-pstyle5">Epicentre</p>
+      </div>
+      <div
+        id="g-ai0-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:49.8402%;margin-top:-8.4px;left:93.2747%;margin-left:-27px;width:54px;"
+      >
+        <p class="g-pstyle6">Bannu</p>
+      </div>
+      <div
+        id="g-ai0-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:63.4369%;margin-top:-5.1px;left:65.9996%;margin-left:-50px;width:100px;"
+      >
+        <p class="g-pstyle7">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-quake-map-top-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 83.5294% 0;"></div>
+      <div
+        id="g-quake-map-top-sm-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartSm});`}
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:5.3132%;margin-top:-8.6px;left:3.5997%;width:71px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:9.3038%;margin-top:-8.6px;left:3.5997%;width:86px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:18.8592%;margin-top:-5.3px;left:41.2699%;margin-left:-91.5px;width:183px;"
+      >
+        <p class="g-pstyle2">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:21.2757%;margin-top:-8.6px;left:3.5997%;width:53px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:30.6101%;margin-top:-9.4px;left:40.186%;width:61px;"
+      >
+        <p class="g-pstyle3">Gardez</p>
+      </div>
+      <div
+        id="g-ai1-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:34.8355%;margin-top:-9.4px;left:9.9042%;width:60px;"
+      >
+        <p class="g-pstyle3">Ghazni</p>
+      </div>
+      <div
+        id="g-ai1-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:40.4693%;margin-top:-9.4px;left:63.0024%;width:54px;"
+      >
+        <p class="g-pstyle3">Khost</p>
+      </div>
+      <div
+        id="g-ai1-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:47.2768%;margin-top:-9.4px;left:48.5165%;width:80px;"
+      >
+        <p class="g-pstyle4">Epicentre</p>
+      </div>
+      <div
+        id="g-ai1-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:50.7979%;margin-top:-9.4px;left:82.1761%;margin-left:-29px;width:58px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+      <div
+        id="g-ai1-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:68.3897%;margin-top:-5.3px;left:73.6919%;margin-left:-67.5px;width:135px;"
+      >
+        <p class="g-pstyle2">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 1200}
+    <div id="g-quake-map-top-md" class="g-artboard" style="">
+      <div style="padding: 0 0 91.8182% 0;"></div>
+      <div
+        id="g-quake-map-top-md-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartMd});`}
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:3.5477%;margin-top:-7.5px;left:2.6635%;width:62px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.188%;margin-top:-7.5px;left:2.6635%;width:74px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:7.0759%;margin-top:-6.9px;right:6.4574%;width:100px;"
+      >
+        <p class="g-pstyle2">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:15.2639%;margin-top:-7.5px;left:2.6635%;width:47px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:18.7377%;margin-top:-7.6px;left:38.071%;margin-left:-136.5px;width:273px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:30.2476%;margin-top:-10.3px;left:38.0816%;width:63px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai2-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:33.8779%;margin-top:-10.3px;left:9.3056%;margin-left:-31px;width:62px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai2-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:40.1486%;margin-top:-10.3px;left:63.0563%;width:55px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai2-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:47.1569%;margin-top:-10.8px;left:47.4444%;width:86px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai2-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:50.8746%;margin-top:-10.3px;left:84.5785%;margin-left:-30px;width:60px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+      <div
+        id="g-ai2-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:62.467%;margin-top:-7.6px;left:80.6735%;margin-left:-100px;width:200px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 1200 && width < 1300}
+    <div id="g-quake-map-top-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.1667% 0;"></div>
+      <div
+        id="g-quake-map-top-lg-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartLg});`}
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:4.1944%;margin-top:-8.8px;left:1.7817%;width:67px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.9135%;margin-top:-8.8px;left:1.7817%;width:81px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:7.006%;margin-top:-7.4px;right:4.4122%;width:100px;"
+      >
+        <p class="g-pstyle2">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:14.111%;margin-top:-8.4px;left:29.9587%;margin-left:-151px;width:302px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:16.128%;margin-top:-8.8px;left:1.7818%;width:51px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:28.2991%;margin-top:-11.3px;left:44.1554%;width:67px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai3-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:31.9244%;margin-top:-11.3px;left:26.4286%;margin-left:-33px;width:66px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai3-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.676%;margin-top:-8.4px;left:85.4421%;margin-left:-110.5px;width:221px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+      <div
+        id="g-ai3-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:38.42%;margin-top:-11.3px;left:59.5142%;width:59px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai3-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.5991%;margin-top:-11.9px;left:49.9132%;width:94px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai3-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:53.9788%;margin-top:-11.3px;left:72.7294%;margin-left:-32px;width:64px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1300}
+    <div id="g-quake-map-top-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 51.2308% 0;"></div>
+      <div
+        id="g-quake-map-top-xl-img"
+        class="g-aiImg"
+        style={`background-image: url(${chartXl});`}
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:3.8689%;margin-top:-8.8px;left:1.5293%;width:67px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.063%;margin-top:-7.4px;right:4.342%;width:100px;"
+      >
+        <p class="g-pstyle1">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.5716%;margin-top:-8.8px;left:1.5293%;width:81px;"
+      >
+        <p class="g-pstyle2">Very strong</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:13.726%;margin-top:-8.4px;left:30.8465%;margin-left:-151px;width:302px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai4-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:15.7308%;margin-top:-8.8px;left:1.5294%;width:51px;"
+      >
+        <p class="g-pstyle2">Weak</p>
+      </div>
+      <div
+        id="g-ai4-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:27.8288%;margin-top:-11.3px;left:43.9511%;width:67px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai4-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:31.4324%;margin-top:-11.3px;left:27.588%;margin-left:-33px;width:66px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai4-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.1494%;margin-top:-8.4px;left:82.0619%;margin-left:-110.5px;width:221px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+      <div
+        id="g-ai4-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.8889%;margin-top:-11.3px;left:58.1285%;width:59px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai4-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.025%;margin-top:-11.9px;left:49.2661%;width:94px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai4-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:53.3543%;margin-top:-11.3px;left:70.3271%;margin-left:-32px;width:64px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2022-06-24 21:49 -->
+
+<!-- Generated by ai2html v0.100.0 - 2022-06-24 21:49 -->
+
+<!-- ai file: quake-map-top.ai -->
+<style lang="scss">
+  #g-quake-map-top-box,
+  #g-quake-map-top-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-quake-map-top-box p {
+    margin: 0;
+  }
+  #g-quake-map-top-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-quake-map-top-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-quake-map-top-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-quake-map-top-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-xs p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 300;
+    line-height: 14px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(120, 119, 120);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-xs .g-pstyle0 {
+    font-weight: 700;
+    line-height: 11px;
+    height: 11px;
+    font-size: 9px;
+    color: rgb(0, 0, 0);
+  }
+  #g-quake-map-top-xs .g-pstyle1 {
+    font-weight: 600;
+    height: 14px;
+  }
+  #g-quake-map-top-xs .g-pstyle2 {
+    height: 14px;
+  }
+  #g-quake-map-top-xs .g-pstyle3 {
+    line-height: 7px;
+    height: 7px;
+    letter-spacing: 0.3em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(94, 94, 94);
+  }
+  #g-quake-map-top-xs .g-pstyle4 {
+    height: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xs .g-pstyle5 {
+    font-weight: 700;
+    height: 14px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-xs .g-pstyle6 {
+    height: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xs .g-pstyle7 {
+    line-height: 7px;
+    height: 7px;
+    letter-spacing: 0.3em;
+    text-align: center;
+    color: rgb(94, 94, 94);
+  }
+  #g-quake-map-top-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-sm p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 300;
+    line-height: 7px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.4em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-sm .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-sm .g-pstyle1 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-sm .g-pstyle2 {
+    height: 7px;
+    text-align: center;
+  }
+  #g-quake-map-top-sm .g-pstyle3 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-sm .g-pstyle4 {
+    font-weight: 700;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-sm .g-pstyle5 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-md p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 300;
+    line-height: 11px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 19px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-md .g-pstyle0 {
+    font-weight: 600;
+    line-height: 14px;
+    height: 14px;
+    letter-spacing: 0em;
+    font-size: 12px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-md .g-pstyle1 {
+    line-height: 14px;
+    height: 14px;
+    letter-spacing: 0em;
+    font-size: 12px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-md .g-pstyle2 {
+    font-weight: 400;
+    height: 11px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-md .g-pstyle3 {
+    height: 11px;
+    text-align: center;
+  }
+  #g-quake-map-top-md .g-pstyle4 {
+    line-height: 17px;
+    height: 17px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md .g-pstyle5 {
+    line-height: 17px;
+    height: 17px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md .g-pstyle6 {
+    font-weight: 700;
+    line-height: 18px;
+    height: 18px;
+    letter-spacing: 0em;
+    font-size: 15px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-lg p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 300;
+    line-height: 12px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 21px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-lg .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-lg .g-pstyle1 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-lg .g-pstyle2 {
+    font-weight: 400;
+    height: 12px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-lg .g-pstyle3 {
+    height: 12px;
+    text-align: center;
+  }
+  #g-quake-map-top-lg .g-pstyle4 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-lg .g-pstyle5 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-lg .g-pstyle6 {
+    font-weight: 700;
+    line-height: 20px;
+    height: 20px;
+    letter-spacing: 0em;
+    font-size: 17px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-xl p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 300;
+    line-height: 12px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 21px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-xl .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-xl .g-pstyle1 {
+    font-weight: 400;
+    height: 12px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-xl .g-pstyle2 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-xl .g-pstyle3 {
+    height: 12px;
+    text-align: center;
+  }
+  #g-quake-map-top-xl .g-pstyle4 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xl .g-pstyle5 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xl .g-pstyle6 {
+    font-weight: 700;
+    line-height: 20px;
+    height: 20px;
+    letter-spacing: 0em;
+    font-size: 17px;
+    color: rgb(255, 255, 255);
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/components/HeroHeadline/demo/polar.jpg b/src/components/HeroHeadline/demo/polar.jpg
new file mode 100644
index 0000000..fe7cac6
Binary files /dev/null and b/src/components/HeroHeadline/demo/polar.jpg differ
diff --git a/src/components/InfoBox/InfoBox.mdx b/src/components/InfoBox/InfoBox.mdx
new file mode 100644
index 0000000..1704e58
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.mdx
@@ -0,0 +1,122 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as InfoBoxStories from './InfoBox.stories.svelte';
+
+<Meta of={InfoBoxStories} />
+
+# InfoBox
+
+The `InfoBox` component creates a stylised text box that provides additional information that needs to be visually separate from the main content flow, such as methodology, detailed notes about data and extra context.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="About this data"
+  text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# Archie ML doc
+[blocks]
+
+type: info-box
+title: What you need to know about the war
+text: Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day.
+
+Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.
+:end
+notes: [Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `InfoBox` component.
+
+```svelte
+<!-- graphics kit -->
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+# Graphics kit
+{#each content.blocks as block}
+  {#if block.type === 'info-box'}
+    <InfoBox title={block.title} text={block.text} notes={block.notes} />
+    <!-- ... -->
+  {/if}
+{/each}
+```
+
+<Canvas of={InfoBoxStories.Demo} />
+
+## Lists
+
+Use markdown to add lists to `InfoBox`.
+
+```svelte
+<script>
+  import { InfoBox } from '@reuters-graphics/graphics-components';
+</script>
+
+<InfoBox
+  title="What you need to know about the war"
+  text={"- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices.\n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes.\n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines."}
+  notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+/>
+```
+
+<Canvas of={InfoBoxStories.Lists} />
+## Customisation
+
+Use [snippets](https://svelte.dev/docs/svelte/snippet) to customise the `InfoBox`, such as adding tables, icons and thumbnail images.
+
+```svelte
+<InfoBox title="About this data">
+  <!-- Optional custom header -->
+  {#snippet header()}
+    <h3>Global video game market</h3>
+  {/snippet}
+  <!-- Optional custom body -->
+  {#snippet body()}
+    <table>
+      <thead>
+        <tr>
+          <th>Year</th>
+          <th>Market size ($bln)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>2024</td>
+          <td>274.63</td>
+        </tr>
+        <tr>
+          <td>2023</td>
+          <td>281.77</td>
+        </tr>
+        <tr>
+          <td>2022</td>
+          <td>249.55</td>
+        </tr>
+      </tbody>
+    </table>
+  {/snippet}
+  <!-- Optional custom footer -->
+  {#snippet updated()}
+    <div class="text-xs font-note">Source: Precedence Research</div>
+  {/snippet}
+</InfoBox>
+```
+
+<Canvas of={InfoBoxStories.Customised} />
diff --git a/src/components/InfoBox/InfoBox.stories.svelte b/src/components/InfoBox/InfoBox.stories.svelte
new file mode 100644
index 0000000..f07fc99
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.stories.svelte
@@ -0,0 +1,98 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import InfoBox from './InfoBox.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/InfoBox',
+    component: InfoBox,
+    tags: ['autodocs'],
+    argTypes: {
+      theme: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+    },
+  });
+</script>
+
+<Story name="Demo">
+  <BodyText
+    text="Bacon ipsum dolor amet turducken buffalo beef ribs bresaola pancetta ribeye pork belly doner hamburger biltong cupim porchetta chuck ham tenderloin. Turducken bresaola jerky chicken."
+  />
+  <InfoBox
+    title="About this data"
+    text={'Reuters is collecting daily COVID-19 infections and deaths data for 240 countries and territories around the world, updated regularly throughout each day. \n\n Every country reports those figures a little differently and, inevitably, misses undiagnosed infections and deaths. With this project we are focusing on the trends within countries as they try to contain the virus’ spread, whether they are approaching or past peak infection rates, or if they are seeing a resurgence of infections or deaths.'}
+    notes={'[Read more about our methodology](https://www.reuters.com/world-coronavirus-tracker-and-maps/en/methodology/)'}
+  />
+  <BodyText
+    text="Ham drumstick tail ribeye pancetta, leberkas hamburger chicken spare ribs buffalo jerky sausage ground round meatball. Leberkas kevin short loin, tri-tip shank spare ribs buffalo beef pork belly corned beef chislic tongue."
+  />
+</Story>
+<Story
+  name="Lists"
+  tags={['!autodocs', '!dev']}
+  args={{
+    title: 'What you need to know about the war',
+    text: "- **Food crisis**: [Russia's invasion of Ukraine](#) in late February dramatically worsened the outlook for already inflated global food prices. \n- **Under fire**: Civillian homes destroyed in the conflict and Russia accused of war crimes. \n- **Nordstream sabotage**: A series of clandestine bombings and subsequent underwater gas leaks occurred on the Nord Stream 1 and Nord Stream 2 natural gas pipelines. ",
+  }}
+/>
+<Story name="Customised" tags={['!autodocs', '!dev']}>
+  <InfoBox>
+    {#snippet header()}
+      <h3>Global video game market</h3>
+    {/snippet}
+    {#snippet body()}
+      <table>
+        <thead>
+          <tr>
+            <th>Year</th>
+            <th>Market size ($bln)</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>2024</td>
+            <td>274.63</td>
+          </tr>
+          <tr>
+            <td>2023</td>
+            <td>281.77</td>
+          </tr>
+          <tr>
+            <td>2022</td>
+            <td>249.55</td>
+          </tr>
+        </tbody>
+      </table>
+    {/snippet}
+    {#snippet footer()}
+      <div class="text-xs font-note">Source: Precedence Research</div>
+    {/snippet}
+  </InfoBox>
+</Story>
+
+<style lang="scss">
+  h3 {
+    margin: 0;
+  }
+  // Style the table nicely
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  th,
+  td {
+    border: 1px solid #ddd;
+    padding: 8px;
+    text-align: center;
+  }
+  th {
+    background-color: #f2f2f2;
+  }
+</style>
diff --git a/src/components/InfoBox/InfoBox.svelte b/src/components/InfoBox/InfoBox.svelte
new file mode 100644
index 0000000..6a9674a
--- /dev/null
+++ b/src/components/InfoBox/InfoBox.svelte
@@ -0,0 +1,160 @@
+<!-- @component `InfoBox` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-infobox--docs) -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  type Theme = 'light' | 'dark';
+
+  interface Props {
+    /**
+     * Title of the box
+     */
+    title?: string | null;
+    /**
+     * Contents of the note as a markdown string
+     */
+    text?: string;
+    /**
+     * Additional footnotes
+     */
+    notes?: string | null;
+    /**
+     * Width of the component within the text well.
+     */
+    width?: ContainerWidth;
+    /**
+     * Add extra classes to the block tag to target it with custom CSS.
+     */
+    class?: string;
+    /**
+     * Add an id to the block tag to target it with custom CSS.
+     */
+    id?: string;
+    /**
+     * Page theme
+     */
+    theme?: Theme;
+    /** Optional custom header snippet */
+    header?: Snippet;
+    /** Optional custom body snippet */
+    body?: Snippet;
+    /** Optional custom footer snippet */
+    footer?: Snippet;
+  }
+
+  let {
+    title = null,
+    text,
+    notes = null,
+    width = 'normal',
+    class: cls = '',
+    id = '',
+    theme = 'light',
+    header,
+    body,
+    footer,
+  }: Props = $props();
+
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+</script>
+
+<aside class="infobox {theme}">
+  <Block
+    {width}
+    {id}
+    class="{cls} fmy-6 fpx-6 fpy-5 border border-solid rounded"
+  >
+    {#if header}
+      <div class="header fmb-2">
+        <!-- Custom header content -->
+        {@render header()}
+      </div>
+    {:else if title}
+      <div class="header fmb-2">
+        <Markdown source={title} />
+      </div>
+    {/if}
+
+    {#if body}
+      <div class="body">
+        <!-- Custom body content -->
+        {@render body()}
+      </div>
+    {:else}
+      <div class="body">
+        <Markdown source={text || ''} />
+      </div>
+    {/if}
+
+    {#if footer}
+      <div class="footer fmt-2">
+        <!-- Custom footer content -->
+        {@render footer()}
+      </div>
+    {:else if notes}
+      <div class="footer fmt-2">
+        <Markdown source={notes} />
+      </div>
+    {/if}
+  </Block>
+</aside>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .infobox {
+    :global(.article-block) {
+      border-color: var(--theme-colour-brand-rules);
+    }
+
+    &.light {
+      :global(.article-block) {
+        background-color: rgb(250 250 250 / 100%);
+      }
+    }
+    &.dark {
+      :global(.article-block) {
+        background-color: rgb(250 250 250 / 10%);
+      }
+    }
+
+    :global(.header p) {
+      @include mixins.h4;
+      @include mixins.fmy-0;
+    }
+
+    :global(.body p) {
+      @include mixins.body-note;
+      @include mixins.text-sm;
+      @include mixins.font-light;
+      &:last-child {
+        @include mixins.fmb-0;
+      }
+    }
+
+    :global(.body ul),
+    :global(.body ol) {
+      @include mixins.body-note;
+      @include mixins.text-sm;
+      @include mixins.font-light;
+      @include mixins.fmb-0;
+    }
+
+    :global(.body ul li),
+    :global(.body ol li) {
+      @include mixins.fmt-0;
+      @include mixins.fmy-2;
+      &:last-child {
+        @include mixins.fmb-0;
+      }
+    }
+
+    :global(.footer p) {
+      @include mixins.body-caption;
+      &:last-child {
+        @include mixins.fmb-0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/KinesisLogo/KinesisLogo.mdx b/src/components/KinesisLogo/KinesisLogo.mdx
new file mode 100644
index 0000000..83bdafd
--- /dev/null
+++ b/src/components/KinesisLogo/KinesisLogo.mdx
@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as KinesisLogoStories from './KinesisLogo.stories.svelte';
+
+<Meta of={KinesisLogoStories} />
+
+# KinesisLogo
+
+The `KinesisLogo` component contains the official Kinesis logo.
+
+```svelte
+<script>
+  import { KinesisLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<KinesisLogo />
+```
+
+<Canvas of={KinesisLogoStories.Demo} />
diff --git a/src/components/KinesisLogo/KinesisLogo.stories.svelte b/src/components/KinesisLogo/KinesisLogo.stories.svelte
new file mode 100644
index 0000000..1d14157
--- /dev/null
+++ b/src/components/KinesisLogo/KinesisLogo.stories.svelte
@@ -0,0 +1,14 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import KinesisLogo from './KinesisLogo.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Logos/KinesisLogo',
+    component: KinesisLogo,
+    argTypes: {
+      colour: { control: 'color' },
+    },
+  });
+</script>
+
+<Story name="Demo" />
diff --git a/src/components/KinesisLogo/KinesisLogo.svelte b/src/components/KinesisLogo/KinesisLogo.svelte
new file mode 100644
index 0000000..52f527b
--- /dev/null
+++ b/src/components/KinesisLogo/KinesisLogo.svelte
@@ -0,0 +1,140 @@
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    colour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let { colour = '#D64000', width = '100%' }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 558.7 558.7"
+  style="width: {width}; --logoColour: {colour};"
+>
+  <g id="Primary_Logo" data-name="Primary Logo">
+    <path
+      class="cls-1"
+      d="M483,75c7.1,7.1,11,16.6,11,26.7s-3.9,19.6-11,26.7c-14.7,14.7-38.6,14.7-53.3,0-7.1-7.1-11-16.6-11-26.7s3.9-19.6,11-26.7c7.4-7.4,17-11.1,26.7-11.1s19.3,3.7,26.7,11.1Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M75.1,483.6c-14.7-14.7-14.7-38.7,0-53.4,7.1-7.1,16.6-11.1,26.7-11.1s19.6,3.9,26.7,11.1c14.7,14.7,14.7,38.7,0,53.4-7.1,7.1-16.6,11.1-26.7,11.1s-19.6-3.9-26.7-11.1Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M362.6,77.9h-.3c-8-3.5-14.3-9.8-17.6-17.9-3.4-8.1-3.4-17.1,0-25.3,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5s8.6.9,12.6,2.5c16.8,7,24.8,26.3,17.9,43.2-7,16.8-26.3,24.8-43.1,17.9h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M183.1,478.3c4.3,0,8.5.9,12.6,2.5,16.8,7,24.8,26.3,17.9,43.2-3.4,8.2-9.7,14.5-17.9,17.9-8.1,3.4-17.1,3.4-25.3,0-16.8-7-24.8-26.3-17.9-43.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M307.4,28.3c0,15.2-12,27.6-27,28.3h-1.3c-15.6,0-28.3-12.7-28.3-28.3S263.5,0,279.1,0s28.3,12.8,28.3,28.4h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M250.8,530.4c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M192.2,69.2c-5.8,2.4-12.2,2.4-18,0-5.9-2.4-10.4-7-12.8-12.8-5-12.1.7-25.9,12.8-30.9,2.9-1.2,6-1.8,9-1.8,9.3,0,18.1,5.5,21.8,14.6,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M365.9,489.5c3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c5.9,2.4,10.4,7,12.8,12.8,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.2,2.4-18.1,0-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,2.4-5.8,6.9-10.4,12.8-12.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M115.1,88.6c7.2,7.3,7.4,18.9.4,26.4l-.4.4c-7.4,7.4-19.4,7.4-26.7,0-7.4-7.4-7.4-19.4,0-26.8,3.7-3.7,8.5-5.5,13.4-5.5s9.7,1.8,13.4,5.5h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M442.8,443.5c3.6-3.7,8.5-5.5,13.3-5.5s9.7,1.8,13.4,5.5c3.6,3.5,5.5,8.3,5.5,13.4s-2,9.8-5.5,13.4c-7.4,7.4-19.3,7.4-26.7,0-3.6-3.6-5.5-8.4-5.5-13.4s2-9.8,5.5-13.4h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M38.4,205.1c-12-5-17.8-18.8-12.8-30.9,2.4-5.9,6.9-10.4,12.8-12.8,3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c12,5,17.7,18.8,12.8,30.9-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.3,2.4-18,0h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M519.8,353.7c5.8,2.4,10.4,6.9,12.8,12.8,2.4,5.9,2.4,12.2,0,18.1-5,12-18.8,17.8-30.8,12.8-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,3.8-9.1,12.6-14.6,21.8-14.6s6,.6,9,1.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M0,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3S0,295.1,0,279.5Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M501.6,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M16.8,388.1c-7-16.9,1-36.2,17.9-43.2,8.1-3.4,17.1-3.4,25.3,0,8.1,3.4,14.5,9.7,17.9,17.9s3.4,17.1,0,25.3c-3.4,8.1-9.7,14.5-17.9,17.9s-17.1,3.4-25.3,0c-8.1-3.4-14.5-9.7-17.9-17.9Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M480.1,195.9c-3.4-8.1-3.4-17.1,0-25.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5,13,0,25.3,7.7,30.5,20.4,7,16.9-1,36.2-17.9,43.2-8.1,3.4-17.1,3.4-25.3,0-8.1-3.4-14.5-9.7-17.9-17.9h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M359.3,359.7c-10.4,10.3-10.4,27.2,0,37.5,10.4,10.4,27.1,10.4,37.5,0,5-5,7.8-11.6,7.8-18.7s-2.8-13.8-7.8-18.7c-5.2-5.2-11.9-7.7-18.7-7.7s-13.6,2.6-18.8,7.7h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M138.3,263.3c-11.2-3-17.8-14.5-14.8-25.7,1.5-5.4,4.9-9.9,9.8-12.8,3.2-1.9,6.8-2.8,10.4-2.8s3.6.2,5.4.7c5.4,1.5,9.9,4.9,12.7,9.8s3.5,10.5,2.1,16c-3,11.2-14.5,17.9-25.7,14.9h0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M408.9,335.9c-5.4-1.5-9.9-4.9-12.7-9.8s-3.5-10.5-2.1-16c1.5-5.4,4.9-10,9.8-12.8,3.2-1.9,6.9-2.8,10.5-2.8s3,.1,4.5.5l1,.3c11.2,3,17.8,14.6,14.8,25.7-1.5,5.4-4.9,10-9.8,12.8-4.9,2.8-10.5,3.6-16,2.1h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M127.6,320c-2.3-8.7,2.5-17.5,10.9-20.4l1-.3c8.9-2.4,18.2,3,20.6,11.9,1.2,4.4.6,8.9-1.7,12.8-2.2,3.9-5.9,6.7-10.2,7.9-4.4,1.2-8.8.6-12.8-1.7-3.9-2.2-6.7-5.9-7.8-10.2h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M405.9,257.8l-.7-.4c-3.5-2.3-6-5.7-7.1-9.8-2.4-9,2.9-18.2,11.9-20.6,8.9-2.4,18.2,2.9,20.6,11.9,2.4,9-2.9,18.2-11.9,20.6-4.3,1.2-8.8.5-12.8-1.7h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M189.4,386.7l-.5.5c-4.9,4.9-13,4.9-17.9,0-4.9-4.9-4.9-12.9,0-17.9s13-4.9,17.9,0c2.4,2.4,3.7,5.6,3.7,9s-1.1,6.1-3.2,8.4Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M386.9,171.2c2.4,2.4,3.7,5.6,3.7,9s-1.3,6.6-3.7,9c-4.9,4.9-13,4.9-17.9,0-2.4-2.4-3.7-5.6-3.7-9s1.3-6.6,3.7-9c2.4-2.4,5.6-3.7,9-3.7s6.6,1.3,9,3.7h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M257.3,406.3c2.2,3.9,2.8,8.4,1.7,12.8-1.2,4.4-3.9,8-7.8,10.2s-8.4,2.8-12.8,1.7c-8.9-2.4-14.3-11.6-11.9-20.6,1.2-4.4,3.9-8,7.8-10.2,3.9-2.2,8.4-2.8,12.8-1.7,4.4,1.2,7.9,4,10.2,7.9h0s0,0,0,0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M300.6,152.5c-2.2-3.9-2.8-8.4-1.7-12.8,1.2-4.4,3.9-8,7.8-10.2,2.6-1.5,5.5-2.2,8.4-2.2s2.9.2,4.4.6c4.4,1.2,8,3.9,10.2,7.9,2.2,3.9,2.8,8.4,1.7,12.8-2.4,9-11.6,14.3-20.6,11.9-4.4-1.2-8-3.9-10.2-7.9h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M325.9,396.6l.9.5c4.4,2.8,7.5,7.1,8.9,12.2,3,11.2-3.6,22.8-14.8,25.7-5.5,1.5-11.1.7-16-2.1-4.9-2.8-8.3-7.3-9.8-12.8-1.5-5.4-.7-11.1,2.1-16,2.8-4.9,7.3-8.3,12.7-9.8,1.8-.5,3.7-.7,5.5-.7,3.6,0,7.2,1,10.5,2.8h0Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M248.2,164.3c-11.2,3-22.7-3.7-25.7-14.9-3-11.2,3.6-22.8,14.8-25.7,1.8-.5,3.6-.7,5.4-.7,9.3,0,17.8,6.2,20.3,15.6,3,11.2-3.6,22.8-14.8,25.7Z"
+    ></path>
+    <path
+      class="cls-1"
+      d="M180,206.5c14.6,0,26.4-11.9,26.4-26.5s-11.8-26.5-26.4-26.5-26.4,11.9-26.4,26.5,11.8,26.5,26.4,26.5Z"
+    ></path>
+  </g>
+</svg>
+
+<style>
+  .cls-1 {
+    fill: var(--logoColour);
+    stroke-width: 0px;
+  }
+</style>
diff --git a/src/components/LanguageButton/LanguageButton.mdx b/src/components/LanguageButton/LanguageButton.mdx
new file mode 100644
index 0000000..c7d4ef8
--- /dev/null
+++ b/src/components/LanguageButton/LanguageButton.mdx
@@ -0,0 +1,118 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as LanguageButtonStories from './LanguageButton.stories.svelte';
+
+<Meta of={LanguageButtonStories} />
+
+# LanguageButton
+
+The `LanguageButton` component creates a button that switches between an article written in English and another language.
+
+> 💡**NOTE:** If a translated embed page does not exist, add `LanguageButton` conditionally so it only renders when `embedded` is `false`. This prevents a toggle button from appearing on the English embed page.
+
+```svelte
+<script>
+  import { LanguageButton } from '@reuters-graphics/graphics-components';
+
+  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
+  import { base } from '$app/paths';
+
+  // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
+  // Additionally, pass `locale = 'en'` as a prop
+  let { embedded = false, locale = 'en' }: Props = $props();
+</script>
+
+<!-- Pass `embedded` to `LanguageButton` if the embed page is translated -->
+<LanguageButton {locale} {embedded} {base} />
+```
+
+<Canvas of={LanguageButtonStories.Demo} />
+
+## Customise language and button label
+
+By default, the toggle button will switch between English and Spanish, and the `buttonOptions` prop does not need to be passed. To customise the language and button label, pass the `locale` and the button `label` for the translation language as an object to the `buttonOptions` prop.
+
+```svelte
+<script>
+  import { LanguageButton } from '@reuters-graphics/graphics-components';
+
+  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
+  import { base } from '$app/paths';
+
+  // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
+  // Additionally, pass `locale = 'en'` as a prop
+  let { embedded = false, locale = 'en' }: Props = $props();
+</script>
+
+<!-- Pass `buttonOptions` to customise the language and button label -->
+<LanguageButton
+  {locale}
+  {embedded}
+  {base}
+  buttonOptions={{
+    locale: 'fr',
+    label: 'Lire en français',
+  }}
+/>
+```
+
+<Canvas of={LanguageButtonStories.CustomiseLanguage} />
+
+## Styling
+
+Use global CSS to style the toggle button. The container div has the class `language-button` and the nested button has an id of `translate-button`.
+
+```scss
+:global(div.language-button) {
+  /* Custom styles for the container div */
+
+    button#translate-button {
+        /* Custom styles for the toggle button */
+    }
+}
+
+<Canvas of={LanguageButtonStories.CustomStyle} />
+
+```
+
+## Customising URLs
+
+By default, the `LanguageButton` component will switch from English to the translated version of the main article by appending `/{locale}/` to the base URL. For example, if the English version of the article is at `www.example.com/article/`, the translated version will be at `www.example.com/article/{locale}/`.
+
+If `embedded` is passed, it will switch between English and translated versions of the embed page by appending `/embeds/{locale}/page/` to the base URL. For example, if the English version of the embed page is at `www.example.com/article/embeds/en/page/`, the translated version will be at `www.example.com/article/embeds/{locale}/page/`.
+
+To customise this, pass a function to the `setUrl` prop that returns the URLs you want to link to.
+
+```svelte
+<script>
+  import { LanguageButton } from '@reuters-graphics/graphics-components';
+
+  //  If using in the graphics kit, use `base` from `$app/paths` to ensure the toggle links to the correct URL
+  import { base } from '$app/paths';
+
+  // If using in the graphics kit, `embedded` prop will already be available in App.svelte.
+  // Additionally, pass `locale = 'en'` as a prop
+  let { embedded = false, locale = 'en' }: Props = $props();
+
+  // Custom function to return the URLs for the toggle button
+  const setUrl = () => {
+    if (embedded) {
+      if (locale === 'es') {
+        // If we're in the non-English article, link to the English article
+        return `${base}/embeds/en/custom-embed-url/`;
+      } else {
+        return `${base}/embeds/es/custom-embed-url/`;
+      }
+    } else {
+      if (locale === 'es') {
+        // If we're in the non-English article, link to the English article
+        return `${base}/`;
+      } else {
+        return `${base}/es/`;
+      }
+    }
+  };
+</script>
+
+<LanguageButton {locale} {embedded} {setUrl} />
+```
diff --git a/src/components/LanguageButton/LanguageButton.stories.svelte b/src/components/LanguageButton/LanguageButton.stories.svelte
new file mode 100644
index 0000000..113d5c7
--- /dev/null
+++ b/src/components/LanguageButton/LanguageButton.stories.svelte
@@ -0,0 +1,167 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import LanguageButton from './LanguageButton.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/LanguageButton',
+    component: LanguageButton,
+    tags: ['autodocs'],
+  });
+
+  let spanishLocale = $state('en');
+  let frenchLocale = $state('en');
+</script>
+
+{#snippet demoToggle(
+  locale: string,
+  translatedLocale: string,
+  translatedLabel: string,
+  ariaLabel: string,
+  onToggle: () => void
+)}
+  <div class="demo-toggle-panel">
+    <div class="demo-toggle-copy">
+      <p class="demo-toggle-kicker font-sans">Demo control</p>
+      <p class="demo-toggle-text font-sans">
+        Use this toggle to simulate a locale switch in the demo
+      </p>
+    </div>
+    <div class="toggle-container">
+      <span class="label">EN</span>
+      <button
+        class="toggle-slider {locale === translatedLocale ? 'active' : ''}"
+        onclick={onToggle}
+        aria-label={ariaLabel}
+      >
+        <span class="slider-circle"></span>
+      </button>
+      <span class="label">{translatedLabel}</span>
+    </div>
+  </div>
+{/snippet}
+
+<Story name="Demo" tags={['!autodocs', '!dev']}>
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    {@render demoToggle(
+      spanishLocale,
+      'es',
+      'ES',
+      'Toggle between English and Spanish',
+      () => {
+        spanishLocale = spanishLocale === 'en' ? 'es' : 'en';
+      }
+    )}
+    <LanguageButton locale={spanishLocale}></LanguageButton>
+  </div>
+</Story>
+
+<Story name="CustomiseLanguage" tags={['!autodocs', '!dev']}>
+  <div style="display: flex; flex-direction: column; gap: 2rem;">
+    {@render demoToggle(
+      frenchLocale,
+      'fr',
+      'FR',
+      'Toggle between English and French',
+      () => {
+        frenchLocale = frenchLocale === 'en' ? 'fr' : 'en';
+      }
+    )}
+    <LanguageButton
+      locale={frenchLocale}
+      buttonOptions={{
+        locale: 'fr',
+        label: 'Lire en français',
+      }}
+    ></LanguageButton>
+  </div>
+</Story>
+
+<style lang="scss">
+  .demo-toggle-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.875rem;
+    width: fit-content;
+    padding: 0.9rem 1rem;
+    border: 1px solid #d6dde8;
+    border-radius: 14px;
+    background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%);
+  }
+
+  .demo-toggle-copy {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .demo-toggle-kicker {
+    margin: 0;
+    font-size: 0.9rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #315aa9;
+  }
+
+  .demo-toggle-text {
+    margin: 0;
+    max-width: 24rem;
+    font-size: 0.9rem;
+    line-height: 1.35;
+    color: #425466;
+  }
+
+  .toggle-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .label {
+    font-weight: 600;
+    font-size: 0.875rem;
+    letter-spacing: 0.05em;
+    color: #666;
+  }
+
+  .toggle-slider {
+    position: relative;
+    width: 50px;
+    height: 20px;
+    background-color: #ccc;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    transition: background-color 0.3s ease;
+  }
+
+  .toggle-slider:hover {
+    background-color: #bbb;
+  }
+
+  .toggle-slider.active {
+    background-color: #6384cc;
+  }
+
+  .toggle-slider.active:hover {
+    background-color: #1d4ed8;
+  }
+
+  .slider-circle {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 18px;
+    height: 18px;
+    background-color: white;
+    border-radius: 50%;
+    transition: left 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  .toggle-slider.active .slider-circle {
+    left: 31px;
+  }
+</style>
diff --git a/src/components/LanguageButton/LanguageButton.svelte b/src/components/LanguageButton/LanguageButton.svelte
new file mode 100644
index 0000000..49d1cce
--- /dev/null
+++ b/src/components/LanguageButton/LanguageButton.svelte
@@ -0,0 +1,97 @@
+<!-- @component `LanguageButton` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-languagebutton--docs) -->
+<script lang="ts">
+  interface Props {
+    /** The current locale of the article */
+    locale: string | undefined;
+    /** Whether the article is embedded */
+    embedded?: boolean;
+    /** The base URL for the article */
+    base?: string;
+    /** Options for the language toggle button */
+    buttonOptions?: {
+      locale: string;
+      label: string;
+    };
+    /** Custom function for handling URL changes for locales and embed versions. */
+    setUrl?: () => string;
+  }
+
+  let {
+    locale = 'en',
+    embedded = false,
+    base,
+    buttonOptions = {
+      locale: 'es',
+      label: 'Leer en español',
+    },
+    setUrl,
+  }: Props = $props();
+
+  let translationLocale = buttonOptions.locale;
+
+  const handleLocale = () => {
+    if (setUrl) {
+      return setUrl();
+    }
+
+    if (embedded) {
+      if (locale === translationLocale) {
+        // If we're in the non-English article, link to the English article
+        return `${base}/embeds/en/page/`;
+      } else {
+        return `${base}/embeds/${translationLocale}/page`;
+      }
+    } else {
+      if (locale === translationLocale) {
+        // If we're in the non-English article, link to the English article
+        return `${base}/`;
+      } else {
+        return `${base}/${translationLocale}`;
+      }
+    }
+  };
+</script>
+
+<div class="language-button">
+  <a data-sveltekit-reload href={handleLocale()}
+    ><button
+      id="translate-button"
+      class="text-sm"
+      aria-label="Toggle article language"
+      >{locale === translationLocale ? 'Read in English' : (
+        buttonOptions.label
+      )}</button
+    ></a
+  >
+</div>
+
+<style lang="scss">
+  div {
+    display: flex;
+    justify-content: center;
+
+    #translate-button {
+      position: absolute;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.06rem;
+      font-size: var(--theme-font-size-xs);
+      background-color: #d3e1e1;
+      color: rgb(91 101 101);
+      padding: 2px 12px;
+      border-radius: 4px;
+      z-index: 10;
+      cursor: pointer;
+      position: relative;
+      border: none;
+      transition:
+        background-color 0.25s ease,
+        color 0.25s ease;
+    }
+
+    #translate-button:hover {
+      background-color: #889d9b;
+      color: #ebf7f7;
+    }
+  }
+</style>
diff --git a/src/components/LogBlock.svelte b/src/components/LogBlock.svelte
new file mode 100644
index 0000000..86890e9
--- /dev/null
+++ b/src/components/LogBlock.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { Block } from '../index.ts';
+
+  interface Props {
+    /**
+     * A message to display
+     */
+    message: string;
+    /**
+     * The level of the message, either `warn` or `info`
+     */
+    level?: 'warn' | 'info';
+  }
+
+  let { message, level = 'warn' }: Props = $props();
+</script>
+
+<!-- {#if isReutersDev(page.url)} -->
+  <!-- This log will only appear in development. -->
+  <Block>
+    <div class={level}>
+      <span>{level.toUpperCase()}</span>
+      {message}
+    </div>
+  </Block>
+<!-- {/if} -->
+
+<style lang="scss">
+  div {
+    margin: 15px 0;
+    padding: 0.75rem;
+    font-family: monospace;
+    font-size: 0.85rem;
+    border-radius: 4px;
+
+    span {
+      display: inline-block;
+      padding: 2px 5px;
+      border-radius: 2px;
+    }
+
+    &.warn {
+      color: #000;
+      background-color: #ffe0e0;
+      border: 1px solid #ffbebe;
+      span {
+        background-color: #dc3545;
+        color: white;
+      }
+    }
+
+    &.info {
+      color: #000;
+      background-color: #e0f7ff;
+      border: 1px solid #d2dcff;
+      span {
+        background-color: #007bff;
+        color: white;
+      }
+    }
+  }
+</style>
diff --git a/src/components/Lottie/LottieForeground.svelte b/src/components/Lottie/LottieForeground.svelte
index ed74a21..dc1156e 100644
--- a/src/components/Lottie/LottieForeground.svelte
+++ b/src/components/Lottie/LottieForeground.svelte
@@ -69,7 +69,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .lottie-foreground-container {
     position: absolute;
diff --git a/src/components/Lottie/demo/withScrollerBase.svelte b/src/components/Lottie/demo/withScrollerBase.svelte
index 483626d..d65630f 100644
--- a/src/components/Lottie/demo/withScrollerBase.svelte
+++ b/src/components/Lottie/demo/withScrollerBase.svelte
@@ -45,7 +45,7 @@
 <BodyText text={dummyText} />
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .step-foreground-container {
     height: 100lvh;
diff --git a/src/components/PaddingReset/PaddingReset.mdx b/src/components/PaddingReset/PaddingReset.mdx
new file mode 100644
index 0000000..95feb03
--- /dev/null
+++ b/src/components/PaddingReset/PaddingReset.mdx
@@ -0,0 +1,53 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as PaddingResetStories from './PaddingReset.stories.svelte';
+
+<Meta of={PaddingResetStories} />
+
+# PaddingReset
+
+Sometimes you want a visual element to be fluid, i.e., edge-to-edge, but keep padding on adjacent text such as notes or captions. The `PaddingReset` component resets our normal well padding inside a `fluid` container.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+</script>
+
+<Block width="fluid">
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Wrap text in `PaddingReset`to add padding back in -->
+  <PaddingReset>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+```
+
+<Canvas of={PaddingResetStories.Demo} />
+
+## Conditional padding
+
+You can add the padding conditionally by setting the `containerIsFluid` prop to `true` when the `Block` width is `fluid`, which is what many other components in this library do.
+
+```svelte
+<script>
+  import { Block, PaddingReset } from '@reuters-graphics/graphics-components';
+
+  let { src = 'https://...', width = 'fluid' } = $props();
+</script>
+
+<Block {width}>
+  <!-- Edge-to-edge image -->
+  <img src="https:..." alt="Alt text" class="fmb-1" />
+
+  <!-- Set conditional padding with the `containerIsFluid` prop -->
+  <PaddingReset containerIsFluid={width === 'fluid'}>
+    <div class="body-note">
+      A caption for the image that is padded when Block is fluid.
+    </div>
+  </PaddingReset>
+</Block>
+```
diff --git a/src/components/PaddingReset/PaddingReset.stories.svelte b/src/components/PaddingReset/PaddingReset.stories.svelte
new file mode 100644
index 0000000..041690f
--- /dev/null
+++ b/src/components/PaddingReset/PaddingReset.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PaddingReset from './PaddingReset.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page layout/PaddingReset',
+    component: PaddingReset,
+  });
+</script>
+
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  let width: 'wide' | 'fluid' = 'fluid';
+
+  import sharkSrc from './shark.jpg';
+</script>
+
+<Story name="Demo">
+  <!-- Fluid block -->
+  <Block {width}>
+    <img src={sharkSrc} alt="shark" class="fmb-1" />
+    <PaddingReset containerIsFluid={width === 'fluid' ? true : false}>
+      <div class="body-note">
+        A caption for the image that is padded when its containing <code
+          >Block</code
+        > is fluid.
+      </div>
+    </PaddingReset>
+  </Block>
+</Story>
+
+<style lang="scss">
+  // Style span as code block with unicode font
+  code {
+    line-height: 1;
+    margin: 0px 2px;
+    padding: 3px 5px;
+    white-space: nowrap;
+    border-radius: 3px;
+    font-size: 13px;
+    border: 1px solid rgb(236, 244, 249);
+    color: rgba(46, 52, 56, 0.9);
+    background-color: rgb(247, 250, 252);
+  }
+
+  // p {
+  //   background: rgb(222, 222, 222);
+  // }
+</style>
diff --git a/src/components/PaddingReset/PaddingReset.svelte b/src/components/PaddingReset/PaddingReset.svelte
new file mode 100644
index 0000000..cfc012b
--- /dev/null
+++ b/src/components/PaddingReset/PaddingReset.svelte
@@ -0,0 +1,34 @@
+<!-- @component `PaddingReset` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-layout-paddingreset--docs) -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Set to `true` if the parent container is fluid.
+     */
+    containerIsFluid?: boolean;
+    /**
+     * Content to be padded.
+     */
+    children: Snippet;
+  }
+
+  let { containerIsFluid = true, children }: Props = $props();
+</script>
+
+{#if containerIsFluid}
+  <div>
+    <!-- Padded content -->
+    {@render children()}
+  </div>
+{:else}
+  <!-- Padded content -->
+  {@render children()}
+{/if}
+
+<style>
+  div {
+    width: 100%;
+    padding: 0 15px;
+  }
+</style>
diff --git a/src/components/PaddingReset/shark.jpg b/src/components/PaddingReset/shark.jpg
new file mode 100644
index 0000000..5b54e9f
Binary files /dev/null and b/src/components/PaddingReset/shark.jpg differ
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index 971b29a..e1a981e 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -128,7 +128,7 @@
 </Block>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   div.photopack-container {
     div.photopack-row {
diff --git a/src/components/PymChild/PymChild.mdx b/src/components/PymChild/PymChild.mdx
new file mode 100644
index 0000000..00d995d
--- /dev/null
+++ b/src/components/PymChild/PymChild.mdx
@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+import * as PymChildStories from './PymChild.stories.svelte';
+
+<Meta of={PymChildStories} />
+
+# PymChild
+
+The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) child instance for embeddables.
+
+```svelte
+<script>
+  import { PymChild } from '@reuters-graphics/graphics-components';
+</script>
+
+<PymChild polling={500} />
+```
+
+You can access the Pym.js child via `pym` in other components to send custom height updates to parent frames:
+
+```svelte
+<script>
+  import { PymChild, pym } from '@reuters-graphics/graphics-components';
+
+  const updateHeight = () => {
+    if (pym.child) pym.child.sendHeight();
+  };
+</script>
+
+<PymChild />
+
+<button onclick={updateHeight}>Update height</button>
+```
diff --git a/src/components/PymChild/PymChild.stories.svelte b/src/components/PymChild/PymChild.stories.svelte
new file mode 100644
index 0000000..36c1f1f
--- /dev/null
+++ b/src/components/PymChild/PymChild.stories.svelte
@@ -0,0 +1,11 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import PymChild from './PymChild.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/PymChild',
+    component: PymChild,
+  });
+</script>
+
+<Story name="Demo" tags={['!autodocs', '!dev']} />
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
new file mode 100644
index 0000000..c7c5a55
--- /dev/null
+++ b/src/components/PymChild/PymChild.svelte
@@ -0,0 +1,18 @@
+<!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
+<script lang="ts">
+  import pym from 'pym.js';
+  import { pym as pymState } from './state.svelte.js';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** Pym.js polling interval */
+    polling?: number;
+  }
+
+  let { polling = 500 }: Props = $props();
+
+  onMount(() => {
+    let pymChild = new pym.Child({ polling });
+    pymState.child = pymChild;
+  });
+</script>
diff --git a/src/components/PymChild/state.svelte.ts b/src/components/PymChild/state.svelte.ts
new file mode 100644
index 0000000..71c43a6
--- /dev/null
+++ b/src/components/PymChild/state.svelte.ts
@@ -0,0 +1,5 @@
+import type p from 'pym.js';
+
+type PymChild = { child: p.Child | null };
+
+export const pym = $state<PymChild>({ child: null });
diff --git a/src/components/ReferralBlock/ReferralBlock.mdx b/src/components/ReferralBlock/ReferralBlock.mdx
new file mode 100644
index 0000000..0cffe82
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.mdx
@@ -0,0 +1,44 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReferralBlockStories from './ReferralBlock.stories.svelte';
+
+<Meta of={ReferralBlockStories} />
+
+# ReferralBlock
+
+The `ReferralBlock` component creates a set of referral links from recent Reuters.com stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
+
+> Note: The `section` or `collection` prop determines which section or collection stories are from.
+>
+> You can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for [World - Europe](https://www.reuters.com/world/europe/) stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
+>
+> You should get the collection alias from the dotcom team.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock
+  section="/lifestyle/sports/"
+  class="fmy-0"
+  heading="More World Cup coverage"
+/>
+```
+
+<Canvas of={ReferralBlockStories.Demo} />
+
+## Collections
+
+TK - Check if this is still relevant.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
+```
+
+<Canvas of={ReferralBlockStories.ByCollection} />
+```
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
new file mode 100644
index 0000000..966575f
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -0,0 +1,51 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReferralBlock from './ReferralBlock.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/ReferralBlock',
+    component: ReferralBlock,
+    argTypes: {
+      width: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest', 'fluid'],
+      },
+      section: {
+        control: 'select',
+        options: [
+          '/world/',
+          '/world/europe/',
+          '/lifestyle/',
+          '/lifestyle/sports/',
+          '/legal/',
+          '/business/',
+          '/business/energy/',
+        ],
+      },
+      number: {
+        control: 'select',
+        options: [2, 4, 6, 8],
+      },
+    },
+  });
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    section: '/lifestyle/sports/',
+    class: 'fmy-0',
+    heading: 'More World Cup coverage',
+  }}
+/>
+
+<Story
+  name="By collection"
+  exportName="ByCollection"
+  args={{
+    collection: 'x-trump',
+    number: 6,
+    class: 'fmy-8',
+    heading: 'The latest Trump coverage',
+  }}
+/>
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
new file mode 100644
index 0000000..98d5ae2
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -0,0 +1,258 @@
+<!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
+<script lang="ts">
+  // Utils
+  import { onMount } from 'svelte';
+  import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
+  import { articleIsNotCurrentPage } from './filterCurrentPage';
+
+  // Components
+  import Block from '../Block/Block.svelte';
+
+  // Types
+  import type { Article } from './types';
+  import type { Referrals } from './types';
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  interface Props {
+    /**
+     * Section ID, which is often the URL path to the section page on reuters.com.
+     *
+     * Note that not all section pages will be available in the recent stories by section API.
+     */
+    section?: string;
+    /**
+     * Collection alias, as defined in Arc Collections editor.
+     */
+    collection?: string;
+    /**
+     * Number of referrals to show.
+     */
+    number?: number;
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget?: string;
+    /**
+     * Add a heading to the referral block.
+     */
+    heading?: string;
+    /**
+     * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+  }
+
+  let {
+    section = '/world/',
+    collection,
+    number = 4,
+    linkTarget = '_self',
+    heading = '',
+    width = 'wide',
+    id = '',
+    class: cls = 'fmy-8',
+  }: Props = $props();
+
+  let clientWidth = $state(0);
+
+  const SECTION_API = 'recent-stories-by-sections-v1';
+
+  /** @TODO - Check if collections alias API still exists*/
+  const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
+
+  let referrals: Article[] = $state([]);
+
+  const getReferrals = async () => {
+    if (typeof window === 'undefined') return;
+    // fetch only reliably works on prod sites
+    if (window?.location?.hostname !== 'www.reuters.com') return;
+    const isCollection = Boolean(collection);
+    const API = isCollection ? COLLECTION_API : SECTION_API;
+    try {
+      const response = await fetch(
+        `https://www.reuters.com/pf/api/v3/content/fetch/${API}?` +
+          new URLSearchParams({
+            query: JSON.stringify({
+              section_ids: isCollection ? undefined : section,
+              collection_alias: isCollection ? collection : undefined,
+              size: 20,
+              website: 'reuters',
+            }),
+          })
+      );
+
+      const data = (await response.json()) as Referrals;
+
+      const articles = data.result.articles
+        .filter((a) => a?.headline_category || a?.kicker?.name)
+        .filter((a) => a?.thumbnail?.url)
+        .filter((a) => !a?.content?.third_party)
+        .filter(articleIsNotCurrentPage)
+        .slice(0, number);
+
+      referrals = articles;
+    } catch {
+      console.warn('Unable to fetch referral links.');
+    }
+  };
+
+  onMount(getReferrals);
+</script>
+
+{#if referrals.length === number}
+  <Block {width} {id} class="referrals-block {cls}">
+    <div
+      class="block-container"
+      class:stacked={clientWidth && clientWidth < 750}
+      bind:clientWidth
+    >
+      {#if heading}
+        <div
+          class="heading h4 font-bold"
+          class:stacked={clientWidth && clientWidth < 750}
+        >
+          {heading}
+        </div>
+      {/if}
+      <div
+        class="referral-container inline-flex flex-wrap w-full justify-between"
+        class:stacked={clientWidth && clientWidth < 750}
+        class:xs={clientWidth && clientWidth < 450}
+      >
+        {#each referrals as referral}
+          <div class="referral">
+            <a
+              href="https://www.reuters.com{referral.canonical_url}"
+              target={linkTarget}
+              rel={linkTarget === '_blank' ? 'noreferrer' : null}
+            >
+              <div class="referral-pack flex justify-around my-0 mx-auto">
+                <div
+                  class="headline"
+                  class:xs={clientWidth && clientWidth < 450}
+                >
+                  <div
+                    class="kicker m-0 body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {referral.headline_category || referral.kicker.name}
+                  </div>
+                  <div
+                    class="title m-0 body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {referral.title}
+                  </div>
+                  <div
+                    class="publish-time body-caption leading-tighter"
+                    data-chromatic="ignore"
+                  >
+                    {getTime(new Date(referral.display_time))}
+                  </div>
+                </div>
+                <div
+                  class="image-container block m-0 overflow-hidden relative"
+                  class:xs={clientWidth && clientWidth < 450}
+                >
+                  <img
+                    class="block object-cover m-0 w-full"
+                    data-chromatic="ignore"
+                    src={referral.thumbnail.url}
+                    alt={referral.thumbnail.alt_text ||
+                      referral.thumbnail.caption}
+                  />
+                </div>
+              </div>
+            </a>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </Block>
+{/if}
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  div.block-container.stacked {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  div.heading {
+    margin-block-start: 0;
+    font-family: Knowledge, sans-serif;
+    &.stacked {
+      max-width: 450px;
+    }
+  }
+
+  .referral-container {
+    a {
+      text-decoration: none;
+    }
+    &.stacked {
+      max-width: 450px;
+      .referral {
+        width: 100%;
+        .headline {
+          width: calc(100% - 7rem);
+        }
+      }
+    }
+    .referral {
+      display: block;
+      width: calc(50% - 30px);
+      max-width: 450px;
+      @include mixins.fmy-1;
+
+      &:hover {
+        .title {
+          text-decoration: underline;
+        }
+        img {
+          filter: brightness(85%);
+        }
+      }
+
+      .headline {
+        display: inline-block;
+        width: calc(100% - 9rem);
+        @include mixins.fpr-2;
+        .kicker {
+          @include mixins.text-xxs;
+          font-family: Knowledge, sans-serif;
+        }
+        .title {
+          @include mixins.font-medium;
+          @include mixins.text-sm;
+          @include mixins.text-primary;
+          font-family: Knowledge, sans-serif;
+        }
+        .publish-time {
+          @include mixins.text-xxs;
+          font-family: Knowledge, sans-serif;
+        }
+      }
+      .image-container {
+        border-radius: 0.25rem;
+        border: 1px solid mixins.$theme-colour-brand-rules;
+        width: 9rem;
+        &.xs {
+          width: 7rem;
+        }
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          transition: filter 0.1s;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/components/ReferralBlock/filterCurrentPage.ts b/src/components/ReferralBlock/filterCurrentPage.ts
new file mode 100644
index 0000000..2536555
--- /dev/null
+++ b/src/components/ReferralBlock/filterCurrentPage.ts
@@ -0,0 +1,35 @@
+import type { Article } from './types';
+
+const getUrlFromPath = (path: string) => {
+  const base = 'https://www.reuters.com';
+
+  try {
+    return new URL(path);
+  } catch {
+    try {
+      return new URL(path, base);
+    } catch {
+      return null;
+    }
+  }
+};
+
+const isCurrentPage = (urlPath: string) => {
+  if (typeof window === 'undefined' || typeof window.location === 'undefined') {
+    return false;
+  }
+  const url = getUrlFromPath(urlPath);
+  if (!url) return false;
+  return (
+    window.location.origin === url.origin &&
+    window.location.pathname === url.pathname
+  );
+};
+
+export const articleIsNotCurrentPage = (article: Article) => {
+  const { redirect_url: redirectUrl, canonical_url: canonicalUrl } = article;
+
+  if (redirectUrl) return !isCurrentPage(redirectUrl);
+  if (canonicalUrl) return !isCurrentPage(canonicalUrl);
+  return true;
+};
diff --git a/src/components/ReferralBlock/types.ts b/src/components/ReferralBlock/types.ts
new file mode 100644
index 0000000..b087500
--- /dev/null
+++ b/src/components/ReferralBlock/types.ts
@@ -0,0 +1,109 @@
+export interface Referrals {
+  statusCode: number;
+  message: string;
+  result: Result;
+}
+
+interface Result {
+  date_modified: Date;
+  pagination: Pagination;
+  fetch_type: string;
+  title: string;
+  articles: Article[];
+}
+
+export interface Article {
+  id: string;
+  canonical_url: string;
+  basic_headline: string;
+  title: string;
+  lead_art: LeadArt;
+  description: string;
+  web: string;
+  content_code: string;
+  updated_time: Date;
+  published_time: Date;
+  display_time: Date;
+  thumbnail: LeadArt;
+  primary_media_type: string;
+  source: Source;
+  redirect_url: string;
+  distributor: string;
+  authors: Author[];
+  kicker: Kicker;
+  content_elements: unknown[];
+  headline_category?: unknown;
+  content?: {
+    third_party?: unknown;
+  };
+}
+
+interface Author {
+  topic_url: string;
+  thumbnail: Thumbnail;
+  id: string;
+  name: string;
+  first_name: string;
+  last_name: string;
+  company: string;
+  social_links: SocialLink[];
+  byline: string;
+}
+
+interface SocialLink {
+  url: string;
+  site: string;
+}
+
+interface Thumbnail {
+  url: string;
+  resizer_url: string;
+  renditions: Renditions;
+}
+
+interface Renditions {
+  square: Landscape;
+  landscape: Landscape;
+  portrait: Landscape;
+  original: Landscape;
+}
+
+interface Landscape {
+  '60w': string;
+  '120w': string;
+  '240w': string;
+  '480w': string;
+  '960w': string;
+  '1080w': string;
+  '1200w': string;
+  '1920w': string;
+}
+
+interface Kicker {
+  name: string;
+  path: string;
+  names: string[];
+}
+
+interface LeadArt {
+  type: string;
+  url: string;
+  resizer_url: string;
+  renditions: Renditions;
+  id: string;
+  caption?: string;
+  alt_text: string;
+  width: number;
+  height: number;
+  subtitle: string;
+  updated_at: Date;
+}
+
+interface Source {
+  name: string;
+}
+
+interface Pagination {
+  size: number;
+  expected_size: number;
+}
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
new file mode 100644
index 0000000..6e7c817
--- /dev/null
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte';
+
+<Meta of={ReutersGraphicsLogoStories} />
+
+# ReutersGraphicsLogo
+
+The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo.
+
+> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
+
+```svelte
+<script>
+  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersGraphicsLogo />
+```
+
+<Canvas of={ReutersGraphicsLogoStories.Demo} />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
new file mode 100644
index 0000000..3409313
--- /dev/null
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -0,0 +1,14 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
+  const { Story } = defineMeta({
+    title: 'Components/Logos/ReutersGraphicsLogo',
+    component: ReutersGraphicsLogo,
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
+  });
+</script>
+
+<Story name="Demo" />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
new file mode 100644
index 0000000..cb6e31b
--- /dev/null
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte
@@ -0,0 +1,215 @@
+<!-- @component `ReutersGraphicsLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reutersgraphicslogo--docs) -->
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 1608.56 474.84"
+  aria-hidden="true"
+  focusable="false"
+  style="width: {width}; --logoColour: {logoColour}; --textColour: {textColour};"
+>
+  <g id="Layer_1-2" data-name="Layer 1">
+    <g>
+      <path
+        class="logo-kinesis"
+        d="M410.49,63.73c6.04,6.05,9.39,14.13,9.39,22.68s-3.32,16.64-9.39,22.68c-12.49,12.5-32.83,12.5-45.32,0-6.04-6.05-9.39-14.1-9.39-22.68s3.32-16.64,9.39-22.68c6.26-6.27,14.46-9.4,22.66-9.4s16.43,3.13,22.66,9.4Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M63.85,411.02c-12.49-12.5-12.49-32.86,0-45.37,6.04-6.05,14.08-9.4,22.66-9.4s16.62,3.32,22.66,9.4c12.49,12.5,12.49,32.87,0,45.37-6.07,6.08-14.11,9.4-22.66,9.4s-16.62-3.32-22.66-9.4Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M308.11,66.23l-.22-.09c-6.82-2.88-12.14-8.24-14.96-15.1-2.88-6.92-2.88-14.54,0-21.49,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.44,7.11-2.16,10.74-2.16s7.29.72,10.73,2.16c14.3,5.92,21.09,22.37,15.18,36.69-5.92,14.32-22.34,21.12-36.65,15.2Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M155.61,406.45c3.63,0,7.26.72,10.7,2.13,14.3,5.92,21.09,22.37,15.18,36.69-2.88,6.93-8.26,12.34-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-14.3-5.92-21.09-22.37-15.18-36.69,2.88-6.92,8.26-12.34,15.18-15.2,3.47-1.44,7.1-2.16,10.73-2.16l.03.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M261.2,24.06c0,12.91-10.2,23.47-22.94,24.06h-1.09c-13.27,0-24.04-10.81-24.04-24.06S223.93,0,237.17,0s24.04,10.84,24.04,24.09v-.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M213.1,450.78c0-13.29,10.8-24.06,24.03-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.03-10.81-24.03-24.06Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M163.34,58.84c-4.94,2.04-10.36,2.04-15.34,0-4.98-2.07-8.83-5.92-10.86-10.87-4.22-10.24.63-21.99,10.86-26.22,2.5-1.03,5.07-1.54,7.64-1.54,7.89,0,15.34,4.7,18.56,12.41,2.03,4.98,2.03,10.43,0,15.35-2.03,4.98-5.88,8.84-10.86,10.87Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M310.97,416c2.5-1.04,5.1-1.57,7.7-1.57s5.2.53,7.67,1.53c4.98,2.07,8.83,5.92,10.86,10.87,2.04,4.98,2.04,10.43,0,15.35-2.03,4.98-5.88,8.83-10.86,10.87-4.97,2.04-10.39,2.04-15.36,0-4.98-2.04-8.83-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,2.04-4.95,5.89-8.8,10.86-10.84Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M97.8,75.29c6.17,6.17,6.26,16.1.31,22.4l-.34.34c-6.26,6.27-16.46,6.27-22.72,0-6.26-6.27-6.26-16.48,0-22.75,3.13-3.13,7.23-4.7,11.36-4.7s8.23,1.57,11.36,4.7h.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M376.34,376.9c3.1-3.13,7.23-4.7,11.33-4.7s8.23,1.57,11.36,4.7c3.04,3.01,4.69,7.05,4.69,11.34s-1.66,8.33-4.69,11.37c-6.26,6.3-16.43,6.27-22.72,0-3.04-3.04-4.69-7.11-4.69-11.37s1.66-8.3,4.69-11.34h.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M32.61,174.29c-10.23-4.23-15.08-16.01-10.86-26.22,2.03-4.98,5.88-8.84,10.86-10.87,2.5-1,5.1-1.54,7.7-1.54s5.2.5,7.67,1.54c10.23,4.23,15.09,16.01,10.86,26.22-2.03,4.98-5.88,8.84-10.86,10.87-4.98,2.04-10.42,2.04-15.34,0h-.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M441.79,300.61c4.97,2.04,8.82,5.89,10.86,10.87,2.03,4.98,2.03,10.4,0,15.35-4.23,10.21-15.96,15.1-26.2,10.84-4.98-2.04-8.82-5.89-10.86-10.87-2.03-4.98-2.03-10.4,0-15.35,3.19-7.71,10.67-12.38,18.56-12.38,2.54,0,5.13.5,7.64,1.54Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M0,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06S0,250.8,0,237.54Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M426.26,237.54c0-13.28,10.8-24.06,24.04-24.06s24.04,10.81,24.04,24.06-10.8,24.06-24.04,24.06-24.04-10.81-24.04-24.06Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M14.24,329.81c-5.92-14.32.88-30.73,15.18-36.69,6.92-2.88,14.52-2.88,21.47,0,6.92,2.88,12.3,8.27,15.18,15.2,2.88,6.93,2.88,14.54,0,21.49-2.88,6.92-8.26,12.31-15.18,15.2-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M408.04,166.49c-2.85-6.92-2.85-14.54,0-21.46,2.88-6.92,8.26-12.31,15.18-15.2,3.47-1.47,7.1-2.16,10.67-2.16,11.02,0,21.47,6.52,25.95,17.33,5.92,14.32-.88,30.73-15.18,36.69-6.92,2.88-14.52,2.88-21.47,0-6.92-2.88-12.3-8.27-15.18-15.2h.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M305.36,305.69c-8.79,8.77-8.79,23.09,0,31.86,8.79,8.8,23.07,8.8,31.86,0,4.26-4.26,6.6-9.9,6.6-15.92s-2.35-11.69-6.6-15.91c-4.38-4.39-10.14-6.58-15.9-6.58s-11.58,2.19-15.96,6.55h0Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M117.55,223.79c-9.51-2.54-15.15-12.34-12.61-21.87,1.25-4.61,4.19-8.46,8.33-10.84,2.72-1.6,5.79-2.41,8.86-2.41,1.53,0,3.1.19,4.63.6,4.6,1.25,8.45,4.2,10.83,8.33,2.38,4.14,3,8.96,1.78,13.57-2.53,9.52-12.33,15.2-21.85,12.63h.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M347.49,285.48c-4.6-1.25-8.45-4.2-10.83-8.33-2.38-4.14-3-8.96-1.78-13.57,1.25-4.61,4.19-8.46,8.32-10.84,2.75-1.6,5.82-2.41,8.89-2.41,1.28,0,2.56.13,3.82.41l.85.22c9.51,2.54,15.15,12.38,12.61,21.87-1.25,4.61-4.19,8.46-8.32,10.84-4.13,2.38-8.95,3.04-13.55,1.79v.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M108.41,271.95c-1.97-7.36,2.16-14.91,9.3-17.3l.81-.22c7.61-2.07,15.46,2.51,17.49,10.12,1,3.7.5,7.55-1.44,10.87-1.91,3.29-5.01,5.67-8.67,6.67-3.69,1-7.51.5-10.86-1.44-3.29-1.91-5.66-5.01-6.67-8.68l.03-.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M344.92,219.06l-.63-.38c-2.97-1.94-5.1-4.86-6.01-8.3-2.03-7.64,2.47-15.48,10.11-17.55,7.57-2.04,15.46,2.51,17.49,10.12,2.03,7.61-2.47,15.48-10.11,17.51-3.69,1-7.51.47-10.86-1.44v.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M160.96,328.65l-.41.41c-4.19,4.2-11.02,4.2-15.21,0-4.19-4.2-4.19-10.99,0-15.2,4.19-4.2,11.02-4.2,15.21,0,2.03,2.04,3.16,4.73,3.16,7.61,0,2.69-.97,5.2-2.75,7.18Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M328.84,145.53c2.03,2.04,3.16,4.73,3.16,7.61s-1.13,5.58-3.16,7.61c-4.19,4.2-11.02,4.2-15.21,0-2.03-2.07-3.16-4.73-3.16-7.61s1.13-5.58,3.16-7.61c2.07-2.04,4.73-3.16,7.61-3.16s5.57,1.1,7.61,3.13v.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M218.7,345.32c1.91,3.29,2.41,7.18,1.44,10.87-1,3.7-3.35,6.77-6.67,8.68-3.32,1.91-7.17,2.41-10.86,1.44-7.61-2.04-12.14-9.9-10.11-17.51,1-3.7,3.35-6.77,6.67-8.68,3.29-1.91,7.14-2.41,10.86-1.44,3.69,1,6.76,3.35,8.67,6.67v-.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M255.51,129.58c-1.91-3.29-2.41-7.17-1.44-10.87,1-3.7,3.35-6.77,6.67-8.68,2.19-1.25,4.63-1.91,7.1-1.91,1.25,0,2.47.16,3.72.47,3.69,1,6.76,3.35,8.67,6.67,1.91,3.29,2.41,7.17,1.44,10.87-2.03,7.61-9.89,12.16-17.49,10.12-3.69-1-6.76-3.35-8.67-6.67Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M276.98,337.08l.75.44c3.73,2.41,6.38,6.08,7.54,10.37,2.54,9.52-3.1,19.33-12.61,21.87-4.63,1.26-9.42.6-13.55-1.78-4.13-2.38-7.07-6.24-8.32-10.84-1.25-4.61-.6-9.43,1.78-13.57,2.38-4.13,6.23-7.08,10.83-8.33,1.57-.41,3.13-.59,4.67-.59,3.1,0,6.13.81,8.89,2.41l.03.03Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M210.97,139.64c-9.48,2.54-19.28-3.13-21.85-12.63-2.53-9.52,3.1-19.33,12.61-21.87,1.53-.41,3.07-.6,4.6-.6,7.89,0,15.12,5.26,17.24,13.22,2.53,9.52-3.1,19.33-12.61,21.87Z"
+      ></path>
+      <path
+        class="logo-kinesis"
+        d="M153.01,175.51c12.41,0,22.47-10.07,22.47-22.49s-10.06-22.49-22.47-22.49-22.47,10.07-22.47,22.49,10.06,22.49,22.47,22.49Z"
+      ></path>
+    </g>
+    <g>
+      <g>
+        <path
+          class="logo-text"
+          d="M536.58,47.31h89.16c48.17,0,80.4,28.11,80.4,72.02,0,27.83-14.7,50.07-37.53,60.9l43.15,83.46h-51.91l-36.92-72.66h-39.42v72.66h-46.93V47.31ZM583.51,85.94v66.46h38.49c22.22,0,36.28-12.98,36.28-33.07s-14.06-33.39-36.28-33.39h-38.49Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M718.44,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.48c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.71-31.84-85.71-80.99ZM837.93,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.97,30.29h72.57Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1009.81,104.84h44.12v158.89h-39.1l-4.06-19.17c-10.32,12.35-24.39,21.01-47.25,21.01-33.15,0-63.81-16.39-63.81-72.66v-88.1h44.12v82.23c0,28.43,9.4,42.36,31.3,42.36s34.72-15.76,34.72-45.14v-79.45l-.03.03Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1080.01,60.42h44.12v44.51h36.6v36.8h-36.6v69.56c0,11.12,4.38,15.77,15.63,15.77h22.83v36.77h-36.6c-30.66,0-45.97-15.13-45.97-45.42V60.42Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1169.86,184.54c0-49.47,32.83-81.59,82.57-81.59s80.72,29.66,81.33,76.35c0,4.65-.32,9.89-1.25,14.85h-116.68v2.15c.93,22.55,15.63,36.17,37.85,36.17,17.84,0,30.34-7.74,34.11-22.55h43.47c-5.02,30.93-32.83,55.63-75.7,55.63-53.48,0-85.7-31.84-85.7-80.99ZM1289.36,165.68c-3.13-19.46-16.59-30.29-36.6-30.29s-33.47,11.44-35.96,30.29h72.57Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1451.32,104.8v39.58h-17.52c-26.28,0-36.28,17.31-36.28,41.41v77.9h-44.12V104.8h40.06l4.06,23.79c8.76-14.21,21.26-23.79,46.29-23.79h7.51Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1500.28,210.87c1.57,13.9,13.74,23.5,35.35,23.5,18.45,0,29.73-5.88,29.73-16.99,0-12.98-10.94-13.9-36.92-17.31-37.53-4.33-66.62-12.67-66.62-45.42s27.84-52.25,69.11-51.93c43.16,0,72.89,18.86,75.09,51.3h-42.23c-1.25-12.67-13.46-20.41-31.29-20.41s-28.45,6.19-28.45,16.4c0,12.07,13.78,13.3,36.92,16.08,36.92,3.69,67.58,12.07,67.58,47.92,0,31.52-30.02,51.62-73.21,51.62s-75.06-20.72-76.94-54.71h41.91l-.03-.03Z"
+        ></path>
+      </g>
+      <g>
+        <path
+          class="logo-text"
+          d="M534.98,369.02c0-8.94,1.29-17.05,3.87-24.34,2.58-7.28,6.39-13.56,11.44-18.83,5.04-5.27,11.27-9.34,18.66-12.21,7.4-2.86,15.91-4.3,25.54-4.3,13.76,0,25.57,2.06,35.43,6.19l-2.24,12.56c-4.82-1.6-9.83-2.95-15.05-4.04-5.22-1.09-10.87-1.63-16.94-1.63-14.68,0-25.94,3.96-33.8,11.87-7.86,7.91-11.78,19.55-11.78,34.92s3.84,26.09,11.52,34.23c7.68,8.14,18.63,12.21,32.85,12.21,3.55,0,7.14-.2,10.75-.6,3.61-.4,6.79-.89,9.55-1.46v-38.87h14.45v48.16c-2.06.69-4.42,1.35-7.05,1.98-2.64.63-5.48,1.17-8.51,1.63-3.04.46-6.17.83-9.37,1.12-3.21.29-6.36.43-9.46.43-9.86,0-18.55-1.49-26.06-4.47-7.51-2.98-13.76-7.11-18.75-12.38-4.99-5.27-8.75-11.49-11.27-18.66-2.52-7.16-3.78-14.99-3.78-23.48Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M755.82,345.29c0,7.91-2.32,14.79-6.97,20.64-4.64,5.85-11.04,9.86-19.18,12.04l32.34,47.99h-18.23l-29.93-46.61h-28.04v46.61h-15.14v-114.55h48.5c5.96,0,11.24.86,15.82,2.58,4.58,1.72,8.43,4.07,11.52,7.05,3.1,2.98,5.42,6.54,6.97,10.66,1.55,4.13,2.32,8.66,2.32,13.59ZM740.52,345.29c0-6.88-2.04-12.18-6.11-15.91-4.07-3.72-9.83-5.59-17.29-5.59h-31.3v43.34h31.3c7.34,0,13.07-1.98,17.2-5.93s6.19-9.26,6.19-15.91Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M832.36,311.41h16.68l42.66,114.55h-15.31l-10.66-30.1h-50.05l-10.49,30.1h-15.31l42.48-114.55ZM820.15,383.13h41.28l-20.64-59.68-20.64,59.68Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M925.07,311.41h46.1c5.85,0,11.03.92,15.57,2.75,4.53,1.84,8.34,4.3,11.44,7.4s5.44,6.74,7.05,10.92c1.6,4.19,2.41,8.69,2.41,13.5s-.8,9.15-2.41,13.33c-1.61,4.19-3.96,7.86-7.05,11.01-3.1,3.16-6.91,5.65-11.44,7.48-4.53,1.84-9.72,2.75-15.57,2.75h-30.96v45.41h-15.14v-114.55ZM969.44,368.16c7.22,0,12.84-1.98,16.86-5.93,4.01-3.96,6.02-9.37,6.02-16.25s-2.01-12.3-6.02-16.25c-4.02-3.96-9.63-5.93-16.86-5.93h-29.24v44.38h29.24Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1043.06,311.41h15.14v49.36h58.31v-49.36h15.14v114.55h-15.14v-51.77h-58.31v51.77h-15.14v-114.55Z"
+        ></path>
+        <path class="logo-text" d="M1176.53,311.41h15.14v114.55h-15.14v-114.55Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1245.67,368.68c0,14.68,3.9,26.03,11.7,34.06,7.8,8.03,18.75,12.04,32.85,12.04,5.16,0,9.86-.46,14.1-1.38,4.24-.92,8.2-2.06,11.87-3.44l2.41,12.21c-3.33,1.61-7.74,2.98-13.24,4.13-5.5,1.14-11.47,1.72-17.89,1.72-8.83,0-16.74-1.41-23.74-4.21-7-2.81-12.96-6.79-17.89-11.95-4.93-5.16-8.72-11.38-11.35-18.66-2.64-7.28-3.96-15.45-3.96-24.51s1.32-17.23,3.96-24.51c2.64-7.28,6.42-13.5,11.35-18.66,4.93-5.16,10.89-9.14,17.89-11.95,6.99-2.81,14.91-4.21,23.74-4.21,6.42,0,12.38.58,17.89,1.72,5.5,1.15,9.92,2.52,13.24,4.13l-2.41,12.21c-3.67-1.38-7.63-2.52-11.87-3.44-4.24-.92-8.94-1.38-14.1-1.38-14.1,0-25.06,4.02-32.85,12.04-7.8,8.03-11.7,19.38-11.7,34.06Z"
+        ></path>
+        <path
+          class="logo-text"
+          d="M1432.46,395.34c0,10.32-3.7,18.35-11.09,24.08-7.4,5.74-17.57,8.6-30.53,8.6-6.88,0-13.82-.8-20.81-2.41-7-1.6-13.48-3.61-19.44-6.02l3.44-12.21c5.62,2.3,11.61,4.21,17.97,5.76,6.36,1.55,12.64,2.32,18.83,2.32,8.14,0,14.65-1.49,19.52-4.47,4.87-2.98,7.31-7.68,7.31-14.1s-2.47-11.09-7.4-14.36c-4.93-3.27-12.38-6.16-22.36-8.69-12.62-3.1-22.05-7.16-28.29-12.21-6.25-5.04-9.37-12.04-9.37-20.98,0-10.89,3.64-18.83,10.92-23.82,7.28-4.99,17.4-7.48,30.36-7.48,7.34,0,13.99.66,19.95,1.98,5.96,1.32,11.58,3.18,16.86,5.59l-2.92,12.21c-4.82-2.06-10.12-3.81-15.91-5.25-5.79-1.43-11.73-2.15-17.8-2.15-8.49,0-15.05,1.32-19.69,3.96-4.64,2.64-6.97,7.34-6.97,14.1,0,3.21.57,5.88,1.72,8,1.15,2.12,2.89,3.93,5.25,5.42,2.35,1.49,5.33,2.84,8.94,4.04,3.61,1.2,7.88,2.49,12.81,3.87,5.16,1.49,10.09,3.13,14.79,4.9,4.7,1.78,8.83,3.96,12.38,6.54,3.55,2.58,6.36,5.71,8.43,9.37,2.06,3.67,3.1,8.14,3.1,13.42Z"
+        ></path>
+      </g>
+    </g>
+  </g>
+</svg>
+
+<style>
+  .logo-kinesis {
+    fill: var(--logoColour);
+  }
+  .logo-text {
+    fill: var(--textColour);
+  }
+</style>
diff --git a/src/components/ReutersLogo/ReutersLogo.mdx b/src/components/ReutersLogo/ReutersLogo.mdx
new file mode 100644
index 0000000..e4d3b63
--- /dev/null
+++ b/src/components/ReutersLogo/ReutersLogo.mdx
@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersLogoStories from './ReutersLogo.stories.svelte';
+
+<Meta of={ReutersLogoStories} />
+
+# ReutersLogo
+
+The `ReutersLogo` component contains the official Reuters logo.
+
+```svelte
+<script>
+  import { ReutersLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersLogo />
+```
+
+<Canvas of={ReutersLogoStories.Demo} />
diff --git a/src/components/ReutersLogo/ReutersLogo.stories.svelte b/src/components/ReutersLogo/ReutersLogo.stories.svelte
new file mode 100644
index 0000000..5ab6725
--- /dev/null
+++ b/src/components/ReutersLogo/ReutersLogo.stories.svelte
@@ -0,0 +1,15 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ReutersLogo from './ReutersLogo.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Logos/ReutersLogo',
+    component: ReutersLogo,
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
+  });
+</script>
+
+<Story name="Demo" />
diff --git a/src/components/ReutersLogo/ReutersLogo.svelte b/src/components/ReutersLogo/ReutersLogo.svelte
new file mode 100644
index 0000000..aadffae
--- /dev/null
+++ b/src/components/ReutersLogo/ReutersLogo.svelte
@@ -0,0 +1,188 @@
+<!-- @component `ReutersLogo` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-logos-reuterslogo--docs) -->
+<script lang="ts">
+  interface Props {
+    /** "Kinesis" colour */
+    logoColour?: string;
+    /** Text colour */
+    textColour?: string;
+    /** CSS width value */
+    width?: string;
+  }
+
+  let {
+    logoColour = '#D64000',
+    textColour = '#212223',
+    width = '100%',
+  }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 1760.4 558.7"
+  style="width: {width}; --logoColour: {logoColour}; --textColour: {textColour};"
+>
+  <g id="Primary_Logo" data-name="Primary Logo">
+    <g>
+      <g>
+        <path
+          class="cls-2"
+          d="M655.4,166.9h91.9c49.7,0,82.9,29,82.9,74.2s-15.2,51.6-38.7,62.8l44.5,86h-53.5l-38.1-74.9h-40.6v74.9h-48.4v-223h0ZM703.8,206.7v68.5h39.7c22.9,0,37.4-13.4,37.4-34.1s-14.5-34.4-37.4-34.4h-39.7Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M842.9,308.3c0-51,33.8-84.1,85.1-84.1s83.2,30.6,83.8,78.7c0,4.8-.3,10.2-1.3,15.3h-120.3v2.2c1,23.2,16.1,37.3,39,37.3s31.3-8,35.2-23.2h44.8c-5.2,31.9-33.8,57.3-78,57.3s-88.3-32.8-88.3-83.5h0ZM966,288.9c-3.2-20.1-17.1-31.2-37.7-31.2s-34.5,11.8-37.1,31.2h74.8Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M1143.2,226.2h45.5v163.8h-40.3l-4.2-19.8c-10.6,12.7-25.1,21.6-48.7,21.6-34.2,0-65.8-16.9-65.8-74.9v-90.8h45.5v84.8c0,29.3,9.7,43.7,32.3,43.7s35.8-16.2,35.8-46.5v-81.9h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M1215.6,180.4h45.5v45.9h37.7v37.9h-37.7v71.7c0,11.5,4.5,16.2,16.1,16.2h23.5v37.9h-37.7c-31.6,0-47.4-15.6-47.4-46.8v-162.8Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M1308.2,308.3c0-51,33.8-84.1,85.1-84.1s83.2,30.6,83.8,78.7c0,4.8-.3,10.2-1.3,15.3h-120.3v2.2c1,23.2,16.1,37.3,39,37.3s31.3-8,35.2-23.2h44.8c-5.2,31.9-33.8,57.3-78,57.3s-88.3-32.8-88.3-83.5h0ZM1431.3,288.9c-3.2-20.1-17.1-31.2-37.7-31.2s-34.5,11.8-37.1,31.2h74.8,0Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M1598.3,226.1v40.8h-18.1c-27.1,0-37.4,17.8-37.4,42.7v80.3h-45.5v-163.8h41.3l4.2,24.5c9-14.6,21.9-24.5,47.7-24.5h7.8Z"
+        ></path>
+        <path
+          class="cls-2"
+          d="M1648.8,335.5c1.6,14.3,14.2,24.2,36.4,24.2s30.7-6.1,30.7-17.5-11.3-14.3-38.1-17.8c-38.7-4.5-68.7-13.1-68.7-46.8s28.7-53.9,71.2-53.5c44.5,0,75.1,19.4,77.4,52.9h-43.5c-1.3-13.1-13.9-21-32.3-21s-29.3,6.4-29.3,16.9,14.2,13.7,38.1,16.6c38.1,3.8,69.7,12.4,69.7,49.4s-30.9,53.2-75.5,53.2-77.4-21.4-79.3-56.4h43.2,0Z"
+        ></path>
+      </g>
+      <g>
+        <path
+          class="cls-1"
+          d="M483,75c7.1,7.1,11,16.6,11,26.7s-3.9,19.6-11,26.7c-14.7,14.7-38.6,14.7-53.3,0-7.1-7.1-11-16.6-11-26.7s3.9-19.6,11-26.7c7.4-7.4,17-11.1,26.7-11.1s19.3,3.7,26.7,11.1Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M75.1,483.6c-14.7-14.7-14.7-38.7,0-53.4,7.1-7.1,16.6-11.1,26.7-11.1s19.6,3.9,26.7,11.1c14.7,14.7,14.7,38.7,0,53.4-7.1,7.1-16.6,11.1-26.7,11.1s-19.6-3.9-26.7-11.1Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M362.6,77.9h-.3c-8-3.5-14.3-9.8-17.6-17.9-3.4-8.1-3.4-17.1,0-25.3,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5s8.6.9,12.6,2.5c16.8,7,24.8,26.3,17.9,43.2-7,16.8-26.3,24.8-43.1,17.9h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M183.1,478.3c4.3,0,8.5.9,12.6,2.5,16.8,7,24.8,26.3,17.9,43.2-3.4,8.2-9.7,14.5-17.9,17.9-8.1,3.4-17.1,3.4-25.3,0-16.8-7-24.8-26.3-17.9-43.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M307.4,28.3c0,15.2-12,27.6-27,28.3h-1.3c-15.6,0-28.3-12.7-28.3-28.3S263.5,0,279.1,0s28.3,12.8,28.3,28.4h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M250.8,530.4c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M192.2,69.2c-5.8,2.4-12.2,2.4-18,0-5.9-2.4-10.4-7-12.8-12.8-5-12.1.7-25.9,12.8-30.9,2.9-1.2,6-1.8,9-1.8,9.3,0,18.1,5.5,21.8,14.6,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M365.9,489.5c3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c5.9,2.4,10.4,7,12.8,12.8,2.4,5.9,2.4,12.3,0,18.1-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.2,2.4-18.1,0-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,2.4-5.8,6.9-10.4,12.8-12.8h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M115.1,88.6c7.2,7.3,7.4,18.9.4,26.4l-.4.4c-7.4,7.4-19.4,7.4-26.7,0-7.4-7.4-7.4-19.4,0-26.8,3.7-3.7,8.5-5.5,13.4-5.5s9.7,1.8,13.4,5.5h0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M442.8,443.5c3.6-3.7,8.5-5.5,13.3-5.5s9.7,1.8,13.4,5.5c3.6,3.5,5.5,8.3,5.5,13.4s-2,9.8-5.5,13.4c-7.4,7.4-19.3,7.4-26.7,0-3.6-3.6-5.5-8.4-5.5-13.4s2-9.8,5.5-13.4h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M38.4,205.1c-12-5-17.8-18.8-12.8-30.9,2.4-5.9,6.9-10.4,12.8-12.8,3-1.2,6-1.8,9.1-1.8s6.1.6,9,1.8c12,5,17.7,18.8,12.8,30.9-2.4,5.9-6.9,10.4-12.8,12.8-5.9,2.4-12.3,2.4-18,0h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M519.8,353.7c5.8,2.4,10.4,6.9,12.8,12.8,2.4,5.9,2.4,12.2,0,18.1-5,12-18.8,17.8-30.8,12.8-5.9-2.4-10.4-6.9-12.8-12.8-2.4-5.9-2.4-12.2,0-18.1,3.8-9.1,12.6-14.6,21.8-14.6s6,.6,9,1.8h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M0,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3S0,295.1,0,279.5Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M501.6,279.5c0-15.6,12.7-28.3,28.3-28.3s28.3,12.7,28.3,28.3-12.7,28.3-28.3,28.3-28.3-12.7-28.3-28.3Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M16.8,388.1c-7-16.9,1-36.2,17.9-43.2,8.1-3.4,17.1-3.4,25.3,0,8.1,3.4,14.5,9.7,17.9,17.9s3.4,17.1,0,25.3c-3.4,8.1-9.7,14.5-17.9,17.9s-17.1,3.4-25.3,0c-8.1-3.4-14.5-9.7-17.9-17.9Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M480.1,195.9c-3.4-8.1-3.4-17.1,0-25.2,3.4-8.1,9.7-14.5,17.9-17.9,4.1-1.7,8.4-2.5,12.6-2.5,13,0,25.3,7.7,30.5,20.4,7,16.9-1,36.2-17.9,43.2-8.1,3.4-17.1,3.4-25.3,0-8.1-3.4-14.5-9.7-17.9-17.9h0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M359.3,359.7c-10.4,10.3-10.4,27.2,0,37.5,10.4,10.4,27.1,10.4,37.5,0,5-5,7.8-11.6,7.8-18.7s-2.8-13.8-7.8-18.7c-5.2-5.2-11.9-7.7-18.7-7.7s-13.6,2.6-18.8,7.7h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M138.3,263.3c-11.2-3-17.8-14.5-14.8-25.7,1.5-5.4,4.9-9.9,9.8-12.8,3.2-1.9,6.8-2.8,10.4-2.8s3.6.2,5.4.7c5.4,1.5,9.9,4.9,12.7,9.8s3.5,10.5,2.1,16c-3,11.2-14.5,17.9-25.7,14.9h0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M408.9,335.9c-5.4-1.5-9.9-4.9-12.7-9.8s-3.5-10.5-2.1-16c1.5-5.4,4.9-10,9.8-12.8,3.2-1.9,6.9-2.8,10.5-2.8s3,.1,4.5.5l1,.3c11.2,3,17.8,14.6,14.8,25.7-1.5,5.4-4.9,10-9.8,12.8-4.9,2.8-10.5,3.6-16,2.1h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M127.6,320c-2.3-8.7,2.5-17.5,10.9-20.4l1-.3c8.9-2.4,18.2,3,20.6,11.9,1.2,4.4.6,8.9-1.7,12.8-2.2,3.9-5.9,6.7-10.2,7.9-4.4,1.2-8.8.6-12.8-1.7-3.9-2.2-6.7-5.9-7.8-10.2h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M405.9,257.8l-.7-.4c-3.5-2.3-6-5.7-7.1-9.8-2.4-9,2.9-18.2,11.9-20.6,8.9-2.4,18.2,2.9,20.6,11.9,2.4,9-2.9,18.2-11.9,20.6-4.3,1.2-8.8.5-12.8-1.7h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M189.4,386.7l-.5.5c-4.9,4.9-13,4.9-17.9,0-4.9-4.9-4.9-12.9,0-17.9s13-4.9,17.9,0c2.4,2.4,3.7,5.6,3.7,9s-1.1,6.1-3.2,8.4Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M386.9,171.2c2.4,2.4,3.7,5.6,3.7,9s-1.3,6.6-3.7,9c-4.9,4.9-13,4.9-17.9,0-2.4-2.4-3.7-5.6-3.7-9s1.3-6.6,3.7-9c2.4-2.4,5.6-3.7,9-3.7s6.6,1.3,9,3.7h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M257.3,406.3c2.2,3.9,2.8,8.4,1.7,12.8-1.2,4.4-3.9,8-7.8,10.2s-8.4,2.8-12.8,1.7c-8.9-2.4-14.3-11.6-11.9-20.6,1.2-4.4,3.9-8,7.8-10.2,3.9-2.2,8.4-2.8,12.8-1.7,4.4,1.2,7.9,4,10.2,7.9h0s0,0,0,0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M300.6,152.5c-2.2-3.9-2.8-8.4-1.7-12.8,1.2-4.4,3.9-8,7.8-10.2,2.6-1.5,5.5-2.2,8.4-2.2s2.9.2,4.4.6c4.4,1.2,8,3.9,10.2,7.9,2.2,3.9,2.8,8.4,1.7,12.8-2.4,9-11.6,14.3-20.6,11.9-4.4-1.2-8-3.9-10.2-7.9h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M325.9,396.6l.9.5c4.4,2.8,7.5,7.1,8.9,12.2,3,11.2-3.6,22.8-14.8,25.7-5.5,1.5-11.1.7-16-2.1-4.9-2.8-8.3-7.3-9.8-12.8-1.5-5.4-.7-11.1,2.1-16,2.8-4.9,7.3-8.3,12.7-9.8,1.8-.5,3.7-.7,5.5-.7,3.6,0,7.2,1,10.5,2.8h0Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M248.2,164.3c-11.2,3-22.7-3.7-25.7-14.9-3-11.2,3.6-22.8,14.8-25.7,1.8-.5,3.6-.7,5.4-.7,9.3,0,17.8,6.2,20.3,15.6,3,11.2-3.6,22.8-14.8,25.7Z"
+        ></path>
+        <path
+          class="cls-1"
+          d="M180,206.5c14.6,0,26.4-11.9,26.4-26.5s-11.8-26.5-26.4-26.5-26.4,11.9-26.4,26.5,11.8,26.5,26.4,26.5Z"
+        ></path>
+      </g>
+    </g>
+  </g>
+</svg>
+
+<style>
+  .cls-1 {
+    fill: var(--logoColour);
+  }
+
+  .cls-1,
+  .cls-2 {
+    stroke-width: 0px;
+  }
+
+  .cls-2 {
+    fill: var(--textColour);
+  }
+</style>
diff --git a/src/components/SEO/SEO.mdx b/src/components/SEO/SEO.mdx
new file mode 100644
index 0000000..e56e7ca
--- /dev/null
+++ b/src/components/SEO/SEO.mdx
@@ -0,0 +1,80 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SEOStories from './SEO.stories.svelte';
+
+<Meta of={SEOStories} />
+
+# SEO
+
+The `SEO` component adds essential metadata to pages.
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+</script>
+
+<SEO
+  baseUrl="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps"
+  pageUrl={new URL(
+    'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/countries/united-kingdom/'
+  )}
+  seoTitle="A title for Google"
+  seoDescription="A description for Google"
+  shareTitle="A title for Twitter/Facebook"
+  shareDescription="A description for Twitter/Facebook"
+  shareImgPath="https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg"
+  shareImgAlt="An image showing global COVID infection rates"
+  publishTime="2020-09-15T00:00:00.000Z"
+  updateTime="2021-01-10T12:30:00.000Z"
+  authors={[
+    { name: 'Jane Doe', link: 'https://www.reuters.com/authors/jane-doe/' },
+    { name: 'John Doe', link: 'https://www.reuters.com/authors/john-doe/' },
+  ]}
+/>
+```
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get many of your text values from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+slug: ROOT-SLUG/WILD
+seoTitle: Page title for search
+seoDescription: Page description for search
+shareTitle: Page title for social media
+shareDescription: Page description for social media
+shareImgPath: images/reuters-graphics.jpg
+shareImgAlt: Alt text for share image.
+```
+
+... which you'll pass to the `SEO` component.
+
+```svelte
+<script>
+  import { SEO } from '@reuters-graphics/graphics-components';
+  import pkg from '$pkg';
+  import content from '$locales/en/content.json';
+  import { assets } from '$app/paths';
+  import { page } from '$app/stores';
+</script>
+
+<SEO
+  baseUrl={VITE_BASE_URL}
+  pageUrl={$page.url}
+  seoTitle={content.seoTitle}
+  seoDescription={content.seoDescription}
+  shareTitle={content.shareTitle}
+  shareDescription={content.shareDescription}
+  shareImgPath={`${assets}/${content.shareImgPath}`}
+  shareImgAlt={content.shareImgAlt}
+  publishTime={pkg?.reuters?.graphic?.published}
+  updateTime={pkg?.reuters?.graphic?.updated}
+  authors={pkg?.reuters?.graphic?.authors}
+/>
+```
+
+> **Note:** For _reasons_, we can't document the value of `VITE_BASE_URL` below. It's `import` + `.meta.env.BASE_URL` (concatenate all that) in the graphics kit and other Vite-based rigs.
+
+<Canvas of={SEOStories.Demo} />
+```
diff --git a/src/components/SEO/SEO.stories.svelte b/src/components/SEO/SEO.stories.svelte
new file mode 100644
index 0000000..dc35435
--- /dev/null
+++ b/src/components/SEO/SEO.stories.svelte
@@ -0,0 +1,23 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SEO from './SEO.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Ads & analytics/SEO',
+    component: SEO,
+  });
+</script>
+
+<div>View page source to see the SEO metadata.</div>
+<Story
+  name="Demo"
+  args={{
+    baseUrl: 'https://www.reuters.com',
+    seoTitle: 'A title for Google',
+    seoDescription: 'A description for Google',
+    shareTitle: 'A title for Twitter/Facebook',
+    shareDescription: 'A description for Twitter/Facebook',
+    shareImgPath:
+      'https://www.reuters.com/graphics/world-coronavirus-tracker-and-maps/assets/images/share.jpg',
+  }}
+/>
diff --git a/src/components/SEO/SEO.svelte b/src/components/SEO/SEO.svelte
new file mode 100644
index 0000000..19bc694
--- /dev/null
+++ b/src/components/SEO/SEO.svelte
@@ -0,0 +1,197 @@
+<!-- @component `SEO` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-ads-analytic-seo--docs) -->
+<script lang="ts">
+  interface GraphicAuthor {
+    name: string;
+    link: string;
+  }
+
+  interface Props {
+    /**
+     * Base url for the page, which in [Vite-based projects](https://vitejs.dev/guide/build.html#public-base-path) is globally available as `import.meta.env.BASE_URL`.
+     */
+    baseUrl: string;
+    /**
+     * [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object for the page.
+     */
+    pageUrl: URL;
+    /**
+     * SEO title
+     */
+    seoTitle: string;
+    /**
+     * SEO description
+     */
+    seoDescription: string;
+    /**
+     * Share title
+     */
+    shareTitle: string;
+    /**
+     * Share description
+     */
+    shareDescription: string;
+    /**
+     * Share image path. **Must be an absolute path.**
+     */
+    shareImgPath: string;
+    /**
+     * Share image alt text, up to 420 characters.
+     */
+    shareImgAlt?: string;
+    /**
+     * Publish time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    publishTime?: string;
+    /**
+     * Updated time as an [ISO string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString)
+     */
+    updateTime?: string;
+    /**
+     * Array of authors for the piece. Each author object must have `name` and `link` attributes.
+     */
+    authors?: GraphicAuthor[];
+  }
+
+  let {
+    baseUrl,
+    pageUrl,
+    seoTitle,
+    seoDescription,
+    shareTitle,
+    shareDescription,
+    shareImgPath,
+    shareImgAlt = '',
+    publishTime = '',
+    updateTime = '',
+    authors = [],
+  }: Props = $props();
+  const getOrigin = (baseUrl: string) => {
+    try {
+      return new URL(baseUrl).origin;
+    } catch {
+      // This handles a weird case where Vite's base path is
+      // reset to './' after the app hydrates...
+      if (typeof window !== 'undefined') return getOrigin(window.location.href);
+      return '';
+    }
+  };
+
+  let origin = $derived(getOrigin(baseUrl));
+  let canonicalUrl = $derived(
+    (origin + (pageUrl?.pathname || '')).replace(/index\.html\/$/, '')
+  );
+
+  const orgLdJson = {
+    '@context': 'http://schema.org',
+    '@type': 'NewsMediaOrganization',
+    '@id': 'https://www.reuters.com/#publisher',
+    name: 'Reuters',
+    logo: {
+      '@type': 'ImageObject',
+      url: 'https://s3.reutersmedia.net/resources_v2/images/reuters_social_logo.png',
+      width: '200',
+      height: '200',
+    },
+    url: 'https://www.reuters.com/',
+  };
+
+  let articleLdJson = $derived({
+    '@context': 'http://schema.org',
+    '@type': 'NewsArticle',
+    headline: seoTitle,
+    url: canonicalUrl,
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': canonicalUrl,
+    },
+    thumbnailUrl: shareImgPath,
+    image: [
+      {
+        '@context': 'http://schema.org',
+        '@type': 'ImageObject',
+        url: shareImgPath,
+      },
+    ],
+    publisher: { '@id': 'https://www.reuters.com/#publisher' },
+    copyrightHolder: { '@id': 'https://www.reuters.com/#publisher' },
+    sourceOrganization: { '@id': 'https://www.reuters.com/#publisher' },
+    copyrightYear: new Date().getFullYear(),
+    dateCreated: publishTime,
+    datePublished: publishTime,
+    dateModified: updateTime,
+    author: authors.map(({ name, link }) => ({
+      '@type': 'Person',
+      name,
+      url: link,
+    })),
+    creator: authors.map(({ name }) => name),
+    articleSection: 'Graphics',
+    isAccessibleForFree: true,
+    keywords: ['Reuters graphics', 'Reuters', 'graphics', 'Interactives'],
+  });
+</script>
+
+<svelte:head>
+  {#key canonicalUrl}
+    <title>{seoTitle}</title>
+    <meta name="description" content={seoDescription} />
+    <link rel="canonical" href={canonicalUrl} />
+    <link
+      rel="icon"
+      type="image/png"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/favicon-96x96.png"
+      sizes="96x96"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/kinesis.svg"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/favicon.ico"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="https://graphics.thomsonreuters.com/style-assets/images/logos/favicon/apple-touch-icon.png"
+    />
+
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:type" content="article" />
+    <meta property="og:title" content={shareTitle} itemprop="name" />
+    <meta
+      property="og:description"
+      content={shareDescription}
+      itemprop="description"
+    />
+    <meta property="og:image" content={shareImgPath} itemprop="image" />
+    <meta property="og:site_name" content="Reuters" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@ReutersGraphics" />
+    <meta name="twitter:creator" content="@ReutersGraphics" />
+    <meta name="twitter:domain" content={origin} />
+    <meta name="twitter:title" content={shareTitle} />
+    <meta name="twitter:description" content={shareDescription} />
+    <meta name="twitter:image" content={shareImgPath} />
+    {#if shareImgAlt}
+      <meta name="twitter:image:alt" content={shareImgAlt} />
+    {/if}
+
+    <meta property="fb:app_id" content="319194411438328" />
+    <meta property="fb:admins" content="616167736" />
+    <meta property="fb:admins" content="625796953" />
+    <meta property="fb:admins" content="571759798" />
+
+    <!-- svelte-ignore hydration_html_changed -->
+    {@html `<${'script'} type="application/ld+json">${JSON.stringify(
+      orgLdJson
+    )}</script>`}
+    <!-- svelte-ignore hydration_html_changed -->
+    {@html `<${'script'} type="application/ld+json">${JSON.stringify(
+      articleLdJson
+    )}</script>`}
+  {/key}
+</svelte:head>
diff --git a/src/components/Scroller/Foreground.svelte b/src/components/Scroller/Foreground.svelte
index e42912f..9115e26 100644
--- a/src/components/Scroller/Foreground.svelte
+++ b/src/components/Scroller/Foreground.svelte
@@ -41,7 +41,7 @@
 {/each}
 
 <style lang="scss">
-  @use './../../scss/mixins' as mixins;
+  @use './mixins' as mixins;
 
   div.step-foreground-container {
     width: initial;
diff --git a/src/components/ScrollerAnimate/Foreground.svelte b/src/components/ScrollerAnimate/Foreground.svelte
index e42912f..9115e26 100644
--- a/src/components/ScrollerAnimate/Foreground.svelte
+++ b/src/components/ScrollerAnimate/Foreground.svelte
@@ -41,7 +41,7 @@
 {/each}
 
 <style lang="scss">
-  @use './../../scss/mixins' as mixins;
+  @use './mixins' as mixins;
 
   div.step-foreground-container {
     width: initial;
diff --git a/src/components/ScrollerBase/demo/DraggableLabel.svelte b/src/components/ScrollerBase/demo/DraggableLabel.svelte
index 34e7cd8..71f5f4c 100644
--- a/src/components/ScrollerBase/demo/DraggableLabel.svelte
+++ b/src/components/ScrollerBase/demo/DraggableLabel.svelte
@@ -60,7 +60,7 @@
 </div>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .label {
     position: fixed;
diff --git a/src/components/ScrollerBase/demo/ScrollerDemo.svelte b/src/components/ScrollerBase/demo/ScrollerDemo.svelte
index 485f685..ab5ae7e 100644
--- a/src/components/ScrollerBase/demo/ScrollerDemo.svelte
+++ b/src/components/ScrollerBase/demo/ScrollerDemo.svelte
@@ -60,7 +60,7 @@
 <DraggableLabel bind:value={bottom} label="bottom" />
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .scroller-demo-container {
     max-width: mixins.$column-width-normal;
diff --git a/src/components/ScrollerSquash/ScrollerSquash.svelte b/src/components/ScrollerSquash/ScrollerSquash.svelte
new file mode 100644
index 0000000..531fb7c
--- /dev/null
+++ b/src/components/ScrollerSquash/ScrollerSquash.svelte
@@ -0,0 +1,143 @@
+<script lang="ts">
+  import ScrollerBase from '../ScrollerBase/ScrollerBase.svelte';
+  import type { ContainerWidth } from '../@types/global';
+
+  type Graphic = {
+    src: string;
+    srcset: string;
+    alt: string;
+    title?: string;
+    description?: string;
+    notes?: string;
+    width?: ContainerWidth;
+  };
+
+  interface Props {
+    graphics: Graphic[];
+    /** Duration of the squash animation in milliseconds. */
+    animationDuration?: number;
+    /** When to swap the image during the animation (0–1). E.g. 0.8 = swap at 80% through. */
+    animationSwap?: number;
+    /**
+     * Raw CSS string injected into the document head for this component instance.
+     * Use the `.graphic` selector to target the image element.
+     * Define any required @keyframes here too.
+     *
+     * @example
+     * graphicCss="@keyframes bounce { to { translate: 0 -20px; } } .graphic { animation: bounce 0.5s ease alternate infinite; }"
+     */
+    graphicCss?: string;
+  }
+
+  let {
+    graphics,
+    animationDuration = 350,
+    animationSwap = 0.8,
+    graphicCss,
+  }: Props = $props();
+
+  let count = $state(1);
+  let index = $state(0);
+  let offset = $state(0);
+  let progress = $state(0);
+
+  let displayedIndex = $state(0);
+  let imgEl = $state<HTMLImageElement | null>(null);
+
+  // Inject graphicCss into the document head as a real style element.
+  $effect(() => {
+    if (!graphicCss) return;
+    const style = document.createElement('style');
+    style.textContent = graphicCss;
+    document.head.appendChild(style);
+    return () => style.remove();
+  });
+
+  // On index change: reset the CSS animation, then swap the graphic at the
+  // configured point through the animation (animationSwap).
+  $effect(() => {
+    const newIndex = index; // track reactive dependency
+    if (!imgEl) return;
+
+    imgEl.style.animation = 'none';
+    imgEl.offsetHeight; // force reflow to restart the animation
+    imgEl.style.animation = '';
+
+    const timeout = setTimeout(() => {
+      displayedIndex = newIndex;
+    }, animationDuration * animationSwap);
+
+    return () => clearTimeout(timeout);
+  });
+</script>
+
+<div class="photo-scroller">
+  <ScrollerBase
+    bind:count
+    bind:index
+    bind:offset
+    bind:progress
+    query="div.step-foreground-container"
+  >
+    {#snippet backgroundSnippet()}
+      <img
+        bind:this={imgEl}
+        class="graphic"
+        style="--animation-time: {animationDuration}ms"
+        src={graphics[displayedIndex].src}
+        srcset={graphics[displayedIndex].srcset}
+        sizes="(min-width: 690px) 660px, calc(100vw - 30px)"
+        alt={graphics[displayedIndex].alt}
+      />
+    {/snippet}
+
+    {#snippet foregroundSnippet()}
+      {#each graphics as graphic}
+        <div class="step-foreground-container">
+          {#if graphic.title}<h2>{graphic.title}</h2>{/if}
+          {#if graphic.description}<p>{graphic.description}</p>{/if}
+          {#if graphic.notes}<aside>{graphic.notes}</aside>{/if}
+        </div>
+      {/each}
+    {/snippet}
+  </ScrollerBase>
+</div>
+
+<style lang="scss">
+  .graphic {
+    display: block;
+    object-fit: contain;
+    transform-origin: bottom center;
+    animation: squash var(--animation-time) linear(0, 0.417 25.5%, 0.867 49.4%, 1 57.7%, 0.925 65.1%, 0.908 68.6%, 0.902 72.2%, 0.916 78.2%, 0.988 92.1%, 1) forwards;
+  }
+
+  @keyframes squash {
+    0% {
+      scale: 1;
+      translate: 0;
+    }
+
+    50% {
+      scale: 0.8 1.2;
+      translate: 0 -8px;
+    }
+
+    80% {
+      scale: 1.4 0.6;
+      translate: 0 -16px;
+    }
+
+    100% {
+      scale: 1;
+      translate: 0;
+    }
+  }
+
+  .step-foreground-container {
+    height: 50vh;
+    padding: 1em;
+    margin: 0 0 2em 0;
+    max-width: var(--normal-column-width, 660px);
+    position: relative;
+  }
+</style>
diff --git a/src/components/ScrollerVideo/ScrollerVideoForeground.svelte b/src/components/ScrollerVideo/ScrollerVideoForeground.svelte
index 545432f..bfa6a88 100644
--- a/src/components/ScrollerVideo/ScrollerVideoForeground.svelte
+++ b/src/components/ScrollerVideo/ScrollerVideoForeground.svelte
@@ -79,7 +79,7 @@
 </Block>
 
 <style lang="scss">
-  @use './../../scss/mixins' as mixins;
+  @use './mixins' as mixins;
 
   .scroller-foreground {
     width: 100%;
diff --git a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte b/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
index 6404978..b467b88 100644
--- a/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
+++ b/src/components/ScrollerVideo/demo/AdvancedUsecases.svelte
@@ -61,7 +61,7 @@
 </ScrollerBase>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .step-foreground-container {
     height: 100lvh;
diff --git a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
index 9912fa7..834818e 100644
--- a/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
+++ b/src/components/ScrollerVideo/demo/WithScrollerBase.svelte
@@ -33,7 +33,7 @@
 </ScrollerBase>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .step-foreground-container {
     height: 100lvh;
diff --git a/src/components/SearchInput/SearchInput.mdx b/src/components/SearchInput/SearchInput.mdx
new file mode 100644
index 0000000..6c347cd
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.mdx
@@ -0,0 +1,29 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SearchInputStories from './SearchInput.stories.svelte';
+
+<Meta of={SearchInputStories} />
+
+# SearchInput
+
+The `SearchInput` component creates a search bar.
+
+```svelte
+<script>
+  import { SearchInput } from '@reuters-graphics/graphics-components';
+
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, 
+    filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
+
+<SearchInput onsearch={handleSearchInput} />
+```
+
+<Canvas of={SearchInputStories.Demo} />
diff --git a/src/components/SearchInput/SearchInput.stories.svelte b/src/components/SearchInput/SearchInput.stories.svelte
new file mode 100644
index 0000000..ae596d5
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.stories.svelte
@@ -0,0 +1,24 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SearchInput from './SearchInput.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Controls/SearchInput',
+    component: SearchInput,
+  });
+</script>
+
+<script lang="ts">
+  function filterData(newSearchText: string) {
+    /** This function would typically filter a dataset based on the search input.*/
+    console.log('Filtering data with:', newSearchText);
+  }
+  function handleSearchInput(newSearchText: string) {
+    /** Here's where you might update a variable, filter a dataset or make an API call based on the user's input.*/
+    filterData(newSearchText);
+  }
+</script>
+
+<Story name="Demo">
+  <SearchInput onsearch={handleSearchInput} />
+</Story>
diff --git a/src/components/SearchInput/SearchInput.svelte b/src/components/SearchInput/SearchInput.svelte
new file mode 100644
index 0000000..899066a
--- /dev/null
+++ b/src/components/SearchInput/SearchInput.svelte
@@ -0,0 +1,85 @@
+<!-- @component `SearchInput` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-controls-searchinput--docs) -->
+<script lang="ts">
+  import MagnifyingGlass from './components/MagnifyingGlass.svelte';
+  import X from './components/X.svelte';
+
+  interface Props {
+    /** The placeholder text that appears in the search box.*/
+    searchPlaceholder?: string;
+    /** Optional function that runs when the input value changes. */
+    onsearch?: (newValue: string) => void;
+  }
+
+  let { searchPlaceholder = 'Search...', onsearch }: Props = $props();
+
+  let value = $state('');
+  let active = $derived(value !== '');
+
+  function clear() {
+    value = '';
+    if (onsearch) onsearch(value); // Call the prop to update the parent when cleared
+  }
+
+  function oninput(event: Event) {
+    value = (event.target as HTMLInputElement).value;
+    if (onsearch) onsearch(value); // Update the parent on every input change
+  }
+</script>
+
+<div class="search relative inline-flex items-center" class:active>
+  <div class="search--icon absolute">
+    <MagnifyingGlass />
+  </div>
+
+  <input
+    id="search--input"
+    class="search--input body-caption pl-8"
+    type="text"
+    placeholder={searchPlaceholder}
+    bind:value
+    {oninput}
+  />
+  <div
+    class="search--x absolute"
+    role="button"
+    tabindex="0"
+    class:invisible={!active}
+    onclick={clear}
+    onkeyup={clear}
+  >
+    <X />
+  </div>
+</div>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  .search {
+    width: 250px;
+    .search--icon {
+      inset-inline-start: 0.5rem;
+      inset-block-start: 0.55rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: mixins.$theme-colour-brand-rules;
+    }
+    .search--input {
+      height: 2.15rem;
+      border: 1px solid mixins.$theme-colour-brand-rules;
+      background: transparent;
+      border-radius: 0.25rem;
+      width: 100%;
+    }
+    .search--x {
+      inset-inline-end: 0;
+      inset-block-start: 0.55rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      fill: mixins.$theme-colour-text-primary;
+      cursor: pointer;
+      &.invisible {
+        display: none;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SearchInput/components/MagnifyingGlass.svelte b/src/components/SearchInput/components/MagnifyingGlass.svelte
new file mode 100644
index 0000000..a799801
--- /dev/null
+++ b/src/components/SearchInput/components/MagnifyingGlass.svelte
@@ -0,0 +1,21 @@
+<svg
+  width="18"
+  height="18"
+  viewBox="0 0 18 18"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M3.41069 12.0711C2.83695 11.5053 2.38137 10.8311 2.07042 10.0878C1.75947 9.3444 1.59934 8.54666 1.59934 7.74088C1.59934 6.9351 1.75947 6.13735 2.07042 5.39399C2.38137 4.65063 2.83695 3.97647 3.41069 3.41069C3.97647 2.83695 4.65063 2.38137 5.39399 2.07042C6.13735 1.75947 6.9351 1.59934 7.74088 1.59934C8.54666 1.59934 9.3444 1.75947 10.0878 2.07042C10.8311 2.38137 11.5053 2.83695 12.0711 3.41069C12.6448 3.97647 13.1004 4.65063 13.4113 5.39399C13.7223 6.13735 13.8824 6.9351 13.8824 7.74088C13.8824 8.54666 13.7223 9.3444 13.4113 10.0878C13.1004 10.8311 12.6448 11.5053 12.0711 12.0711C11.5053 12.6448 10.8311 13.1004 10.0878 13.4113C9.3444 13.7223 8.54666 13.8824 7.74088 13.8824C6.9351 13.8824 6.13735 13.7223 5.39399 13.4113C4.65063 13.1004 3.97647 12.6448 3.41069 12.0711ZM17.8254 16.6899L13.7454 12.6099C14.9941 11.0703 15.6041 9.11021 15.4497 7.13395C15.2953 5.1577 14.3882 3.3161 12.9156 1.98914C11.4429 0.662179 9.51715 -0.0489011 7.53554 0.00261584C5.55393 0.0541328 3.66769 0.864316 2.266 2.266C0.864316 3.66769 0.0541328 5.55393 0.00261584 7.53554C-0.0489011 9.51715 0.662179 11.4429 1.98914 12.9156C3.3161 14.3882 5.1577 15.2953 7.13395 15.4497C9.11021 15.6041 11.0703 14.9941 12.6099 13.7454L16.6899 17.8254C16.8453 17.9485 17.0405 18.0101 17.2384 17.9986C17.4363 17.9872 17.6231 17.9034 17.7633 17.7633C17.9034 17.6231 17.9872 17.4363 17.9986 17.2384C18.0101 17.0405 17.9485 16.8453 17.8254 16.6899Z"
+  ></path>
+</svg>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+  svg {
+    vertical-align: middle;
+    path {
+      fill: mixins.$theme-colour-brand-rules;
+    }
+  }
+</style>
diff --git a/src/components/SearchInput/components/X.svelte b/src/components/SearchInput/components/X.svelte
new file mode 100644
index 0000000..2e3d7d1
--- /dev/null
+++ b/src/components/SearchInput/components/X.svelte
@@ -0,0 +1,33 @@
+<svg
+  width="14"
+  height="14"
+  viewBox="0 0 14 14"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_25_237)">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M0.300421 0.292131C0.392053 0.199685 0.50109 0.126304 0.621235 0.0762269C0.741381 0.0261493 0.870256 0.000366211 1.00042 0.000366211C1.13059 0.000366211 1.25946 0.0261493 1.37961 0.0762269C1.49975 0.126304 1.60879 0.199685 1.70042 0.292131L7.00082 5.45346L12.3012 0.292131C12.3929 0.199685 12.5019 0.126304 12.622 0.0762269C12.7422 0.0261493 12.8711 0.000366211 13.0012 0.000366211C13.1314 0.000366211 13.2603 0.0261493 13.3804 0.0762269C13.5006 0.126304 13.6096 0.199685 13.7012 0.292131C13.7954 0.378994 13.8706 0.48445 13.922 0.601837C13.9734 0.719225 13.9999 0.845993 13.9998 0.974136C13.9997 1.10228 13.973 1.22901 13.9215 1.34633C13.8699 1.46364 13.7946 1.569 13.7003 1.65573L8.21229 6.99906L13.7003 12.3443C14.0708 12.7064 14.0979 13.2365 13.7796 13.622L13.6994 13.7079C13.6077 13.8003 13.4987 13.8737 13.3785 13.9238C13.2584 13.9738 13.1295 13.9996 12.9994 13.9996C12.8692 13.9996 12.7403 13.9738 12.6202 13.9238C12.5 13.8737 12.391 13.8003 12.2994 13.7079L6.99895 8.54653L1.69855 13.7079C1.60692 13.8003 1.49789 13.8737 1.37774 13.9238C1.25759 13.9738 1.12872 13.9996 0.998554 13.9996C0.86839 13.9996 0.739515 13.9738 0.619369 13.9238C0.499223 13.8737 0.390186 13.8003 0.298554 13.7079C0.204346 13.621 0.129174 13.5155 0.0777863 13.3982C0.0263988 13.2808 -8.74916e-05 13.154 2.17122e-07 13.0259C8.79258e-05 12.8977 0.0267478 12.771 0.0782959 12.6537C0.129844 12.5364 0.20516 12.431 0.299488 12.3443L5.78655 7L0.300421 1.65573C-0.0710458 1.2936 -0.0981124 0.763464 0.220154 0.377998L0.300421 0.292131Z"
+    ></path>
+  </g>
+  <defs>
+    <clipPath id="clip0_25_237">
+      <rect width="14" height="14"></rect>
+    </clipPath>
+  </defs>
+</svg>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+  svg {
+    vertical-align: middle;
+    path {
+      fill: mixins.$theme-colour-brand-rules;
+    }
+    rect {
+      fill: mixins.$theme-colour-background;
+    }
+  }
+</style>
diff --git a/src/components/SimpleTimeline/SimpleTimeline.mdx b/src/components/SimpleTimeline/SimpleTimeline.mdx
new file mode 100644
index 0000000..7eb4c72
--- /dev/null
+++ b/src/components/SimpleTimeline/SimpleTimeline.mdx
@@ -0,0 +1,121 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SimpleTimelineStories from './SimpleTimeline.stories.svelte';
+
+<Meta of={SimpleTimelineStories} />
+
+# SimpleTimeline
+
+The `SimpleTimeline` component creates a basic timeline with dates, titles and descriptions of events.
+
+```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} />
+```
+
+<Canvas of={SimpleTimelineStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc.
+
+```yaml
+# Archie ML doc
+
+type: timeline
+# Optional
+class: timeline
+id: timeline-1
+symbolColour: var(--theme-colour-brand-rules, grey)
+dateColour: var(--theme-colour-accent, red)
+[.dates]
+    # date object with events
+    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.
+    titleLink: https://www.reuters.com/world/us-house-vote-40-billion-ukraine-aid-package-tuesday-pelosi-2022-05-10/
+    []
+
+# More dates and events...
+[]
+```
+
+... which you'll pass to the `SimpleTimeline` component.
+
+```svelte
+<!-- Graphics kit -->
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<SimpleTimeline
+  dates={block.dates}
+  class={block.class}
+  symbolColour={block.symbolColour}
+  id={block.id}
+  dateColour={block.dateColour}
+/>
+```
+
+<Canvas of={SimpleTimelineStories.Demo} />
+
+# Multiple events
+
+You can add multiple events to a single date by adding objects to the `events` array.
+
+```svelte
+<script>
+  import { SimpleTimeline } from '@reuters-graphics/graphics-components';
+
+  const dates = [
+    {
+      date: 'Feb. 25',
+      // Multiple events for this date
+      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>
+
+<SimpleTimeline {dates} />
+```
+
+<Canvas of={SimpleTimelineStories.MultipleEvents} />
diff --git a/src/components/SimpleTimeline/SimpleTimeline.stories.svelte b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
new file mode 100644
index 0000000..bcf8d85
--- /dev/null
+++ b/src/components/SimpleTimeline/SimpleTimeline.stories.svelte
@@ -0,0 +1,95 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SimpleTimeline from './SimpleTimeline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/SimpleTimeline',
+    component: SimpleTimeline,
+    argTypes: {
+      symbolColour: { control: 'color' },
+      dateColour: { control: 'color' },
+    },
+  });
+</script>
+
+<script lang="ts">
+  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.',
+        },
+      ],
+    },
+  ];
+
+  const datesMultipleEvents = [
+    {
+      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>
+
+<Story
+  name="Demo"
+  args={{
+    dates,
+  }}
+/>
+
+<Story
+  name="Multiple events"
+  exportName="MultipleEvents"
+  tags={['!autodocs', '!dev']}
+  args={{
+    dates: datesMultipleEvents,
+  }}
+/>
diff --git a/src/components/SimpleTimeline/SimpleTimeline.svelte b/src/components/SimpleTimeline/SimpleTimeline.svelte
new file mode 100644
index 0000000..7a89807
--- /dev/null
+++ b/src/components/SimpleTimeline/SimpleTimeline.svelte
@@ -0,0 +1,135 @@
+<!-- @component `SimpleTimeline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-simpletimeline--docs) -->
+<script lang="ts">
+  import Fa from 'svelte-fa';
+  import { faLink } from '@fortawesome/free-solid-svg-icons';
+  import Block from '../Block/Block.svelte';
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  interface Event {
+    title: string;
+    titleLink?: string;
+    context?: string;
+  }
+  interface EventDate {
+    date: string;
+    events: Event[];
+  }
+
+  interface Props {
+    /**
+     * An array of dates with events.
+     */
+    dates: EventDate[];
+    /**
+     * Set a colour for the timeline bullet symbols and line.
+     */
+    symbolColour?: string;
+    /**
+     * Set a colour for the date headings in the timeline.
+     */
+    dateColour?: string;
+    /**
+     * Set a class to target with SCSS.
+     */
+    class?: string;
+    /**
+     * Set an ID to target with SCSS.
+     */
+    id?: string;
+  }
+
+  let {
+    dates,
+    symbolColour = 'var(--theme-colour-brand-rules)',
+    dateColour = 'var(--theme-colour-accent, red)',
+    class: cls = '',
+    id = '',
+  }: Props = $props();
+</script>
+
+<Block width="normal" {id} class="simple-timeline-container fmy-6 {cls}">
+  <div class="timeline pl-2 pr-3.5" style="--symbol-colour:{symbolColour};">
+    {#each dates as date}
+      <div class="date relative pt-0.5 pl-5 pb-4">
+        <svg class="absolute bg" height="25" width="20">
+          <circle
+            cx="10"
+            cy="12"
+            r="5"
+            stroke={symbolColour}
+            stroke-width="2"
+            fill="transparent"
+          ></circle>
+        </svg>
+        <div
+          class="timeline-date font-note text-xs uppercase font-black tracking-wide fmb-0"
+          style:color={dateColour}
+        >
+          {date.date}
+        </div>
+        {#each date.events as event}
+          <div class="event pb-2">
+            {#if event.titleLink}
+              <a href={event.titleLink} target="_blank">
+                <div class="title h3">
+                  {event.title}
+                  <span class="text-sm"><Fa fw icon={faLink} /></span>
+                </div>
+              </a>
+            {:else}
+              <div class="title h3">
+                {event.title}
+              </div>
+            {/if}
+            {#if event.context}
+              <Markdown source={event.context} />
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/each}
+  </div>
+</Block>
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+  .timeline {
+    .date {
+      border-inline-start: 1px solid var(--symbol-colour);
+      &:last-child {
+        border-inline-start: 1px solid mixins.$theme-colour-background;
+        @include mixins.fpb-0;
+      }
+    }
+    svg {
+      inset-block-start: -1px;
+      inset-inline-start: -10px;
+    }
+    div.title {
+      @include mixins.fmt-2;
+      @include mixins.fmb-1;
+      @include mixins.font-medium;
+    }
+
+    div.event {
+      a {
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      a div.title {
+        span {
+          opacity: 0.5;
+        }
+        &:hover span {
+          opacity: 0.8;
+        }
+      }
+      :global(p) {
+        @include mixins.body-note;
+        @include mixins.font-light;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteFooter/CompanyLinks.svelte b/src/components/SiteFooter/CompanyLinks.svelte
new file mode 100644
index 0000000..3157a6b
--- /dev/null
+++ b/src/components/SiteFooter/CompanyLinks.svelte
@@ -0,0 +1,177 @@
+<script lang="ts">
+  import Twitter from './svgs/Twitter.svelte';
+  import YouTube from './svgs/YouTube.svelte';
+  import Facebook from './svgs/Facebook.svelte';
+  import Instagram from './svgs/Instagram.svelte';
+  import LinkedIn from './svgs/LinkedIn.svelte';
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  const symbols = {
+    twitter: Twitter,
+    facebook: Facebook,
+    instagram: Instagram,
+    youtube: YouTube,
+    linkedin: LinkedIn,
+  };
+
+  interface Props {
+    links: {
+      company_description?: string;
+      social_links?: {
+        type: string;
+        url: string;
+      }[];
+    };
+  }
+
+  let { links = {} }: Props = $props();
+
+  const normaliseSocialName = (name: string) => {
+    if (name === 'twitter') return 'X';
+    return name;
+  };
+</script>
+
+{#if links.social_links}
+  <section class="company">
+    <div class="content-container">
+      <article class="company-info">
+        <h2>Information you can trust</h2>
+        <p>{links.company_description}</p>
+      </article>
+      <div class="social">
+        <h2>Follow Us</h2>
+        <div>
+          <ul class="links">
+            {#each links.social_links as link}
+              {@const SvelteComponent =
+                symbols[link.type as keyof typeof symbols]}
+              <li class="social-links symbol">
+                <a
+                  href={normalizeUrl(link.url)}
+                  aria-label="Visit Reuters on {normaliseSocialName(link.type)}"
+                >
+                  <div class="button">
+                    <div class="social">
+                      <SvelteComponent />
+                    </div>
+                  </div>
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+{/if}
+
+<style lang="scss">
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
+
+  @use 'mixins' as *;
+  .content-container {
+    width: 100%;
+    margin: 0 auto;
+    @include breakpoints.max-width;
+  }
+
+  .company {
+    padding-block-start: 24px;
+    padding-block-end: 24px;
+    box-sizing: border-box;
+
+    .content-container {
+      @include grids.responsive-columns(12);
+    }
+  }
+
+  .company {
+    border-top: 1px solid var(--nav-rules);
+
+    .content-container {
+      box-sizing: border-box;
+      @include grids.spacing-single(padding-inline-start padding-inline-end);
+    }
+  }
+  .company .content-container {
+    grid-row-gap: 24px;
+
+    .company-info {
+      grid-column: 1 / span 5;
+    }
+
+    .social {
+      grid-column: 7 / span 5;
+    }
+
+    @include grids.at-4-columns {
+      .company-info,
+      .social {
+        grid-column: 1 / span 4;
+        grid-row: auto;
+      }
+    }
+  }
+
+  .links {
+    padding: 0;
+    margin: 0;
+
+    .symbol {
+      .button {
+        border-radius: 8px;
+        border: 1px solid var(--nav-rules);
+        background: var(--nav-background, #fff);
+        color: var(--nav-primary, #666);
+
+        &:hover {
+          border: 1px solid var(--nav-primary);
+        }
+      }
+    }
+
+    .social {
+      width: 40px;
+      height: 40px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: inherit;
+    }
+  }
+
+  .symbol {
+    list-style: none;
+    display: inline-block;
+    vertical-align: middle;
+    margin-inline-start: 16px;
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+  }
+
+  section.company {
+    max-width: 100%;
+    h2 {
+      margin-block-end: 12px;
+      line-height: 1.333;
+      font-size: 16px;
+      color: var(--nav-primary);
+      font-weight: 400;
+      -webkit-font-smoothing: antialiased;
+      @media (min-width: 1300px) {
+        font-size: 18px;
+      }
+    }
+    p {
+      @include font-sans;
+      line-height: 1.43;
+      font-size: 14px;
+      color: var(--nav-primary);
+      font-weight: 400;
+    }
+  }
+</style>
diff --git a/src/components/SiteFooter/LegalLinks.svelte b/src/components/SiteFooter/LegalLinks.svelte
new file mode 100644
index 0000000..df4fd7f
--- /dev/null
+++ b/src/components/SiteFooter/LegalLinks.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  interface Props {
+    links: {
+      ad_links?: {
+        url: string;
+        text: string;
+      }[];
+      misc_links: {
+        self?: boolean;
+        url: string;
+        text: string;
+      }[];
+      disclaimer_link?: string;
+      copyright_year: string;
+      copyright_link: string;
+    };
+  }
+
+  let { links }: Props = $props();
+</script>
+
+{#if links.ad_links}
+  <section class="legal">
+    <div class="content-container">
+      <section class="ad-links">
+        <ul class="link-group">
+          {#each links.ad_links as link}
+            <li>
+              <a href={normalizeUrl(link.url)}>
+                {link.text}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      <p class="disclaimer">
+        All quotes delayed a minimum of 15 minutes. <a
+          href={normalizeUrl(links.disclaimer_link || '')}
+          >See here for a complete list of exchanges and delays</a
+        >.
+      </p>
+      <section class="misc-links">
+        <ul class="link-group">
+          {#each links.misc_links.filter((d) => !d.self) as link}
+            <li>
+              <a href={normalizeUrl(link.url)}>
+                {link.text}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      <p class="copyright">
+        © {new Date().getFullYear()} Reuters.
+        <a href={normalizeUrl(links.copyright_link)}>All rights reserved.</a>
+      </p>
+    </div>
+  </section>
+{/if}
+
+<style lang="scss">
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
+
+  @use 'mixins' as *;
+
+  .content-container {
+    width: 100%;
+    margin: 0 auto;
+    @include breakpoints.max-width;
+  }
+
+  .legal {
+    padding-block-start: 24px;
+    padding-block-end: 24px;
+    box-sizing: border-box;
+
+    .content-container {
+      @include grids.responsive-columns(12);
+    }
+  }
+
+  .legal {
+    border-top: 1px solid var(--nav-rules);
+
+    .content-container {
+      box-sizing: border-box;
+      @include grids.spacing-single(padding-inline-start padding-inline-end);
+    }
+  }
+
+  .legal .content-container {
+    @include grids.spacing-50(grid-row-gap);
+
+    .ad-links {
+      grid-column: 1 / span 5;
+      grid-row: 1;
+    }
+
+    .misc-links {
+      grid-column: 5 / span 8;
+      grid-row: 1;
+      justify-self: end;
+    }
+
+    .disclaimer {
+      grid-column: 1 / span 7;
+      grid-row: 2;
+    }
+
+    .copyright {
+      grid-column: 8 / span 5;
+      grid-row: 2;
+      justify-self: end;
+    }
+
+    @include grids.at-4-columns {
+      @include grids.spacing-single(grid-row-gap);
+
+      .ad-links,
+      .misc-links,
+      .disclaimer,
+      .copyright {
+        grid-column: 1 / span 4;
+        justify-self: start;
+      }
+
+      .ad-links {
+        grid-row: 1;
+      }
+
+      .disclaimer {
+        grid-row: 2;
+      }
+
+      .misc-links {
+        grid-row: 3;
+      }
+
+      .copyright {
+        grid-row: 4;
+      }
+    }
+  }
+
+  .link-group {
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-flex;
+      margin-inline-end: 16px;
+      list-style: none;
+      align-items: center;
+      a {
+        @include font-sans;
+        color: var(--nav-primary);
+        font-size: 14px;
+        font-weight: 500;
+      }
+    }
+  }
+
+  section {
+    max-width: 100%;
+    margin: 0;
+  }
+
+  p.copyright,
+  p.disclaimer {
+    margin: 0;
+    @include font-sans;
+    font-size: 14px;
+    color: var(--nav-primary);
+    a {
+      color: inherit;
+    }
+  }
+</style>
diff --git a/src/components/SiteFooter/QuickLinks.svelte b/src/components/SiteFooter/QuickLinks.svelte
new file mode 100644
index 0000000..caac9ed
--- /dev/null
+++ b/src/components/SiteFooter/QuickLinks.svelte
@@ -0,0 +1,265 @@
+<script lang="ts">
+  import { normalizeUrl } from '../SiteHeader/NavBar/utils';
+
+  import Graphics from './svgs/Graphics.svelte';
+  import Pictures from './svgs/Pictures.svelte';
+  import Videos from './svgs/Videos.svelte';
+
+  const symbols = {
+    graphics: Graphics,
+    pictures: Pictures,
+    videos: Videos,
+  };
+
+  interface Props {
+    links: {
+      latest_links: {
+        url: string;
+        text: string;
+      }[];
+      media_links: {
+        symbol: string;
+        url: string;
+        text: string;
+      }[];
+      browse_links: {
+        url: string;
+        text: string;
+      }[];
+      about_links: {
+        url: string;
+        text: string;
+      }[];
+      stay_informed_links: {
+        url: string;
+        text: string;
+      }[];
+    };
+  }
+
+  let { links }: Props = $props();
+
+  let windowWidth = $state(1200);
+  const mobileBreakpoint = 745;
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+{#if links.latest_links}
+  <section class="quick-links">
+    <h2 class="visually-hidden">Site Index</h2>
+    <div class="content-container">
+      {#if windowWidth < mobileBreakpoint}
+        <div class="latest-and-media">
+          <section class="link-group">
+            <h3>Latest</h3>
+            <ul>
+              {#each links.latest_links as link}
+                <li>
+                  <a href={normalizeUrl(link.url)}>{link.text}</a>
+                </li>
+              {/each}
+            </ul>
+          </section>
+          <section class="link-group media">
+            <h3>Media</h3>
+            <ul>
+              {#each links.media_links as link}
+                {@const SvelteComponent =
+                  symbols[link.symbol as keyof typeof symbols]}
+                <li>
+                  <div class="symbol">
+                    <SvelteComponent />
+                  </div>
+                  <a href={normalizeUrl(link.url)}>
+                    {link.text}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          </section>
+        </div>
+      {:else}
+        <section class="link-group">
+          <h3>Latest</h3>
+          <ul>
+            {#each links.latest_links as link}
+              <li>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+
+      <section class="link-group">
+        <h3>Browse</h3>
+        <ul>
+          {#each links.browse_links as link}
+            <li>
+              <a href={normalizeUrl(link.url)}>{link.text}</a>
+            </li>
+          {/each}
+        </ul>
+      </section>
+      {#if windowWidth >= mobileBreakpoint}
+        <section class="link-group media">
+          <h3>Media</h3>
+          <ul>
+            {#each links.media_links as link}
+              {@const SvelteComponent_1 =
+                symbols[link.symbol as keyof typeof symbols]}
+              <li>
+                <div class="symbol">
+                  <SvelteComponent_1 />
+                </div>
+                <a href={normalizeUrl(link.url)}>
+                  {link.text}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      {/if}
+      <div class="about-and-stay-informed">
+        <section class="about">
+          <h3>About Reuters</h3>
+          <ul>
+            {#each links.about_links as link}
+              <li>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+        <section class="stay-informed">
+          <h3>Stay Informed</h3>
+          <ul>
+            {#each links.stay_informed_links as link}
+              <li>
+                <a href={normalizeUrl(link.url)}>{link.text}</a>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      </div>
+    </div>
+  </section>
+{/if}
+
+<style lang="scss">
+  @use '../SiteHeader/scss/_breakpoints.scss' as breakpoints;
+  @use '../SiteHeader/scss/_grids.scss' as grids;
+
+  @use 'mixins' as *;
+
+  .content-container {
+    width: 100%;
+    margin: 0 auto;
+    @include breakpoints.max-width;
+  }
+
+  .quick-links {
+    padding-block-start: 24px;
+    padding-block-end: 24px;
+    box-sizing: border-box;
+
+    .content-container {
+      @include grids.responsive-columns(12);
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+
+      li {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        margin: 8px 0;
+        @include font-sans;
+        a {
+          color: var(--nav-primary);
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+    }
+  }
+
+  section.quick-links {
+    border-top: 1px solid var(--nav-rules);
+    max-width: 100%;
+
+    .content-container {
+      box-sizing: border-box;
+      @include grids.spacing-single(padding-inline-start padding-inline-end);
+    }
+
+    h3 {
+      color: var(--nav-primary);
+      font-size: 16px;
+      font-weight: 400;
+      margin: 0;
+    }
+  }
+
+  .quick-links .content-container {
+    @include grids.spacing-single(grid-row-gap);
+
+    section.link-group {
+      grid-column: auto / span 2;
+      margin: 0;
+
+      @include grids.above-4-columns {
+        &:last-child {
+          grid-column: 10 / span 3;
+        }
+      }
+    }
+
+    .latest-and-media {
+      grid-column: 1 / span 2;
+      grid-row: 1;
+
+      .media {
+        margin-block-start: 24px;
+      }
+    }
+
+    .about-and-stay-informed {
+      grid-column: 7 / span 3;
+      grid-row: 1;
+
+      @include breakpoints.for-tablet-down {
+        grid-column: 9 / span 3;
+      }
+
+      @include breakpoints.for-mobile {
+        grid-column: 1 / span 2;
+        grid-row: 2;
+      }
+    }
+
+    .stay-informed {
+      margin-block-start: 24px;
+    }
+  }
+
+  .symbol {
+    width: 20px;
+    margin-inline-end: 16px;
+  }
+
+  .visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/components/SiteFooter/SiteFooter.mdx b/src/components/SiteFooter/SiteFooter.mdx
new file mode 100644
index 0000000..fb724d8
--- /dev/null
+++ b/src/components/SiteFooter/SiteFooter.mdx
@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/blocks';
+
+import * as SiteFooterStories from './SiteFooter.stories.svelte';
+
+<Meta of={SiteFooterStories} />
+
+# SiteFooter
+
+Reuters dotcom site footer with graphics referrals, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-footer).
+
+> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteFooter } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteFooter />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-sitefooter--customised-theme))
+
+```svelte
+<script>
+  import { SiteFooter, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteFooter />
+</Theme>
+```
+
+## Removing referrals
+
+Remove graphics referrals. ([Demo](?path=/story/components-page-furniture-sitefooter--remove-referrals))
+
+```svelte
+<script>
+  import { SiteFooter } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteFooter includeReferrals={false} />
+```
diff --git a/src/components/SiteFooter/SiteFooter.stories.svelte b/src/components/SiteFooter/SiteFooter.stories.svelte
new file mode 100644
index 0000000..d05461a
--- /dev/null
+++ b/src/components/SiteFooter/SiteFooter.stories.svelte
@@ -0,0 +1,29 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SiteFooter from './SiteFooter.svelte';
+  import Theme from '../Theme/Theme.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/SiteFooter',
+    component: SiteFooter,
+  });
+</script>
+
+<Story name="Demo" />
+
+<Story name="Customised theme">
+  <div>
+    <Theme base="dark">
+      <SiteFooter />
+    </Theme>
+  </div>
+</Story>
+
+<Story name="Remove referrals" args={{ includeReferrals: false }} />
+
+<style>
+  div {
+    width: calc(100% + 30px);
+    margin-inline-start: -15px;
+  }
+</style>
diff --git a/src/components/SiteFooter/SiteFooter.svelte b/src/components/SiteFooter/SiteFooter.svelte
new file mode 100644
index 0000000..ece8bd1
--- /dev/null
+++ b/src/components/SiteFooter/SiteFooter.svelte
@@ -0,0 +1,85 @@
+<!-- @component `SiteFooter` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-sitefooter--docs) -->
+<script lang="ts">
+  import QuickLinks from './QuickLinks.svelte';
+  import CompanyLinks from './CompanyLinks.svelte';
+  import LegalLinks from './LegalLinks.svelte';
+  import ReferralBlock from '../ReferralBlock/ReferralBlock.svelte';
+  import PaddingReset from '../PaddingReset/PaddingReset.svelte';
+
+  import starterData from './data.json';
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /**
+     * Set to `false` to remove graphics referrals
+     */
+    includeReferrals?: boolean;
+  }
+
+  let { includeReferrals = true }: Props = $props();
+
+  let data = $state(starterData);
+
+  onMount(async () => {
+    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
+      return;
+    }
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/footer/?' +
+          new URLSearchParams({
+            _website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const footerData = await response.json();
+      // Dumb verification...
+      if (!footerData[0].company_description) return;
+      data = footerData;
+    } catch {
+      console.warn('Unable to fetch site footer data');
+    }
+  });
+</script>
+
+<footer
+  class="my-0"
+  style={`
+    --nav-background: var(--theme-colour-background, #fff);
+    --nav-primary: var(--theme-colour-text-primary, #404040);
+    --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
+  `}
+>
+  <div>
+    {#if includeReferrals}
+      <PaddingReset>
+        <ReferralBlock
+          heading="More from Reuters Graphics"
+          collection="graphics"
+          class="fpy-4"
+        />
+      </PaddingReset>
+    {/if}
+    <QuickLinks links={data[0]} />
+    <CompanyLinks links={data[0]} />
+    <LegalLinks links={data[0]} />
+  </div>
+</footer>
+
+<style lang="scss">
+  footer {
+    margin-block-start: 0;
+    background-color: var(--nav-background, #fff);
+    div {
+      max-width: 1400px;
+      margin: 0 auto;
+    }
+    :global(a) {
+      text-decoration: none;
+    }
+    :global(a:hover) {
+      text-decoration: underline;
+    }
+  }
+</style>
diff --git a/src/components/SiteFooter/data.json b/src/components/SiteFooter/data.json
new file mode 100644
index 0000000..76a8f61
--- /dev/null
+++ b/src/components/SiteFooter/data.json
@@ -0,0 +1,210 @@
+[
+  {
+    "company_description": "Reuters, the news and media division of Thomson Reuters, is the world’s largest multimedia news provider, reaching billions of people worldwide every day. Reuters provides business, financial, national and international news to professionals via desktop terminals, the world's media organizations, industry events and directly to consumers.",
+    "disclaimer_link": "https://www.reuters.com/info-pages/disclaimer/",
+    "copyright_link": "https://www.thomsonreuters.com/en/policies/copyright.html",
+    "copyright_year": "2025",
+    "latest_links": [
+      {
+        "text": "Home",
+        "url": "/",
+        "self": true
+      }
+    ],
+    "browse_links": [
+      {
+        "text": "World",
+        "url": "/world/",
+        "self": true
+      },
+      {
+        "text": "Business",
+        "url": "/business/",
+        "self": true
+      },
+      {
+        "text": "Legal",
+        "url": "/legal/",
+        "self": true
+      },
+      {
+        "text": "Markets",
+        "url": "/markets/",
+        "self": true
+      },
+      {
+        "text": "Breakingviews",
+        "url": "/breakingviews/",
+        "self": true
+      },
+      {
+        "text": "Technology",
+        "url": "/technology/",
+        "self": true
+      },
+      {
+        "text": "Investigations",
+        "url": "/investigates/"
+      },
+      {
+        "text": "Lifestyle",
+        "url": "/lifestyle/",
+        "self": true
+      }
+    ],
+    "media_links": [
+      {
+        "text": "Videos",
+        "url": "https://www.reuters.com/video/",
+        "symbol": "videos"
+      },
+      {
+        "text": "Pictures",
+        "url": "https://www.reuters.com/news/pictures",
+        "symbol": "pictures"
+      },
+      {
+        "text": "Graphics",
+        "url": "https://graphics.reuters.com/",
+        "symbol": "graphics"
+      }
+    ],
+    "about_links": [
+      {
+        "text": "About Reuters",
+        "url": "https://www.reutersagency.com/en/about/about-us/"
+      },
+      {
+        "text": "Careers",
+        "url": "https://www.thomsonreuters.com/en/careers.html"
+      },
+      {
+        "text": "Reuters News Agency",
+        "url": "https://www.reutersagency.com/en/?utm_source=website&utm_medium=reuters&utm_campaign=site-referral&utm_content=us&utm_term=0"
+      },
+      {
+        "text": "Brand Attribution Guidelines",
+        "url": "https://www.reutersagency.com/en/about/about-us/brand-attribution-guidelines/"
+      },
+      {
+        "text": "Reuters Leadership",
+        "url": "https://www.reutersagency.com/en/about/leadership-team/"
+      },
+      {
+        "text": "Reuters Fact Check",
+        "url": "https://www.reuters.com/fact-check/"
+      },
+      {
+        "text": "Reuters Diversity Report",
+        "url": "https://www.reuters.com/DiversityReportApril2022"
+      }
+    ],
+    "stay_informed_links": [
+      {
+        "text": "Download the App",
+        "url": "https://www.reuters.com/tools/mobile/us"
+      },
+      {
+        "text": "Newsletters",
+        "url": "https://newslink.reuters.com/join/subscribe"
+      }
+    ],
+    "social_links": [
+      {
+        "type": "twitter",
+        "url": "https://www.twitter.com/Reuters"
+      },
+      {
+        "type": "facebook",
+        "url": "https://www.facebook.com/Reuters"
+      },
+      {
+        "type": "instagram",
+        "url": "https://www.instagram.com/Reuters"
+      },
+      {
+        "type": "youtube",
+        "url": "https://www.youtube.com/user/ReutersVideo"
+      },
+      {
+        "type": "linkedin",
+        "url": "https://www.linkedin.com/company/10256858/"
+      }
+    ],
+    "tr_products": [
+      {
+        "name": "Westlaw",
+        "description": "Build the strongest argument relying on authoritative content, attorney-editor expertise, and industry defining technology.",
+        "url": "https://legal.thomsonreuters.com/en/products/westlaw"
+      },
+      {
+        "name": "Onesource",
+        "description": "The most comprehensive solution to manage all your complex and ever-expanding tax and compliance needs.",
+        "url": "https://tax.thomsonreuters.com/en/onesource"
+      },
+      {
+        "name": "Checkpoint",
+        "description": "The industry leader for online information for tax, accounting and finance professionals.",
+        "url": "https://tax.thomsonreuters.com/en/checkpoint"
+      }
+    ],
+    "refinitiv_products": [
+      {
+        "name": "Refinitiv Workspace",
+        "description": " Access unmatched financial data, news and content in a highly-customised workflow experience on desktop, web and mobile.",
+        "url": " https://www.refinitiv.com/en/products/refinitiv-workspace"
+      },
+      {
+        "name": "Refinitiv Data Catalogue",
+        "description": " Browse an unrivalled portfolio of real-time and historical market data and insights from worldwide sources and experts.",
+        "url": " https://www.refinitiv.com/en/financial-data"
+      },
+      {
+        "name": "Refinitiv World-Check",
+        "description": "Screen for heightened risk individual and entities globally to help uncover hidden risks in business relationships and human networks.",
+        "url": "https://www.refinitiv.com/en/products/world-check-kyc-screening"
+      }
+    ],
+    "ad_links": [
+      {
+        "text": "Advertise With Us",
+        "url": "https://www.reutersagency.com/en/services/advertising-solutions/"
+      },
+      {
+        "text": "Advertising Guidelines",
+        "url": "/info-pages/advertising-guidelines/"
+      }
+    ],
+    "misc_links": [
+      {
+        "text": "Cookies",
+        "url": "https://www.thomsonreuters.com/en/privacy-statement.html#cookies"
+      },
+      {
+        "text": "Terms of Use",
+        "url": "/info-pages/terms-of-use/"
+      },
+      {
+        "text": "Privacy",
+        "url": "https://www.thomsonreuters.com/en/privacy-statement.html"
+      },
+      {
+        "text": "Digital Accessibility",
+        "url": "https://www.thomsonreuters.com/en/policies/digital-accessibility-policy.html"
+      },
+      {
+        "text": "Corrections",
+        "url": "/info-pages/contact-us/"
+      },
+      {
+        "text": "Site Feedback",
+        "url": "https://trdigital.iad1.qualtrics.com/jfe/form/SV_8kte8gArGyCGVhz"
+      },
+      {
+        "text": "Do Not Sell My Personal Information",
+        "url": "javascript:window.OneTrust.ToggleInfoDisplay();",
+        "self": true
+      }
+    ]
+  }
+]
diff --git a/src/components/SiteFooter/svgs/Facebook.svelte b/src/components/SiteFooter/svgs/Facebook.svelte
new file mode 100644
index 0000000..045cd7b
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Facebook.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  style="width: {width}px;"
+  ><path
+    d="M14.5 0h-13C.675 0 0 .675 0 1.5v13c0 .825.675 1.5 1.5 1.5H8V9H6V7h2V6c0-1.653 1.347-3 3-3h2v2h-2c-.55 0-1 .45-1 1v1h3l-.5 2H10v7h4.5c.825 0 1.5-.675 1.5-1.5v-13c0-.825-.675-1.5-1.5-1.5Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/Graphics.svelte b/src/components/SiteFooter/svgs/Graphics.svelte
new file mode 100644
index 0000000..c15bb5f
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Graphics.svelte
@@ -0,0 +1,21 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+>
+  <title>Gallery</title>
+  <path
+    d="M13.3331429,0.38114286 L2.66628571,0.38114286 C1.37085714,0.38114286 0.38057143,1.37142857 0.38057143,2.66685714 L0.38057143,13.3337143 C0.38057143,14.6291429 1.37085714,15.6194286 2.66628571,15.6194286 L13.3331429,15.6194286 C14.6285714,15.6194286 15.6188571,14.6291429 15.6188571,13.3337143 L15.6188571,2.66685714 C15.6188571,1.37142857 14.6285714,0.38114286 13.3331429,0.38114286 Z M1.90457143,2.66685714 C1.90457143,2.20971429 2.20914286,1.90514286 2.66628571,1.90514286 L13.3331429,1.90514286 C13.7902857,1.90514286 14.0948571,2.20971429 14.0948571,2.66685714 L14.0948571,8.4571429 L11.5805714,5.94285714 C11.276,5.63828571 10.8188571,5.63828571 10.5137143,5.94285714 L2.43771429,14.0188571 C2.13314286,13.9428571 1.90457143,13.6377143 1.90457143,13.3331429 L1.90457143,2.66628571 L1.90457143,2.66685714 Z M13.3331429,14.0954286 L4.49485714,14.0954286 L11.0474286,7.5428571 L14.0948571,10.5902857 L14.0948571,13.3331429 C14.0948571,13.7902857 13.7902857,14.0948571 13.3331429,14.0948571 L13.3331429,14.0954286 Z"
+  ></path><path
+    d="M5.33314286,7.2382857 C6.4,7.2382857 7.2377143,6.4 7.2377143,5.33371429 C7.2377143,4.26742857 6.3994286,3.42914286 5.33314286,3.42914286 C4.26685714,3.42914286 3.42857143,4.26742857 3.42857143,5.33371429 C3.42857143,6.4 4.26685714,7.2382857 5.33314286,7.2382857 Z M5.33314286,4.95257143 C5.56171429,4.95257143 5.71428571,5.10514286 5.71428571,5.33371429 C5.71428571,5.56228571 5.56171429,5.71485714 5.33314286,5.71485714 C5.10457143,5.71485714 4.952,5.56228571 4.952,5.33371429 C4.952,5.10514286 5.10457143,4.95257143 5.33314286,4.95257143 Z"
+  ></path>
+</svg>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/Instagram.svelte b/src/components/SiteFooter/svgs/Instagram.svelte
new file mode 100644
index 0000000..1e45cc2
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Instagram.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+  style="width: {width}px;"
+  ><path
+    d="M8 1.44c2.137 0 2.39.01 3.231.048.781.034 1.203.165 1.485.274.372.145.64.32.918.598.281.281.453.546.6.919.11.281.24.706.275 1.484.037.844.047 1.097.047 3.232 0 2.134-.01 2.39-.047 3.231-.034.781-.165 1.203-.275 1.484a2.47 2.47 0 0 1-.597.919 2.51 2.51 0 0 1-.918.6c-.282.11-.707.24-1.485.275-.844.037-1.097.047-3.232.047-2.134 0-2.39-.01-3.231-.047-.781-.034-1.203-.165-1.484-.275a2.476 2.476 0 0 1-.92-.597 2.51 2.51 0 0 1-.6-.918c-.109-.282-.24-.707-.274-1.485-.038-.844-.048-1.097-.048-3.231 0-2.135.01-2.391.047-3.232.035-.781.166-1.203.276-1.485.143-.372.319-.64.597-.919.281-.281.546-.453.918-.6.282-.109.707-.24 1.485-.274C5.608 1.45 5.862 1.44 8 1.44ZM8 0C5.828 0 5.556.01 4.703.047c-.85.038-1.435.175-1.94.372a3.898 3.898 0 0 0-1.419.925c-.447.444-.719.89-.925 1.415C.222 3.27.085 3.85.047 4.7.01 5.556 0 5.828 0 8c0 2.172.01 2.444.047 3.297.038.85.175 1.434.372 1.94.206.528.478.976.925 1.419.444.444.89.719 1.415.922.51.197 1.091.335 1.941.372.853.038 1.125.047 3.297.047s2.444-.01 3.297-.047c.85-.037 1.434-.175 1.94-.372a3.903 3.903 0 0 0 1.416-.922c.444-.444.719-.89.922-1.415.197-.51.335-1.091.372-1.941.037-.853.047-1.125.047-3.297s-.01-2.444-.047-3.297c-.038-.85-.175-1.435-.372-1.94a3.753 3.753 0 0 0-.915-1.423A3.91 3.91 0 0 0 13.24.422c-.51-.197-1.09-.335-1.94-.372C10.444.008 10.171 0 8 0H8Z"
+  ></path><path
+    d="M8 3.89a4.11 4.11 0 0 0 0 8.22 4.11 4.11 0 0 0 0-8.22Zm0 6.776a2.666 2.666 0 1 1 0-5.332 2.666 2.666 0 0 1 0 5.332Zm5.231-6.938a.96.96 0 1 1-1.919 0 .96.96 0 0 1 1.919 0Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/LinkedIn.svelte b/src/components/SiteFooter/svgs/LinkedIn.svelte
new file mode 100644
index 0000000..bb3505c
--- /dev/null
+++ b/src/components/SiteFooter/svgs/LinkedIn.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 21 21"
+  style="width: {width}px;"
+  ><path
+    d="M19.031 0c1.034 0 1.888.807 1.964 1.822L21 1.97V19.03a1.975 1.975 0 0 1-1.822 1.964L19.03 21H1.97a1.975 1.975 0 0 1-1.964-1.822L0 19.03V1.97C0 .935.807.08 1.822.005L1.97 0H19.03ZM6.3 7.875H3.15v10.063H6.3V7.874Zm7.875-.175c-1.575 0-2.538.788-2.975 1.575v-1.4H8.225v10.063h3.15V12.95c0-1.313.175-2.537 1.838-2.537 1.575 0 1.575 1.487 1.575 2.624v4.9h3.15v-5.425c0-2.712-.613-4.812-3.763-4.812ZM4.637 2.8c-1.05 0-1.837.875-1.837 1.838 0 1.05.875 1.837 1.838 1.837 1.05 0 1.837-.787 1.837-1.837 0-1.05-.875-1.838-1.837-1.838Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/Pictures.svelte b/src/components/SiteFooter/svgs/Pictures.svelte
new file mode 100644
index 0000000..2d15743
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Pictures.svelte
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 21 18"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+  ><title>Pictures</title><path
+    d="M13.1256562,0 C13.3881562,0 13.6506562,0.17954776 13.825875,0.3597705 L15.3135937,2.69996625 L18.375,2.69996625 C19.8627187,2.69996625 21,3.8697266 21,5.3999325 L21,15.3000337 C21,16.8302396 19.8627187,18 18.375,18 L2.625,18 C1.13728125,18 0,16.8302396 0,15.3000337 L0,5.3999325 C0,3.8697266 1.13728125,2.69996625 2.625,2.69996625 L5.6877187,2.69996625 L7.1754375,0.3597705 C7.3506562,0.18022275 7.6131562,0 7.8756562,0 L13.1256562,0 Z M12.6013125,1.79952751 L8.3140312,1.79952751 L6.8263125,4.1397233 C6.6510937,4.319271 6.3885937,4.4994938 6.1260937,4.4994938 L2.6263125,4.4994938 C2.1013125,4.4994938 1.75153125,4.8592643 1.75153125,5.3992575 L1.75153125,15.2993588 C1.75153125,15.839352 2.1013125,16.1991225 2.6263125,16.1991225 L18.3763125,16.1991225 C18.9013125,16.1991225 19.2510937,15.839352 19.2510937,15.2993588 L19.2510937,5.3992575 C19.2510937,4.8592643 18.9013125,4.4994938 18.3763125,4.4994938 L14.8765312,4.4994938 C14.6140312,4.4994938 14.3515312,4.319946 14.0890312,4.1397233 L12.6013125,1.79952751 Z M10.5013125,5.3999325 C12.95175,5.3999325 14.8765312,7.3796828 14.8765312,9.9001012 C14.8765312,12.4205197 12.95175,14.40027 10.5013125,14.40027 C8.050875,14.40027 6.1260937,12.4205197 6.1260937,9.9001012 C6.1260937,7.3796828 8.0515312,5.3999325 10.5013125,5.3999325 Z M10.5013125,7.19946 C9.0135937,7.19946 7.8763125,8.3692204 7.8763125,9.8994263 C7.8763125,11.4296321 9.0135937,12.5993925 10.5013125,12.5993925 C11.9890312,12.5993925 13.1263125,11.4296321 13.1263125,9.8994263 C13.1263125,8.3692204 11.9890312,7.19946 10.5013125,7.19946 Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/Twitter.svelte b/src/components/SiteFooter/svgs/Twitter.svelte
new file mode 100644
index 0000000..1c5e81c
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Twitter.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 30 30"
+  aria-labelledby="TwitterIconId"
+  role="presentation"
+  aria-hidden="true"
+  focusable="false"
+  style="width: {width}px;"
+  ><title id="TwitterIconId">X</title><path
+    d="M17.923 14.387 25.569 5.5h-1.812l-6.64 7.717L11.817 5.5H5.7l8.018 11.67L5.7 26.49h1.812l7.01-8.15 5.6 8.15h6.116l-8.316-12.102Zm-2.482 2.885-.812-1.162-6.464-9.246h2.783l5.216 7.462.813 1.162 6.78 9.7h-2.782l-5.534-7.915Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/Videos.svelte b/src/components/SiteFooter/svgs/Videos.svelte
new file mode 100644
index 0000000..937bda4
--- /dev/null
+++ b/src/components/SiteFooter/svgs/Videos.svelte
@@ -0,0 +1,17 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 11"
+  role="img"
+  aria-hidden="true"
+  focusable="false"
+  ><title>Videos</title><path
+    d="M15.6665,1.5665 C15.4665,1.433 15.2,1.5 15,1.633 L11.3335,4.233 L11.3335,2.1665 C11.3335,1.033 10.467,0.1665 9.3335,0.1665 L2,0.1665 C0.8665,0.1665 0,1.033 0,2.1665 L0,8.833 C0,9.9665 0.8665,10.833 2,10.833 L9.3335,10.833 C10.467,10.833 11.3335,9.9665 11.3335,8.833 L11.3335,6.7665 L14.9335,9.3665 C15.067,9.433 15.2,9.5 15.3335,9.5 C15.467,9.5 15.5335,9.5 15.667,9.4335 C15.867,9.3 16.0005,9.1 16.0005,8.8335 L16.0005,2.167 C16.0005,1.9005 15.867,1.7005 15.667,1.567 L15.6665,1.5665 Z M10,8.8335 C10,9.2335 9.7335,9.5 9.3335,9.5 L2,9.5 C1.6,9.5 1.3335,9.2335 1.3335,8.8335 L1.3335,2.167 C1.3335,1.767 1.6,1.5005 2,1.5005 L9.3335,1.5005 C9.7335,1.5005 10,1.767 10,2.167 L10,8.8335 Z M14.6665,7.5665 L11.8,5.5 L14.6665,3.4335 L14.6665,7.567 L14.6665,7.5665 Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteFooter/svgs/YouTube.svelte b/src/components/SiteFooter/svgs/YouTube.svelte
new file mode 100644
index 0000000..cadb5e0
--- /dev/null
+++ b/src/components/SiteFooter/svgs/YouTube.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  aria-hidden="true"
+  focusable="false"
+  viewBox="0 0 21 17"
+  xmlns="http://www.w3.org/2000/svg"
+  style="width: {width}px;"
+  ><path
+    d="M18.375 0H2.625A2.617 2.617 0 0 0 0 2.609V14.39A2.617 2.617 0 0 0 2.625 17h15.75A2.617 2.617 0 0 0 21 14.391V2.61A2.617 2.617 0 0 0 18.375 0Zm-10.5 13.044V4.348l7 4.348-7 4.348Z"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../../SiteHeader/scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteHeader/MobileMenu/index.svelte b/src/components/SiteHeader/MobileMenu/index.svelte
new file mode 100644
index 0000000..d4be65b
--- /dev/null
+++ b/src/components/SiteHeader/MobileMenu/index.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+  import ReutersLogo from '../../ReutersLogo/ReutersLogo.svelte';
+  import CloseIcon from '../svgs/Close.svelte';
+  import { normalizeUrl } from '../NavBar/utils/index.js';
+
+  interface Props {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    data?: any;
+    isMobileMenuOpen?: boolean;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    releaseMobileMenu?: any;
+  }
+
+  let {
+    data = {},
+    isMobileMenuOpen = false,
+    releaseMobileMenu = () => {},
+  }: Props = $props();
+</script>
+
+{#if isMobileMenuOpen}
+  <div
+    class="overlay"
+    aria-modal="true"
+    style={`
+      --nav-background: var(--theme-colour-background, #fff);
+      --nav-primary: var(--theme-colour-text-primary, #404040);
+      --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+      --nav-accent: var(--theme-colour-brand-logo, #fa6400);
+      --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgba(64,64,64,.08));
+    `}
+  >
+    <header class="header">
+      <div class="logo">
+        <ReutersLogo
+          logoColour="var(--nav-accent)"
+          textColour="var(--nav-primary)"
+        />
+      </div>
+      <button
+        class="button close-button"
+        aria-label="Close menu"
+        onclick={releaseMobileMenu}
+      >
+        <div class="button-container">
+          <CloseIcon />
+        </div>
+      </button>
+    </header>
+    {#each data.sections as section}
+      <section class="section">
+        <a class="section-link" href={normalizeUrl(section.url)}
+          >{section.name}</a
+        >
+        {#if section.children}
+          <ul class="subsections">
+            {#each section.children as sub}
+              <li>
+                <a class="subsection-link" href={normalizeUrl(sub.url)}>
+                  {sub.name}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </section>
+    {/each}
+  </div>
+{/if}
+
+<style lang="scss">
+  @use '../scss/_grids.scss' as *;
+  @use '../scss/_colors.scss' as *;
+  @use '../scss/_z-indexes.scss' as *;
+  @use 'mixins' as *;
+
+  $mobile-nav-height: 56px;
+
+  .overlay {
+    position: fixed;
+    z-index: $zindex-modal;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding-block-end: 60px;
+    box-sizing: border-box;
+    background: var(--nav-background);
+    color: var(--nav-primary);
+    overflow: auto;
+  }
+
+  .header {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: $mobile-nav-height;
+    box-sizing: border-box;
+    background: var(--nav-background);
+  }
+
+  .logo {
+    font-size: 0;
+    width: 94px;
+  }
+
+  .close-button {
+    width: 40px;
+    height: 40px;
+    margin-inline-start: auto;
+    display: inline-block;
+    vertical-align: top;
+    outline: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+    overflow: visible;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+
+    .button-container {
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      border: 2px solid var(--nav-background);
+    }
+    &:hover .button-container {
+      box-shadow: var(--nav-shadow);
+    }
+    &:focus-visible .button-container {
+      border: 2px solid var(--nav-accent);
+    }
+  }
+
+  .header {
+    border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+    @include spacing-single(padding-inline-start padding-inline-end);
+  }
+
+  .section {
+    padding-block-start: 16px;
+    padding-block-end: 16px;
+    border-bottom: 1px solid var(--tr-muted-grey);
+    width: 100%;
+    max-width: 100%;
+    @include spacing-single(padding-inline-start padding-inline-end);
+
+    .subsections {
+      margin: 20px 0 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      grid-column-gap: 2.2222222222vw;
+      grid-row-gap: 16px;
+      @include spacing-single(grid-column-gap);
+      @media (max-width: 1023.9px) {
+        grid-column-gap: 4.2666666667vw;
+      }
+
+      li {
+        margin: 0;
+      }
+    }
+
+    .section-link {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .section-link,
+    .subsection-link {
+      @include font-sans;
+      text-decoration: none;
+      line-height: 1.2;
+      color: var(--nav-primary);
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+    .subsection-link {
+      font-size: 16px;
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/DownArrow.svelte b/src/components/SiteHeader/NavBar/DownArrow.svelte
new file mode 100644
index 0000000..24467c9
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/DownArrow.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  interface Props {
+    rotate?: boolean;
+  }
+
+  let { rotate = false }: Props = $props();
+</script>
+
+<svg
+  class="arrow"
+  class:rotated={rotate}
+  focusable="false"
+  aria-hidden="true"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 11 7"
+>
+  <path
+    d="M10.413.587a.71.71 0 0 0-1.027 0L5.5 4.474 1.613.587a.71.71 0 0 0-1.027 0 .709.709 0 0 0 0 1.027l4.4 4.4c.147.147.367.22.513.22a.79.79 0 0 0 .513-.22l4.4-4.4a.71.71 0 0 0 0-1.027h.001Z"
+  ></path>
+</svg>
+
+<style lang="scss">
+  @use './../scss/_colors.scss' as *;
+  svg {
+    margin-inline-start: 4px;
+    width: 10px;
+    fill: var(--nav-primary, var(--tr-dark-grey));
+    transition: transform 0.15s ease;
+    &.rotated {
+      transform: rotate(180deg);
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
new file mode 100644
index 0000000..51f1650
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/MoreDropdown.svelte
@@ -0,0 +1,110 @@
+<script lang="ts">
+  import NavDropdown from './index.svelte';
+  import { normalizeUrl } from '../utils';
+
+  let { sections = [] } = $props();
+</script>
+
+<NavDropdown>
+  <div class="more-sections" data-chromatic="ignore">
+    <div class="groupContainer">
+      {#each sections as section}
+        <section
+          class="more-section-group"
+          class:has-children={section.children}
+        >
+          <a href={normalizeUrl(section.url)} class="section-link">
+            {section.name}
+          </a>
+          {#if section.children}
+            <ul class="subsections">
+              {#each section.children as sub}
+                <li>
+                  <a class="subsection-link" href={normalizeUrl(sub.url)}
+                    >{sub.name}</a
+                  >
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </section>
+      {/each}
+    </div>
+  </div>
+</NavDropdown>
+
+<style lang="scss">
+  @use '../../styles/_colors.scss' as *;
+  @use '../../styles/_breakpoints.scss' as breakpoints;
+  @use '../../styles/_eases.scss' as *;
+  @use '../../styles/_grids.scss' as grids;
+  @use '../../styles/_z-indexes.scss' as *;
+
+  a {
+    text-decoration: none;
+    font-family: var(--theme-font-family-sans-serif);
+    &:hover {
+      color: inherit;
+      text-decoration: underline !important;
+    }
+  }
+
+  .more-sections {
+    position: relative;
+
+    @include breakpoints.for-tablet-down {
+      display: flex;
+      flex-direction: row;
+      column-gap: 64px;
+    }
+  }
+
+  .more-section-group {
+    &.has-children {
+      margin-block-end: 20px;
+    }
+
+    .subsections {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      @include grids.spacing-single(grid-column-gap);
+
+      li {
+        margin: 0;
+      }
+
+      .subsection-link {
+        font-size: 16px;
+        color: var(--nav-primary, var(--tr-dark-grey));
+        line-height: 18px;
+        font-weight: 400;
+        display: inline-block;
+        padding: 4px 0;
+        margin-block-end: 2px;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline !important;
+        }
+      }
+    }
+
+    .section-link {
+      grid-column: 1 / -1;
+      margin-block-end: 16px;
+      line-height: 18px;
+      font-size: 16px;
+      display: inline-block;
+      color: var(--nav-primary, var(--tr-dark-grey));
+      text-decoration: none;
+      @media (min-width: 1300px) {
+        font-size: 18px;
+      }
+      &:hover {
+        text-decoration: underline !important;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
new file mode 100644
index 0000000..49edf9a
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/SectionDropdown.svelte
@@ -0,0 +1,134 @@
+<script lang="ts">
+  import { normalizeUrl } from '../utils';
+
+  import NavDropdown from './index.svelte';
+
+  let { section = {}, headingText } = $props();
+
+  let splitCount = $derived(
+    section.children && section.children.length > 7 ?
+      Math.ceil(section.children.length / 2)
+    : 0
+  );
+</script>
+
+<NavDropdown {headingText}>
+  <a href={normalizeUrl(section.url)}>
+    <span class="heading">
+      Browse {section.name}
+    </span>
+  </a>
+  <div class="sections" data-chromatic="ignore">
+    {#if splitCount > 0}
+      <ul class="sections-group">
+        {#each section.children.slice(0, splitCount) as sub}
+          <li>
+            <a class="subsection-link" href={normalizeUrl(sub.url)}>
+              {sub.name}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <ul class="sections-group">
+      {#each section.children.slice(splitCount) as sub}
+        <li>
+          <a class="subsection-link" href={normalizeUrl(sub.url)}>
+            {sub.name}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</NavDropdown>
+
+<style lang="scss">
+  @use '../../styles/_colors.scss' as *;
+  @use '../../styles/_breakpoints.scss' as *;
+
+  a {
+    text-decoration: none;
+    &:hover {
+      color: var(--nav-primary, var(--tr-dark-grey));
+      text-decoration: underline !important;
+    }
+  }
+
+  .sections {
+    display: flex;
+
+    @include for-tablet-down {
+      display: block;
+    }
+
+    .sections-group {
+      width: 50%;
+      list-style: none;
+      padding: 0;
+      margin: 12px 0 0 0;
+
+      font-family: var(--theme-font-family-sans-serif);
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 18px;
+      color: var(--nav-primary, #404040);
+
+      li {
+        margin: 0;
+      }
+
+      &:first-child {
+        margin-inline-end: 16px;
+      }
+
+      @include for-tablet-down {
+        &:nth-child(2) {
+          margin-block-start: 0;
+        }
+      }
+    }
+  }
+
+  .subsection-link {
+    line-height: 18px;
+    font-weight: 400;
+    display: inline-block;
+    padding: 4px 0;
+    margin-block-end: 2px;
+    font-family: var(--theme-font-family-sans-serif);
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span.heading {
+    line-height: 1.333;
+    font-size: 16px;
+    font-weight: 500;
+    margin: 0;
+    padding: 0;
+    letter-spacing: 0;
+    text-decoration: none;
+    text-transform: none;
+    font-smooth: always;
+    color: var(--nav-primary, var(--tr-dark-grey));
+    -webkit-font-smoothing: antialiased;
+    @media (min-width: 1300px) {
+      font-size: 18px;
+    }
+    &:hover {
+      color: inherit;
+      text-decoration: underline !important;
+    }
+  }
+
+  li > a {
+    line-height: 1.75;
+    letter-spacing: 0;
+    font-size: 16px;
+    color: var(--nav-primary, var(--tr-dark-grey));
+    font-weight: 400;
+    font-smooth: always;
+    -webkit-font-smoothing: antialiased;
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
new file mode 100644
index 0000000..32d6e07
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/Spinner/index.svelte
@@ -0,0 +1,49 @@
+<div>
+  <div class="spinner-container">
+    <div class="spinner"></div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../../../styles/_colors.scss' as *;
+
+  @keyframes spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .spinner-container {
+    position: relative;
+    height: 0;
+    padding-block-end: 100%;
+    color: var(--nav-primary, var(--tr-dark-grey));
+  }
+
+  .spinner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 4px solid transparent;
+    border-top-color: currentColor;
+    animation: spinner 0.6s linear infinite;
+    box-sizing: border-box;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: block;
+      left: -4px;
+      top: -4px;
+      width: 100%;
+      height: 100%;
+      border: 4px solid currentColor;
+      box-sizing: content-box;
+      border-radius: 50%;
+      opacity: 0.25;
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
new file mode 100644
index 0000000..1ddde42
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/index.svelte
@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { normalizeUrl } from '../../utils';
+  import { getTime } from './time';
+
+  let { story } = $props();
+
+  let thumbnail = $derived(story.thumbnail);
+</script>
+
+<div class="story-card" data-chromatic="ignore">
+  <a href={normalizeUrl(story.canonical_url)}>
+    <div class="story-text" class:has-thumbnail={thumbnail}>
+      <span>{story.title}</span>
+      <time datetime={story.display_time}>{getTime(story.display_time)}</time>
+    </div>
+    {#if thumbnail && (thumbnail.resizer_url || thumbnail?.renditions?.square?.['120w'])}
+      <div class="thumbnail">
+        {#if thumbnail.resizer_url}
+          <img
+            src="{thumbnail.resizer_url}&width=120&quality=80"
+            alt={thumbnail.alt_text}
+          />
+        {:else}
+          <img
+            src={thumbnail.renditions.square['120w']}
+            alt={thumbnail.alt_text}
+          />
+        {/if}
+      </div>
+    {/if}
+  </a>
+</div>
+
+<style lang="scss">
+  @use '../../mixins' as *;
+
+  .story-card a {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    color: var(--nav-primary, var(--tr-dark-grey));
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      text-decoration: none;
+      .story-text span {
+        text-decoration: underline;
+      }
+    }
+
+    .story-text {
+      margin-inline-end: 10px;
+      width: 100%;
+      &.has-thumbnail {
+        width: calc(100% - 84px);
+      }
+
+      span {
+        color: var(--nav-primary, var(--tr-dark-grey));
+        font-size: 16px;
+        font-weight: 500;
+        @include font-sans;
+        @media (min-width: 1300px) {
+          font-size: 18px;
+        }
+      }
+
+      time {
+        @include font-sans;
+        margin-block-start: 8px;
+        display: block;
+        font-size: 12px;
+        font-weight: 400;
+        text-decoration: none !important;
+      }
+    }
+
+    .thumbnail {
+      width: 84px;
+      height: 84px;
+      flex: 0 0 84px;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid #ddd;
+      img {
+        object-fit: cover;
+        width: 100%;
+        height: 100%;
+        margin: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.ts b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.ts
new file mode 100644
index 0000000..db2455a
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/StoryCard/time.ts
@@ -0,0 +1,74 @@
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat.js';
+import relativeTime from 'dayjs/plugin/relativeTime.js';
+import timezone from 'dayjs/plugin/timezone.js';
+import updateLocale from 'dayjs/plugin/updateLocale.js';
+import utc from 'dayjs/plugin/utc.js';
+
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+dayjs.extend(advancedFormat);
+dayjs.extend(utc);
+dayjs.extend(timezone);
+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('en', {
+  relativeTime: {
+    future: 'in %s',
+    past: '%s ago',
+    s: 'a few seconds',
+    m: 'a min',
+    mm: '%d min',
+    h: 'an hour',
+    hh: '%d hours',
+    d: 'a day',
+    dd: '%d days',
+    M: 'a month',
+    MM: '%d months',
+    y: 'a year',
+    yy: '%d years',
+  },
+});
+
+const getTimeZone = (local: boolean) => {
+  if (local) {
+    return dayjs.tz.guess();
+  }
+
+  return 'UTC';
+};
+
+const diff = (
+  dateFrom: Date,
+  dateTo: number,
+  measurement: 'day' | 'hour' = 'day'
+) => {
+  return dayjs(dateFrom).diff(dayjs(dateTo), measurement, true);
+};
+
+const olderThanHour = (dateFrom: Date, dateTo: number, hours = 1) => {
+  return diff(dateFrom, dateTo, 'hour') < -hours;
+};
+
+const isSameDay = (dateFrom: Date, dateTo: number) => {
+  const first = new Date(dateFrom);
+  const second = new Date(dateTo);
+  return (
+    first.getFullYear() === second.getFullYear() &&
+    first.getMonth() === second.getMonth() &&
+    first.getDate() === second.getDate()
+  );
+};
+
+export const getTime = (datetime: dayjs.ConfigType) => {
+  const publishTime = dayjs(datetime, { utc: true });
+  const showRelativeTime = !olderThanHour(publishTime.toDate(), Date.now());
+  const showTime = isSameDay(publishTime.toDate(), Date.now());
+  const timezone = getTimeZone(false);
+  if (showRelativeTime) {
+    return dayjs().to(publishTime);
+  }
+  if (showTime) return dayjs(datetime).tz(timezone).format('h:mm A z');
+  return publishTime.format('MMMM D, YYYY');
+};
diff --git a/src/components/SiteHeader/NavBar/NavDropdown/index.svelte b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
new file mode 100644
index 0000000..09ea6c5
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/NavDropdown/index.svelte
@@ -0,0 +1,248 @@
+<script lang="ts">
+  import StoryCard from './StoryCard/index.svelte';
+  import Spinner from './Spinner/index.svelte';
+  import { getContext, type Snippet } from 'svelte';
+  import type { Writable } from 'svelte/store';
+
+  interface Props {
+    headingText?: string;
+    children: Snippet;
+  }
+
+  let { headingText = 'Trending Stories', children }: Props = $props();
+
+  const activeSection =
+    getContext<Writable<null | string>>('nav-active-section');
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let stories = $state<any[]>([]);
+  let lastFetched = $state<null | string>(null);
+
+  $effect(() => {
+    try {
+      fetchSection($activeSection);
+    } catch {
+      console.log('Error fetching articles');
+    }
+  });
+
+  const fetchSection = async (activeSection: null | string) => {
+    if (lastFetched === activeSection) return;
+    if (activeSection === 'more') {
+      await fetch(
+        'https://www.reuters.com/pf/api/v3/content/fetch/articles-by-trends-v1?' +
+          new URLSearchParams({
+            query: JSON.stringify({
+              size: 4,
+              website: 'reuters',
+            }),
+          })
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          stories = data.result.articles;
+          lastFetched = activeSection;
+        })
+        .catch(() => {
+          console.log('Error fetching articles');
+        });
+    } else {
+      await fetch(
+        'https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?' +
+          new URLSearchParams({
+            query: JSON.stringify({
+              section_ids: activeSection,
+              size: 4,
+              website: 'reuters',
+            }),
+          })
+      )
+        .then((response) => response.json())
+        .then((data) => {
+          stories = data.result.articles;
+          lastFetched = activeSection;
+        })
+        .catch(() => {
+          console.log('Error fetching articles');
+        });
+    }
+  };
+</script>
+
+<div class="dropdown" data-chromatic="ignore">
+  <div class="dropdown-container">
+    <div class="inner">
+      <div class="submenu">
+        <div class="inner">
+          {@render children?.()}
+        </div>
+      </div>
+      <div class="stories-container">
+        <div class="inner">
+          {#if stories.length > 0}
+            <span class="latest">{headingText}</span>
+            <ul class="story-list">
+              {#each stories as story}
+                <li class="story-item">
+                  <StoryCard {story} />
+                </li>
+              {/each}
+            </ul>
+          {:else}
+            <div class="spinner">
+              <Spinner />
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  @use '../../styles/_colors.scss' as *;
+  @use '../../styles/_breakpoints.scss' as breakpoints;
+  @use '../../styles/_eases.scss' as *;
+  @use '../../styles/_grids.scss' as grids;
+  @use '../../styles/_z-indexes.scss' as *;
+
+  $nav-height: 64px;
+  $mobile-nav-height: 56px;
+
+  .dropdown {
+    position: absolute;
+    z-index: $zindex-dropdown;
+    left: 0;
+    top: $nav-height;
+    width: 100%;
+
+    @include breakpoints.for-mobile {
+      top: $mobile-nav-height;
+    }
+  }
+
+  .dropdown-container {
+    border-top: 1px solid var(--nav-rules, var(--tr-muted-grey));
+    box-shadow: 0 10px 16px rgba(black, 0.1);
+    overflow: hidden;
+    background: var(--nav-background, $white);
+
+    > .inner {
+      margin: 0 auto;
+      @include breakpoints.max-width;
+      @include grids.responsive-columns(12);
+      @include grids.spacing-single(padding-inline-start padding-inline-end);
+    }
+  }
+
+  .submenu,
+  .stories-container {
+    padding: 24px 0;
+    grid-row: 1;
+
+    .inner {
+      position: relative;
+      height: 100%;
+    }
+  }
+
+  .submenu {
+    grid-column: 1 / span 4;
+
+    @include breakpoints.for-extra-wide-desktop {
+      grid-column: 2 / span 3;
+    }
+
+    @include grids.at-4-columns {
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .stories-container {
+    grid-column: 5 / span 8;
+    min-height: 300px;
+
+    .inner {
+      border-left: 1px solid var(--nav-rules, var(--tr-muted-grey));
+      @include grids.spacing-single(padding-inline-start);
+    }
+
+    @include breakpoints.for-extra-wide-desktop {
+      grid-column: 5 / span 7;
+    }
+
+    @include grids.at-4-columns {
+      grid-column: 3 / span 2;
+    }
+  }
+
+  .story-list {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    list-style: none;
+    padding: 0;
+    margin: 20px 0 0 0;
+
+    font-family: var(--theme-font-family-sans-serif);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--nav-primary, #404040);
+
+    @include grids.spacing-single(grid-column-gap);
+    @include grids.at-4-columns {
+      grid-template-columns: repeat(1, 1fr);
+    }
+  }
+
+  .story-item {
+    padding-block-end: 20px;
+    margin: 0;
+    animation: fadein 0.5s both $easeOutExpo;
+
+    &:nth-child(1),
+    &:nth-child(2) {
+      border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+    }
+
+    &:nth-child(3),
+    &:nth-child(4) {
+      padding-block-start: 20px;
+    }
+
+    @include grids.at-4-columns {
+      &:nth-child(2) {
+        padding-block-start: 20px;
+      }
+      &:nth-child(3) {
+        border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+      }
+    }
+  }
+
+  .spinner {
+    width: 40px;
+    margin-inline-start: -20px;
+    position: absolute;
+    top: 60px;
+    left: 50%;
+  }
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  span.latest {
+    font-size: 16px;
+    color: var(--nav-primary, var(--tr-dark-grey));
+    @media (min-width: 1300px) {
+      font-size: 18px;
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/index.svelte b/src/components/SiteHeader/NavBar/index.svelte
new file mode 100644
index 0000000..292ca4f
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/index.svelte
@@ -0,0 +1,268 @@
+<script lang="ts">
+  import DownArrow from './DownArrow.svelte';
+  import SectionDropdown from './NavDropdown/SectionDropdown.svelte';
+  import MoreDropdown from './NavDropdown/MoreDropdown.svelte';
+  import { normalizeUrl } from './utils/index';
+  import { getContext } from 'svelte';
+  import type { Writable } from 'svelte/store';
+
+  let { sections = [] } = $props();
+
+  const activeSection =
+    getContext<Writable<null | string>>('nav-active-section');
+
+  let windowWidth = $state(1200);
+
+  let getDisplayCount = $derived(() => {
+    if (windowWidth >= 1300) return 7;
+    return 5;
+  });
+
+  let navTimeout = $state<ReturnType<typeof setTimeout>>();
+  const timeout = 250;
+
+  let displayCount = $derived(getDisplayCount());
+  let displaySections = $derived(sections.slice(0, displayCount));
+  let hiddenSections = $derived(sections.slice(displayCount));
+</script>
+
+<svelte:window bind:innerWidth={windowWidth} />
+
+<div class="nav-bar">
+  <nav aria-label="Main navigation">
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <ul class="nav-list">
+      {#each displaySections as section}
+        {#if section.children}
+          <!-- svelte-ignore a11y_click_events_have_key_events -->
+          <li
+            class="nav-item category link"
+            onmouseenter={() => {
+              navTimeout = setTimeout(
+                () => activeSection.set(section.id),
+                timeout
+              );
+            }}
+            onfocus={() => activeSection.set(section.id)}
+            onmouseleave={() => {
+              clearTimeout(navTimeout);
+              activeSection.set(null);
+            }}
+            onblur={() => {
+              clearTimeout(navTimeout);
+              activeSection.set(null);
+            }}
+            onclick={() => {
+              if ($activeSection === section.id) {
+                clearTimeout(navTimeout);
+                activeSection.set(null);
+              }
+            }}
+          >
+            <div
+              class="nav-button link"
+              class:open={section.id === $activeSection}
+            >
+              <a href={normalizeUrl(section.url)}>
+                {section.name}
+              </a>
+              <button class="button" aria-label="{section.name} menu">
+                <DownArrow rotate={section.id === $activeSection} />
+              </button>
+            </div>
+            {#if $activeSection === section.id}
+              <SectionDropdown
+                {section}
+                headingText={`Latest in ${section.name}`}
+              />
+            {/if}
+          </li>
+        {:else}
+          <li class="nav-item category link">
+            <div class="nav-button link">
+              <a href={normalizeUrl(section.url)}>
+                {section.name}
+              </a>
+            </div>
+          </li>
+        {/if}
+      {/each}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        class="nav-item"
+        onmouseenter={() => {
+          navTimeout = setTimeout(() => activeSection.set('more'), timeout);
+        }}
+        onfocus={() => activeSection.set('more')}
+        onmouseleave={() => {
+          clearTimeout(navTimeout);
+          activeSection.set(null);
+        }}
+        onblur={() => {
+          clearTimeout(navTimeout);
+          activeSection.set(null);
+        }}
+        onclick={() => {
+          if ($activeSection === 'more') {
+            clearTimeout(navTimeout);
+            activeSection.set(null);
+          }
+        }}
+      >
+        <div
+          class="nav-button more link"
+          class:open={$activeSection === 'more'}
+        >
+          <button class="button">
+            <span>More <DownArrow rotate={$activeSection === 'more'} /></span>
+          </button>
+        </div>
+        {#if $activeSection === 'more'}
+          <MoreDropdown sections={hiddenSections} />
+        {/if}
+      </li>
+    </ul>
+  </nav>
+</div>
+
+<style lang="scss">
+  @use './../scss/_colors.scss' as *;
+  @use './../scss/_breakpoints.scss' as *;
+  @use './../scss/_z-indexes.scss' as *;
+  @use 'mixins' as *;
+
+  $nav-height: 64px;
+  $mobile-nav-height: 56px;
+
+  .nav-bar {
+    margin-inline-start: auto;
+
+    @include for-mobile {
+      display: none;
+    }
+  }
+
+  .nav-list {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    font-family: var(--theme-font-family-sans-serif);
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  .nav-item {
+    display: inline-flex;
+    margin: 0;
+    padding: 0 10px;
+    @include font-sans;
+    font-weight: 500;
+    font-size: 16px;
+
+    .nav-button {
+      position: relative;
+      height: $nav-height;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      a,
+      span {
+        color: var(--nav-primary, var(--tr-dark-grey));
+        text-decoration: none;
+        &:hover,
+        &:active {
+          text-decoration: none;
+          // &:after {
+          //   content: '';
+          //   position: absolute;
+          //   left: 0;
+          //   right: 0;
+          //   bottom: 0;
+          //   display: block;
+          //   height: 4px;
+          //   background: var(--nav-accent, var(--tr-orange));
+          //   opacity: 0.5;
+          // }
+        }
+      }
+
+      @include for-mobile {
+        height: $mobile-nav-height;
+      }
+
+      &.open:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+        height: 4px;
+        background: var(--nav-accent, var(--tr-orange));
+        opacity: 1 !important;
+      }
+    }
+
+    .link {
+      position: relative;
+      line-height: 64px;
+
+      &:hover:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: block;
+        height: 4px;
+        background: var(--nav-accent, var(--tr-orange));
+      }
+    }
+  }
+
+  .button {
+    margin: 0;
+    padding: 0;
+    border: none;
+    background-color: unset;
+    appearance: none;
+    cursor: pointer;
+    @include font-sans;
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--nav-primary, var(--tr-dark-grey));
+
+    &:not(.focused) {
+      outline: none;
+    }
+  }
+
+  .category {
+    display: none;
+
+    // Hide all but first 4
+    @include for-tablet-down {
+      &:nth-child(-n + 4) {
+        display: inline-flex;
+      }
+    }
+
+    // Hide all but first 5
+    @include for-desktop {
+      &:nth-child(-n + 5) {
+        display: inline-flex;
+      }
+    }
+
+    // Hide all but first 7
+    @include for-wide-desktop {
+      &:nth-child(-n + 7) {
+        display: inline-flex;
+      }
+    }
+  }
+</style>
diff --git a/src/components/SiteHeader/NavBar/utils/index.ts b/src/components/SiteHeader/NavBar/utils/index.ts
new file mode 100644
index 0000000..bbb458b
--- /dev/null
+++ b/src/components/SiteHeader/NavBar/utils/index.ts
@@ -0,0 +1,2 @@
+export const normalizeUrl = (url: string) =>
+  /^http/.test(url) ? url : `https://www.reuters.com${url}`;
diff --git a/src/components/SiteHeader/SiteHeader.mdx b/src/components/SiteHeader/SiteHeader.mdx
new file mode 100644
index 0000000..abd6348
--- /dev/null
+++ b/src/components/SiteHeader/SiteHeader.mdx
@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/blocks';
+
+import * as SiteHeaderStories from './SiteHeader.stories.svelte';
+
+<Meta of={SiteHeaderStories} />
+
+# SiteHeader
+
+Reuters dotcom site header, ported from [Raptor UI components](https://github.com/tr/rcom-arc_raptor-ui/tree/develop/packages/rcom-raptor-ui_common/src/components/site-header).
+
+> **Note:** In the graphics kit, you can find this component in `pages/+page.svelte`. Customise it there for the default page.
+
+```svelte
+<script>
+  import { SiteHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeader />
+```
+
+## Dark theme
+
+Colours are customised by the [`Theme`](?path=/docs/theming-theme--default) component. ([Demo](?path=/story/components-page-furniture-siteheader--customised-theme))
+
+```svelte
+<script>
+  import { SiteHeader, Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="dark">
+  <SiteHeader />
+</Theme>
+```
diff --git a/src/components/SiteHeader/SiteHeader.stories.svelte b/src/components/SiteHeader/SiteHeader.stories.svelte
new file mode 100644
index 0000000..3fe3f8d
--- /dev/null
+++ b/src/components/SiteHeader/SiteHeader.stories.svelte
@@ -0,0 +1,47 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { expect, userEvent, within, waitFor } from '@storybook/test';
+  import SiteHeader from './SiteHeader.svelte';
+  import Theme from '../Theme/Theme.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/SiteHeader',
+    component: SiteHeader,
+    argTypes: {
+      themes: { control: { disable: true } },
+    },
+  });
+</script>
+
+<Story
+  name="Demo"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByText('More'));
+    await waitFor(() =>
+      expect(canvas.getByText('Graphics')).toBeInTheDocument()
+    );
+    await userEvent.click(canvas.getByText('World'));
+    await waitFor(() => expect(canvas.getByText('Europe')).toBeInTheDocument());
+  }}
+>
+  <div>
+    <SiteHeader />
+  </div>
+</Story>
+
+<Story name="Customised theme">
+  <div>
+    <Theme base="dark">
+      <SiteHeader />
+    </Theme>
+  </div>
+</Story>
+
+<style lang="scss">
+  div {
+    min-height: 625px;
+    width: calc(100% + 30px);
+    margin-inline-start: -15px;
+  }
+</style>
diff --git a/src/components/SiteHeader/SiteHeader.svelte b/src/components/SiteHeader/SiteHeader.svelte
new file mode 100644
index 0000000..a6e3cc3
--- /dev/null
+++ b/src/components/SiteHeader/SiteHeader.svelte
@@ -0,0 +1,268 @@
+<!-- @component `SiteHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-siteheader--docs) -->
+<script lang="ts">
+  import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
+  import NavBar from './NavBar/index.svelte';
+  import starterData from './data.json';
+  import { onMount, setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import MenuIcon from './svgs/Menu.svelte';
+  import MobileMenu from './MobileMenu/index.svelte';
+
+  setContext('nav-active-section', writable<null | string>(null));
+
+  let data = $state(starterData);
+
+  let sections = $derived(data[0].sections);
+
+  let isMobileMenuOpen = $state(false);
+
+  onMount(async () => {
+    // Only fire on prod...
+    if (new URL(document.location.href).origin !== 'https://www.reuters.com') {
+      return;
+    }
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/header/?' +
+          new URLSearchParams({
+            _website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const headerData = await response.json();
+      // Dumb verification...
+      if (!headerData[0].sections) return;
+      data = headerData;
+    } catch {
+      console.warn('Unable to fetch site header data');
+    }
+  });
+</script>
+
+<header
+  style={`
+    --nav-background: var(--theme-colour-background, #fff);
+    --nav-primary: var(--theme-colour-text-primary, #404040);
+    --nav-rules: var(--theme-colour-brand-rules, #d0d0d0);
+    --nav-accent: var(--theme-colour-brand-logo, #fa6400);
+    --nav-shadow: 0 1px 4px 2px var(--theme-colour-brand-shadow, rgb(255 255 255 / 10%));
+    --theme-font-family-sans-serif: Knowledge, sans-serif;
+  `}
+>
+  <a href="#main-content" class="skip-link"> Skip to main content </a>
+  <div class="nav-container show-nav">
+    <div class="scroll-container">
+      <div class="inner">
+        <div class="main-bar">
+          <div class="logo-container">
+            <div class="logo">
+              <a href="https://www.reuters.com" aria-label="Reuters home">
+                <ReutersLogo
+                  logoColour="var(--nav-accent)"
+                  textColour="var(--nav-primary)"
+                />
+              </a>
+            </div>
+          </div>
+          <NavBar {sections} />
+          <!-- Space takes the place of the MyViewMenu, NavSearchBar & Account components... -->
+          <div class="spacer-container">
+            <div class="spacer"></div>
+          </div>
+
+          <div class="mobile-button-group">
+            <div class="mobile-menu">
+              <button
+                class="menu-button"
+                aria-label="Menu"
+                aria-haspopup="true"
+                aria-expanded={isMobileMenuOpen}
+                onclick={() => {
+                  isMobileMenuOpen = !isMobileMenuOpen;
+                }}
+              >
+                <div class="button-container">
+                  <MenuIcon />
+                </div>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>
+
+<MobileMenu
+  {isMobileMenuOpen}
+  releaseMobileMenu={() => {
+    isMobileMenuOpen = false;
+  }}
+  data={data[0]}
+/>
+
+<style lang="scss">
+  @use './scss/_grids.scss' as grids;
+  @use './scss/_colors.scss' as *;
+  @use './scss/_eases.scss' as *;
+  @use './scss/_breakpoints.scss' as *;
+  @use './scss/_z-indexes.scss' as *;
+
+  $nav-height: 64px;
+  $mobile-nav-height: 56px;
+  $subnav-height: 48px;
+
+  .nav-container {
+    background-color: var(--nav-background, $white);
+    position: relative;
+    height: $nav-height;
+    z-index: $zindex-sticky;
+    --page-height: 0px;
+
+    @include for-tablet-down {
+      height: $mobile-nav-height;
+    }
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  .scroll-container {
+    height: calc(var(--page-height) - 50vh);
+    pointer-events: none;
+
+    .inner {
+      position: sticky;
+      top: 0;
+      background: var(--nav-background, $white);
+      pointer-events: auto;
+      border-bottom: 1px solid var(--nav-rules, var(--tr-muted-grey));
+
+      // @include for-tablet-down {
+      //   border-bottom: none;
+      //   transition: transform 0.25s $principleDefaultEase;
+      //   transform: translateY(-100%);
+      //   will-change: transform;
+      // }
+    }
+  }
+
+  .main-bar {
+    margin: 0 auto;
+    box-sizing: border-box;
+    display: flex;
+    height: $nav-height;
+    justify-content: space-between;
+    @include max-width;
+    @include grids.spacing-single(padding-inline-start padding-inline-end);
+
+    @include for-mobile {
+      height: $mobile-nav-height;
+    }
+  }
+
+  .logo-container {
+    align-self: center;
+
+    .logo {
+      display: block;
+      font-size: 0;
+
+      width: 126px;
+      min-width: 126px;
+
+      @media (max-width: 768px) {
+        width: 94px;
+        min-width: 94px;
+      }
+    }
+  }
+
+  .spacer-container {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    @include for-mobile {
+      display: none;
+    }
+
+    .spacer {
+      width: 193.47px;
+      height: 64px;
+      @media (max-width: 1225px) {
+        width: 88px;
+      }
+    }
+  }
+
+  .mobile-button-group {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    @include for-tablet-up {
+      display: none;
+    }
+  }
+
+  .mobile-menu {
+    margin-inline-start: 8px;
+    @include for-tablet-up {
+      display: none;
+    }
+    .menu-button {
+      width: 40px;
+      height: 40px;
+      display: inline-block;
+      vertical-align: top;
+      outline: none;
+      border: none;
+      margin: 0;
+      padding: 0;
+      overflow: visible;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      line-height: normal;
+
+      .button-container {
+        border-radius: 8px;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+        border: 2px solid var(--nav-background);
+      }
+
+      &:hover .button-container {
+        box-shadow: var(--nav-shadow);
+      }
+      &:focus-visible .button-container {
+        border: 2px solid var(--nav-accent);
+      }
+    }
+  }
+
+  //Skip link styling. More about what a skip-link is and why we have it: https://www.w3schools.com/accessibility/accessibility_skip_links.php#:~:text=The%20HTML%20of%20a%20skip,to%20it%20with%20an%20anchor.
+  .skip-link {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+  }
+
+  .skip-link:focus {
+    position: static;
+    width: auto;
+    height: auto;
+  }
+</style>
diff --git a/src/components/SiteHeader/data.json b/src/components/SiteHeader/data.json
new file mode 100644
index 0000000..97f4bd6
--- /dev/null
+++ b/src/components/SiteHeader/data.json
@@ -0,0 +1,347 @@
+[
+  {
+    "sections": [
+      {
+        "id": "/world/",
+        "url": "/world/",
+        "name": "World",
+        "type": "section",
+        "children": [
+          { "id": "/world/africa/", "url": "/world/africa/", "name": "Africa" },
+          {
+            "id": "/world/americas/",
+            "url": "/world/americas/",
+            "name": "Americas"
+          },
+          {
+            "id": "/world/asia-pacific/",
+            "url": "/world/asia-pacific/",
+            "name": "Asia Pacific"
+          },
+          { "id": "/world/china/", "url": "/world/china/", "name": "China" },
+          { "id": "/world/europe/", "url": "/world/europe/", "name": "Europe" },
+          { "id": "/world/india/", "url": "/world/india/", "name": "India" },
+          {
+            "id": "/world/middle-east/",
+            "url": "/world/middle-east/",
+            "name": "Middle East"
+          },
+          { "id": "/world/uk/", "url": "/world/uk/", "name": "United Kingdom" },
+          { "id": "/world/us/", "url": "/world/us/", "name": "United States" },
+          {
+            "id": "/world/the-great-reboot/",
+            "url": "/world/the-great-reboot/",
+            "name": "The Great Reboot"
+          },
+          {
+            "id": "/world/reuters-next/",
+            "url": "/world/reuters-next/",
+            "name": "Reuters Next"
+          }
+        ]
+      },
+      {
+        "id": "/business/",
+        "url": "/business/",
+        "name": "Business",
+        "type": "section",
+        "children": [
+          {
+            "id": "/business/aerospace-defense/",
+            "url": "/business/aerospace-defense/",
+            "name": "Aerospace & Defense"
+          },
+          {
+            "id": "/business/autos-transportation/",
+            "url": "/business/autos-transportation/",
+            "name": "Autos & Transportation"
+          },
+          {
+            "id": "/business/energy/",
+            "url": "/business/energy/",
+            "name": "Energy"
+          },
+          {
+            "id": "/business/environment/",
+            "url": "/business/environment/",
+            "name": "Environment"
+          },
+          {
+            "id": "/business/finance/",
+            "url": "/business/finance/",
+            "name": "Finance"
+          },
+          {
+            "id": "/business/healthcare-pharmaceuticals/",
+            "url": "/business/healthcare-pharmaceuticals/",
+            "name": "Healthcare & Pharmaceuticals"
+          },
+          {
+            "id": "/business/media-telecom/",
+            "url": "/business/media-telecom/",
+            "name": "Media & Telecom"
+          },
+          {
+            "id": "/business/retail-consumer/",
+            "url": "/business/retail-consumer/",
+            "name": "Retail & Consumer"
+          },
+          {
+            "id": "/business/sustainable-business/",
+            "url": "/business/sustainable-business/",
+            "name": "Sustainable Business"
+          },
+          {
+            "id": "/business/charged/",
+            "url": "/business/charged/",
+            "name": "Charged"
+          },
+          {
+            "id": "/business/future-of-health/",
+            "url": "/business/future-of-health/",
+            "name": "Future of Health"
+          },
+          {
+            "id": "/business/future-of-money/",
+            "url": "/business/future-of-money/",
+            "name": "Future of Money"
+          },
+          {
+            "id": "/business/take-five/",
+            "url": "/business/take-five/",
+            "name": "Take Five"
+          },
+          {
+            "id": "/business/reuters-impact/",
+            "url": "/business/reuters-impact/",
+            "name": "Reuters Impact"
+          },
+          {
+            "id": "/business/davos/",
+            "url": "/business/davos/",
+            "name": "Davos"
+          }
+        ]
+      },
+      {
+        "id": "/legal/",
+        "url": "/legal/",
+        "name": "Legal",
+        "type": "section",
+        "children": [
+          {
+            "id": "/legal/government/",
+            "url": "/legal/government/",
+            "name": "Government"
+          },
+          {
+            "id": "/legal/legalindustry/",
+            "url": "/legal/legalindustry/",
+            "name": "Legal Industry"
+          },
+          {
+            "id": "/legal/litigation/",
+            "url": "/legal/litigation/",
+            "name": "Litigation"
+          },
+          {
+            "id": "/legal/transactional/",
+            "url": "/legal/transactional/",
+            "name": "Transactional"
+          }
+        ]
+      },
+      {
+        "id": "/markets/",
+        "url": "/markets/",
+        "name": "Markets",
+        "type": "section",
+        "children": [
+          {
+            "id": "/markets/asia/",
+            "url": "/markets/asia/",
+            "name": "Asian Markets"
+          },
+          {
+            "id": "/markets/carbon/",
+            "url": "/markets/carbon/",
+            "name": "Carbon Markets"
+          },
+          {
+            "id": "/markets/commodities/",
+            "url": "/markets/commodities/",
+            "name": "Commodities"
+          },
+          {
+            "id": "/markets/currencies/",
+            "url": "/markets/currencies/",
+            "name": "Currencies"
+          },
+          {
+            "id": "/markets/deals/",
+            "url": "/markets/deals/",
+            "name": "Deals"
+          },
+          {
+            "id": "/markets/emerging/",
+            "url": "/markets/emerging/",
+            "name": "Emerging Markets"
+          },
+          {
+            "id": "/markets/europe/",
+            "url": "/markets/europe/",
+            "name": "European Markets"
+          },
+          {
+            "id": "/markets/funds/",
+            "url": "/markets/funds/",
+            "name": "Funds"
+          },
+          {
+            "id": "/markets/global-market-data/",
+            "url": "/markets/global-market-data/",
+            "name": "Global Market Data"
+          },
+          {
+            "id": "/markets/rates-bonds/",
+            "url": "/markets/rates-bonds/",
+            "name": "Rates & Bonds"
+          },
+          {
+            "id": "/markets/stocks/",
+            "url": "/markets/stocks/",
+            "name": "Stocks"
+          },
+          {
+            "id": "/markets/us/",
+            "url": "/markets/us/",
+            "name": "U.S. Markets"
+          },
+          {
+            "id": "/markets/wealth/",
+            "url": "/markets/wealth/",
+            "name": "Wealth"
+          },
+          {
+            "id": "/markets/macromatters/",
+            "url": "/markets/macromatters/",
+            "name": "Macro Matters"
+          }
+        ]
+      },
+      {
+        "id": "/breakingviews/",
+        "url": "/breakingviews/",
+        "name": "Breakingviews",
+        "type": "section"
+      },
+      {
+        "id": "/technology/",
+        "url": "/technology/",
+        "name": "Technology",
+        "type": "section",
+        "children": [
+          {
+            "id": "/technology/disrupted/",
+            "url": "/technology/disrupted/",
+            "name": "Disrupted"
+          },
+          {
+            "id": "/technology/reuters-momentum/",
+            "url": "/technology/reuters-momentum/",
+            "name": "Reuters Momentum"
+          }
+        ]
+      },
+      {
+        "id": "/investigates/",
+        "url": "https://www.reuters.com/investigates/",
+        "name": "Investigations",
+        "type": "link"
+      },
+      {
+        "id": "/lifestyle/sports/",
+        "url": "/lifestyle/sports/",
+        "name": "Sports",
+        "type": "section",
+        "children": [
+          {
+            "id": "/lifestyle/sports/athletics/",
+            "url": "/lifestyle/sports/athletics/",
+            "name": "Athletics"
+          },
+          {
+            "id": "/lifestyle/sports/cricket/",
+            "url": "/lifestyle/sports/cricket/",
+            "name": "Cricket"
+          },
+          {
+            "id": "/lifestyle/sports/cycling/",
+            "url": "/lifestyle/sports/cycling/",
+            "name": "Cycling"
+          },
+          {
+            "id": "/lifestyle/sports/golf/",
+            "url": "/lifestyle/sports/golf/",
+            "name": "Golf"
+          },
+          {
+            "id": "/lifestyle/sports/motor-sports/",
+            "url": "/lifestyle/sports/motor-sports/",
+            "name": "Motor Sports"
+          },
+          {
+            "id": "/lifestyle/sports/soccer/",
+            "url": "/lifestyle/sports/soccer/",
+            "name": "Soccer"
+          },
+          {
+            "id": "/lifestyle/sports/tennis/",
+            "url": "/lifestyle/sports/tennis/",
+            "name": "Tennis"
+          }
+        ]
+      },
+      {
+        "id": "/lifestyle/",
+        "url": "/lifestyle/",
+        "name": "Lifestyle",
+        "type": "section",
+        "children": [
+          {
+            "id": "/lifestyle/oddly-enough/",
+            "url": "/lifestyle/oddly-enough/",
+            "name": "Oddly Enough"
+          },
+          {
+            "id": "/lifestyle/science/",
+            "url": "/lifestyle/science/",
+            "name": "Science"
+          }
+        ]
+      },
+      {
+        "id": "/graphics/",
+        "url": "https://graphics.reuters.com/",
+        "name": "Graphics",
+        "type": "link"
+      },
+      {
+        "id": "/pictures/",
+        "url": "/pictures/",
+        "name": "Pictures",
+        "type": "section"
+      },
+      { "id": "/video/", "url": "/video/", "name": "Video", "type": "section" }
+    ],
+    "home_url": "/",
+    "search_url": "/site-search/",
+    "sign_in_url": "/signin/",
+    "sign_up_url": "/signup/",
+    "subscribe_url": "",
+    "my_account_url": "/myaccount/",
+    "my_view_url": "/myview/all",
+    "following_url": "/myview/following-feed",
+    "saved_url": "/myview/saved"
+  }
+]
diff --git a/src/components/SiteHeader/scss/_breakpoints.scss b/src/components/SiteHeader/scss/_breakpoints.scss
new file mode 100644
index 0000000..57266b1
--- /dev/null
+++ b/src/components/SiteHeader/scss/_breakpoints.scss
@@ -0,0 +1,79 @@
+// From FSC:
+// Our design layouts are based on 2 artboard sizes:
+// 375px for small screens and 1440px for desktop.
+
+// However, these are snapshots to inform the core layouts.
+// Some aspects of the design system adapt to breakpoints between these sizes.
+
+// Our design layouts therefore show the snapshots for mobile on the 375px artboard and wide on the 1440px artboard.
+
+// Note that if we refer only to desktop it means all layouts above 1023px, similarly mobile in general is below 1024px.
+
+// Note that the desktop breakpoint kicks-in at 1024px, which also accommodates iPad/tablet in landscape.
+// This is the last size before the layout adapts to the mobile view.
+
+$maxWidth: 1440px;
+
+@mixin for-small-mobile {
+  @media (max-width: 518px) {
+    @content;
+  }
+}
+
+@mixin for-mobile {
+  @media (max-width: 745px) {
+    @content;
+  }
+}
+
+@mixin for-tablet {
+  @media (min-width: 746px) and (max-width: 1023px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-up {
+  @media (min-width: 746px) {
+    @content;
+  }
+}
+
+@mixin for-tablet-down {
+  @media (max-width: 1023px) {
+    @content;
+  }
+}
+
+@mixin for-tight-desktop {
+  @media (min-width: 1024px) and (max-width: 1060px) {
+    @content;
+  }
+}
+
+@mixin for-desktop {
+  @media (min-width: 1024px) {
+    @content;
+  }
+}
+
+@mixin for-wide-desktop {
+  @media (min-width: 1300px) {
+    @content;
+  }
+}
+
+@mixin for-extra-wide-desktop {
+  @media (min-width: 1440px) {
+    @content;
+  }
+}
+
+@mixin above-max {
+  @media (min-width: $maxWidth) {
+    @content;
+  }
+}
+
+@mixin max-width {
+  max-width: $maxWidth;
+}
diff --git a/src/components/SiteHeader/scss/_colors.scss b/src/components/SiteHeader/scss/_colors.scss
new file mode 100644
index 0000000..1f731a5
--- /dev/null
+++ b/src/components/SiteHeader/scss/_colors.scss
@@ -0,0 +1,25 @@
+// Sheet of project colors
+$tr-orange: #fa6400;
+$tr-dark-orange: #dc4300;
+$tr-light-orange: #ffa100;
+$tr-dark-grey: #404040;
+$tr-medium-grey: #666666;
+$tr-light-grey: #afafaf;
+$tr-muted-grey: #d0d0d0;
+$tr-hover-background-grey: #f8f8f8;
+$tr-light-muted-grey: #f4f4f4;
+$tr-ultra-light-grey: #fafafa;
+$tr-dark-blue: #005da2;
+$tr-light-blue: #0099c4;
+$tr-muted-blue: #4386b9;
+$tr-lighter-blue: #7facce;
+$tr-superlight-blue: #e5eef5;
+$tr-dark-purple: #621f95;
+$tr-light-purple: #6e3ab7;
+$tr-dark-red: #a00000;
+$tr-light-red: #dc0a0a;
+$tr-dark-green: #387c2b;
+$tr-light-green: #77a22d;
+$black: #000;
+$white: #fff;
+$ad-placeholder: #ffb1b1;
diff --git a/src/components/SiteHeader/scss/_eases.scss b/src/components/SiteHeader/scss/_eases.scss
new file mode 100644
index 0000000..ae36571
--- /dev/null
+++ b/src/components/SiteHeader/scss/_eases.scss
@@ -0,0 +1,9 @@
+$principleDefaultEase: cubic-bezier(0.25, 0.1, 0.25, 1);
+$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
+$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$navContainerEase: cubic-bezier(0.25, 0.1, 0.25, 1);
+$rtvDefaultEase: cubic-bezier(0.165, 0.84, 0.44, 1);
diff --git a/src/components/SiteHeader/scss/_grids.scss b/src/components/SiteHeader/scss/_grids.scss
new file mode 100644
index 0000000..74ed066
--- /dev/null
+++ b/src/components/SiteHeader/scss/_grids.scss
@@ -0,0 +1,158 @@
+@use 'sass:math';
+
+@use '_breakpoints.scss' as *;
+
+@mixin spacing-single($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (math.div(32, 1440) * 100vw * $delta);
+    }
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      & {
+        #{$property}: (math.div(16, 375) * 100vw * $delta);
+      }
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (32px * $delta);
+      }
+    }
+  }
+}
+
+@mixin spacing-single-half($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (calc(16 / 1440) * 100vw * $delta);
+    }
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      & {
+        #{$property}: (math.div(8, 375) * 100vw * $delta);
+      }
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (16px * $delta);
+      }
+    }
+  }
+}
+
+@mixin spacing-single-34($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      & {
+        #{$property}: (math.div(12, 375) * 100vw * $delta);
+      }
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (24px * $delta);
+      }
+    }
+  }
+}
+
+@mixin spacing-150($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (math.div(48, 1440) * 100vw * $delta);
+    }
+  }
+
+  @include for-tablet-down {
+    @each $property in $properties {
+      & {
+        #{$property}: (math.div(24, 375) * 100vw * $delta);
+      }
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (48px * $delta);
+      }
+    }
+  }
+}
+
+@mixin spacing-75($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (math.div(24, 1440) * 100vw * $delta);
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (24px * $delta);
+      }
+    }
+  }
+}
+
+@mixin spacing-50($properties, $delta: 1) {
+  @each $property in $properties {
+    & {
+      #{$property}: (math.div(16, 1440) * 100vw * $delta);
+    }
+  }
+
+  @include above-max {
+    @each $property in $properties {
+      & {
+        #{$property}: (16px * $delta);
+      }
+    }
+  }
+}
+
+@mixin responsive-columns($columns, $size: 1fr) {
+  @content;
+
+  display: grid;
+  grid-template-columns: repeat($columns, $size);
+
+  // Desktop grid (all screens greater than or equal to 1024px)
+  @include spacing-single(grid-column-gap);
+
+  // Mobile grid (all screens up to and including 1023px)
+  @include for-tablet-down {
+    grid-template-columns: repeat(4, $size);
+  }
+}
+
+@mixin at-4-columns {
+  @include for-tablet-down {
+    @content;
+  }
+}
+
+@mixin above-4-columns {
+  @include for-desktop {
+    @content;
+  }
+}
diff --git a/src/components/SiteHeader/scss/_z-indexes.scss b/src/components/SiteHeader/scss/_z-indexes.scss
new file mode 100644
index 0000000..c3bb9cb
--- /dev/null
+++ b/src/components/SiteHeader/scss/_z-indexes.scss
@@ -0,0 +1,15 @@
+/*
+Several components utilize z-index, the CSS property that helps control layout by providing a third axis to arrange content. We utilize a default z-index scale that’s been designed to properly layer navigation, tooltips and popovers, modals, and more.
+These higher values start at an arbitrary number, high and specific enough to ideally avoid conflicts. We need a standard set of these across our layered components—tooltips, popovers, navbars, dropdowns, modals—so we can be reasonably consistent in the behaviors.
+To handle overlapping borders within components (e.g., buttons and inputs in input groups), we use low single digit z-index values of 1, 2, and 3 for default, hover, and active states. On hover/focus/active, we bring a particular element to the forefront with a higher z-index value to show their border over the sibling elements.
+*/
+
+$zindex-dropdown: 1000;
+$zindex-sticky: 1020;
+$zindex-fixed: 1030;
+$zindex-modal-backdrop: 1040;
+$zindex-offcanvas: 1050;
+$zindex-modal: 1060;
+$zindex-popover: 1070;
+$zindex-tooltip: 1080;
+$zindex-close-button: 1090;
diff --git a/src/components/SiteHeader/svgs/Close.svelte b/src/components/SiteHeader/svgs/Close.svelte
new file mode 100644
index 0000000..0a6d359
--- /dev/null
+++ b/src/components/SiteHeader/svgs/Close.svelte
@@ -0,0 +1,18 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  width="15"
+  height="15"
+  xmlns="http://www.w3.org/2000/svg"
+  ><path
+    d="M.322.313a1.056 1.056 0 0 1 1.5 0l5.679 5.53L13.18.313a1.056 1.056 0 0 1 1.5 0 .993.993 0 0 1-.001 1.461l-5.88 5.725 5.88 5.727c.397.388.426.956.085 1.369l-.086.092a1.056 1.056 0 0 1-1.5 0l-5.679-5.53-5.679 5.53a1.056 1.056 0 0 1-1.5 0 .993.993 0 0 1 .001-1.461L6.2 7.5.322 1.774C-.076 1.386-.105.818.236.405L.322.313Z"
+    fill-rule="evenodd"
+  ></path></svg
+>
+
+<style lang="scss">
+  @use './../scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteHeader/svgs/Menu.svelte b/src/components/SiteHeader/svgs/Menu.svelte
new file mode 100644
index 0000000..924657c
--- /dev/null
+++ b/src/components/SiteHeader/svgs/Menu.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  interface Props {
+    width?: number;
+  }
+
+  let { width = 20 }: Props = $props();
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 12"
+  aria-hidden="true"
+  focusable="false"
+  style="width: {width}px;"
+>
+  <path
+    d="M14.8571429,9.524 C15.3142857,9.524 15.6188571,9.8285714 15.6188571,10.2857143 C15.6188571,10.7428571 15.3142857,11.0474286 14.8571429,11.0474286 L1.14285714,11.0474286 C0.68571429,11.0474286 0.38114286,10.7428571 0.38114286,10.2857143 C0.38114286,9.8285714 0.68571429,9.524 1.14285714,9.524 L14.8571429,9.524 Z M14.8571429,4.9525714 C15.3142857,4.9525714 15.6188571,5.2571429 15.6188571,5.7142857 C15.6188571,6.1714286 15.3142857,6.476 14.8571429,6.476 L1.14285714,6.476 C0.68571429,6.476 0.38114286,6.1714286 0.38114286,5.7142857 C0.38114286,5.2571429 0.68571429,4.9525714 1.14285714,4.9525714 L14.8571429,4.9525714 Z M14.8571429,0.38114286 C15.3142857,0.38114286 15.6188571,0.68571429 15.6188571,1.14285714 C15.6188571,1.6 15.3142857,1.90457143 14.8571429,1.90457143 L1.14285714,1.90457143 C0.68571429,1.90457143 0.38114286,1.6 0.38114286,1.14285714 C0.38114286,0.68571429 0.68571429,0.38114286 1.14285714,0.38114286 L14.8571429,0.38114286 Z"
+  ></path>
+</svg>
+
+<style lang="scss">
+  @use './../scss/_colors.scss' as *;
+  svg {
+    fill: var(--nav-primary, var(--tr-dark-grey));
+  }
+</style>
diff --git a/src/components/SiteHeadline/SiteHeadline.mdx b/src/components/SiteHeadline/SiteHeadline.mdx
new file mode 100644
index 0000000..da70943
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.mdx
@@ -0,0 +1,69 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as SiteHeadlineStories from './SiteHeadline.stories.svelte';
+
+<Meta of={SiteHeadlineStories} />
+
+# SiteHeadline
+
+The `SiteHeadline` component creates a simplified Reuters Graphics headline, loosely modelled off the Reuters.com styles.
+
+Styles for this headline are intentionally restricted. It is meant to serve as a unifying style for quick-turnaround breaking news pages.
+
+```svelte
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+</script>
+
+<SiteHeadline
+  hed="Ukraine makes suprising gains in swift counteroffensive"
+  authors={[
+    'Dea Bankova',
+    'Michael Ovaska',
+    'Samuel Granados',
+    'Prasanta Kumar Dutta',
+  ]}
+  publishTime="2021-09-12T00:00:00.000Z"
+  updateTime="2021-09-12T12:57:00.000Z"
+/>
+```
+
+<Canvas of={SiteHeadlineStories.Demo} />
+
+## Using with ArchieML docs
+
+With the graphics kit, you'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+section: Global News # Optional
+sectionUrl: https://www.reuters.com/graphics/ # Optional
+hed: A beautiful page
+[authors]
+* Samuel Granados
+* Dea Bankova
+[]
+published: 2022-09-12T08:30:00.000Z
+updated:
+```
+
+... which you'll pass to the `SiteHeadline` component.
+
+```svelte
+<!-- App.svelte -->
+<script>
+  import { SiteHeadline } from '@reuters-graphics/graphics-components';
+  import content from '$locales/en/content.json';
+</script>
+
+<SiteHeadline
+  section={content.section}
+  sectionUrl={content.sectionUrl}
+  hed={content.hed}
+  authors={content.authors.split(',')}
+  publishTime={content.publishTime}
+  updateTime={content.updatTime}
+/>
+```
+
+<Canvas of={SiteHeadlineStories.ArchieML} />
diff --git a/src/components/SiteHeadline/SiteHeadline.stories.svelte b/src/components/SiteHeadline/SiteHeadline.stories.svelte
new file mode 100644
index 0000000..0988b41
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.stories.svelte
@@ -0,0 +1,49 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import SiteHeadline from './SiteHeadline.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Text elements/SiteHeadline',
+    component: SiteHeadline,
+    argTypes: {
+      hedSize: {
+        control: 'select',
+        options: ['small', 'normal', 'big'],
+      },
+    },
+  });
+</script>
+
+<script>
+  const content = {
+    section: 'Global News',
+    hed: 'A beautiful page',
+    authors: 'Samuel Granados, Dea Bankova',
+    published: '2022-09-12T08:30:00.000Z',
+    updated: '',
+  };
+</script>
+
+<Story
+  name="Demo"
+  args={{
+    hed: 'Ukraine makes surprising gains in 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="ArchieML" tags={['!autodocs', '!dev']}>
+  <SiteHeadline
+    hed={content.hed}
+    section={content.section}
+    authors={content.authors.split(',')}
+    publishTime={content.published}
+  />
+</Story>
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
new file mode 100644
index 0000000..f1d5cc1
--- /dev/null
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -0,0 +1,86 @@
+<!-- @component `SiteHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-siteheadline--docs) -->
+<script lang="ts">
+  import Block from '../Block/Block.svelte';
+  import Byline from '../Byline/Byline.svelte';
+
+  /**
+   * Used to set headline class fluid size from text-2xl to text-4xl
+   */
+  type HeadlineSize = 'small' | 'normal' | 'big';
+
+  interface Props {
+    /** Headline */
+    hed?: string;
+    /** Headline size */
+    hedSize?: HeadlineSize;
+    /** Section title */
+    section?: string;
+    /** Section URL, parsed as a string. Set to blank to remove link */
+    sectionUrl?: 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;
+    /** Add an id to to target with custom CSS */
+    id?: string;
+    /** Add extra classes to target with custom CSS */
+    class?: string;
+    /**
+     * Custom function that returns an author page URL.
+     */
+    getAuthorPage?: (author: string) => string;
+  }
+
+  let {
+    hed,
+    hedSize = 'normal',
+    section = 'Graphics',
+    sectionUrl = 'https://graphics.reuters.com',
+    authors,
+    publishTime,
+    updateTime = '',
+    id = '',
+    class: cls = '',
+    getAuthorPage,
+  }: Props = $props();
+
+  // Set the headline text size class based on the `hedSize` prop
+  let hedClass = $derived.by(() => {
+    switch (hedSize) {
+      case 'big':
+        return 'text-4xl';
+      case 'small':
+        return 'text-2xl';
+      default:
+        return 'text-3xl';
+    }
+  });
+</script>
+
+<Block {id} class="headline-container fmt-7 fmb-6 {cls}" width="normal">
+  <header class="headline">
+    <div class="title">
+      {#if section}
+        <p
+          class="section-title mb-0 font-subhed text-xs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
+        >
+          {#if sectionUrl}
+            <a class="no-underline !text-secondary" href={sectionUrl}
+              >{section}</a
+            >
+          {:else}
+            {section}
+          {/if}
+        </p>
+      {/if}
+      {#if hed}
+        <h1 class="fmt-1 fmb-3 {hedClass}">
+          {hed}
+        </h1>
+      {/if}
+    </div>
+    <Byline {authors} {publishTime} {updateTime} {getAuthorPage} />
+  </header>
+</Block>
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 0cd90bb..c5b534f 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -292,7 +292,7 @@
 </Block>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   .table {
     overflow-x: auto;
diff --git a/src/components/Table/components/Pagination.svelte b/src/components/Table/components/Pagination.svelte
index 10f3443..fad770a 100644
--- a/src/components/Table/components/Pagination.svelte
+++ b/src/components/Table/components/Pagination.svelte
@@ -69,7 +69,7 @@
 </nav>
 
 <style lang="scss">
-  @use '../../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   nav.pagination {
     display: flex;
diff --git a/src/components/Theme/@types/component.ts b/src/components/Theme/@types/component.ts
new file mode 100644
index 0000000..74de2bd
--- /dev/null
+++ b/src/components/Theme/@types/component.ts
@@ -0,0 +1,54 @@
+export interface Colour {
+  background: string;
+  'text-primary': string;
+  'text-secondary': string;
+  accent: string;
+  'brand-logo': string;
+  'brand-rules': string;
+  'brand-shadow': string;
+}
+
+export interface FontFamily {
+  serif: string;
+  'sans-serif': string;
+  monospace: string;
+  hed: string;
+  subhed: string;
+  body: string;
+  note: string;
+}
+
+export interface FontSize {
+  xxs: string;
+  xs: string;
+  sm: string;
+  base: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+  '4xl': string;
+  '5xl': string;
+  '6xl': string;
+}
+
+export interface Font {
+  family: FontFamily;
+  size: FontSize;
+}
+
+export interface CustomFont {
+  family?: Partial<FontFamily>;
+  size?: Partial<FontSize>;
+}
+
+export interface ThemeConfig {
+  colour: Colour;
+  font: Font;
+}
+
+export interface CustomThemeConfig {
+  colour?: Partial<Colour>;
+  font?: Partial<CustomFont>;
+  [customProperty: string]: unknown;
+}
diff --git a/src/components/Theme/Theme.mdx b/src/components/Theme/Theme.mdx
new file mode 100644
index 0000000..c821f5c
--- /dev/null
+++ b/src/components/Theme/Theme.mdx
@@ -0,0 +1,164 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ThemeStories from './Theme.stories.svelte';
+
+<Meta of={ThemeStories} />
+
+# Theme
+
+The `Theme` component wraps your page content and uses [CSS variables](../?path=/docs/scss-css-variables--page) to set major colour and typography styles for your page. All the components from this library that are added to your page will use the CSS variables set by `Theme`.
+
+Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to test custom themes.
+
+```svelte
+<script>
+  import { Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme base="light">
+  <!-- Page content, now styled according to your theme! -->
+</Theme>
+```
+
+> In the graphics kit, the `Theme` is set in both `pages/+page.svelte` and in `App.svelte`.
+
+<Canvas of={ThemeStories.Demo} />
+
+## Custom theme
+
+You can customise your page's theme in two ways:
+
+- Choose the `base` theme, either `light` or `dark`
+- Pass a custom theme object to the `theme` prop, which will override styles in the `base` theme.
+
+Use the [theme builder](?path=/docs/components-theming-theme-builder--docs) to see what properties you can customise.
+
+```svelte
+<Theme
+  base="dark"
+  theme={{
+    colour: { accent: 'var(--tr-light-orange)' },
+    font: { family: { hed: '"Newsreader Text", serif' } },
+  }}
+>
+  <!-- Page content -->
+</Theme>
+```
+
+> **Note:** The `Theme` component only styles child components or elements, so if you're changing the background colour of your page, make sure to also set the `background-color` on your `body` element in global SCSS.
+>
+> ```scss
+> // global.scss
+> body {
+>   background-color: #2e3440;
+> }
+> ```
+
+<Canvas of={ThemeStories.CustomTheme} />
+
+## Custom font
+
+To use typefaces other than the defaults provided by the graphics kit, download the font files from services such as [Google Fonts](https://fonts.google.com/) or [Adobe Typekit](https://fonts.adobe.com/). Make a folder called `fonts` inside `statics/` and put the font file -- for example, `IndieFlower-Regular.ttf` downloaded from [Google Fonts](https://fonts.google.com/share?selection.family=Indie+Flower) -- in `statics/fonts/`.
+
+Then, declare it as a `@font-face` in `global.scss`:
+
+```scss
+/* global.scss in the graphics kit */
+@font-face {
+  // If you're unsure of the font-family name,
+  // click on "Get embed code" on the Google font page and check the CSS class.
+  font-family: 'Indie Flower';
+
+  // Path to the font file. Change format depending on the font file type.
+  src: url('/fonts/IndieFlower-Regular.ttf') format('truetype');
+  font-weight: normal; // Optional
+  font-style: normal; // Optional
+}
+```
+
+Finally, pass the font to the appropriate text type in `Theme`:
+
+```svelte
+<Theme
+  base="light"
+  theme={{
+    font: {
+      family: {
+        hed: 'IndieFlower', // Set header text font to `IndieFlower`
+        body: 'IndieFlower', // Set body text font to `IndieFlower`
+        // etc...
+      },
+    },
+  }}
+>
+  <!-- Page content -->
+</Theme>
+```
+
+<Canvas of={ThemeStories.CustomFont} />
+
+## Background patterns
+
+To use a background pattern or image, set the background colour property in `Theme` to `transparent`:
+
+```svelte
+<Theme
+  base="dark"
+  theme={{
+    colour: { background: 'transparent' },
+  }}
+>
+  <!-- Page content -->
+</Theme>
+```
+
+Then in `global.scss`, set your image, which should be stored in `statics/images/`, as `background-image`:
+
+```scss
+/* global.scss */
+body {
+  background-image: url('/images/my-pattern.png');
+}
+```
+
+You may also want to override the background on the header nav if it conflicts with your background, especially the dropdown menu:
+
+```scss
+/* global.scss
+Main nav container */
+.nav-container .inner {
+  background: darkblue !important;
+  /* Dropdown menu */
+  .dropdown {
+    background: darkblue !important;
+  }
+}
+/* Mobile nav overlay */
+header + .overlay {
+  background: darkblue !important;
+}
+```
+
+<Canvas of={ThemeStories.BackgroundPatterns} />
+
+## Inheritance
+
+Styles that use `Theme`'s CSS variables will always use those set by the nearest parent `Theme`. That lets you change the theme for parts of your page by simply wrapping that bit in a new `Theme` with different styles.
+
+The demo below shows a more complex example of nesting themes, but more likely you'll so something like this:
+
+```svelte
+<script>
+  import { Theme } from '@reuters-graphics/graphics-components';
+</script>
+
+<Theme>
+  <!-- Page content styled with the default light theme. -->
+  <Theme theme={{ colour: { background: 'lightgrey' } }}>
+    <!-- A darker background for this section. -->
+  </Theme>
+  <!-- Back to normal here... -->
+</Theme>
+```
+
+<Canvas of={ThemeStories.Inheritance} />
diff --git a/src/components/Theme/Theme.stories.svelte b/src/components/Theme/Theme.stories.svelte
new file mode 100644
index 0000000..554fb83
--- /dev/null
+++ b/src/components/Theme/Theme.stories.svelte
@@ -0,0 +1,150 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Theme, { themes } from './Theme.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Theming/Theme',
+    component: Theme,
+    argTypes: {
+      base: {
+        control: 'select',
+        options: ['light', 'dark'],
+      },
+      theme: {
+        control: { expanded: true },
+      },
+    },
+  });
+</script>
+
+<script lang="ts">
+  import ThemedPage from './demo/ThemedPage.svelte';
+  import SiteHeader from '../SiteHeader/SiteHeader.svelte';
+  import Headline from './../Headline/Headline.svelte';
+  import BodyText from '../BodyText/BodyText.svelte';
+</script>
+
+<Story name="Demo">
+  <div class="reset-article">
+    <Theme theme={themes.light} base="light">
+      <ThemedPage />
+    </Theme>
+  </div>
+</Story>
+
+<Story name="Custom theme" exportName="CustomTheme">
+  <Theme
+    base="dark"
+    theme={{
+      colour: { accent: 'var(--tr-light-orange)' },
+      font: { family: { hed: '"Newsreader Text", serif' } },
+    }}
+  >
+    <ThemedPage />
+  </Theme>
+</Story>
+
+<Story name="Custom font" exportName="CustomFont">
+  <Theme
+    base="light"
+    theme={{
+      font: { family: { hed: 'Indie Flower', body: 'Indie Flower' } },
+    }}
+  >
+    <div class="gfont">
+      <Headline
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        section={'Global news'}
+      />
+      <BodyText
+        text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
+      />
+    </div>
+  </Theme>
+</Story>
+
+<Story name="Background patterns" exportName="BackgroundPatterns">
+  <div id="pattern-bg">
+    <Theme
+      base="dark"
+      theme={{
+        colour: { background: 'transparent' },
+      }}
+    >
+      <SiteHeader />
+      <Headline
+        hed={'Reuters Graphics Interactive'}
+        dek={'The beginning of a beautiful page'}
+        section={'Global news'}
+      />
+      <BodyText
+        text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
+      />
+    </Theme>
+  </div>
+</Story>
+
+<Story name="Inheritance" tags={['!autodocs', '!dev']}>
+  <Theme theme={themes.light}>
+    <div class="themed">
+      <p>Theme</p>
+      <Theme theme={themes.dark}>
+        <div class="themed">
+          <p>Sub-theme</p>
+          <Theme theme={themes.light}>
+            <div class="themed">
+              <p>Sub-sub</p>
+            </div>
+          </Theme>
+          <Theme
+            theme={{
+              colour: { background: 'steelblue', 'text-primary': '#fff' },
+              font: { family: { note: '"Newsreader Text", serif' } },
+            }}
+            base="dark"
+          >
+            <div class="themed">
+              <p>Sub-sub sibling</p>
+            </div>
+          </Theme>
+        </div>
+      </Theme>
+    </div>
+  </Theme>
+</Story>
+
+<style lang="scss">
+  @import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
+
+  div.themed {
+    background-color: var(--theme-colour-background);
+    padding: 2rem;
+    width: 80%;
+    margin: 1rem auto;
+    display: flex;
+    justify-content: center;
+    flex-flow: column;
+    border: 1px solid var(--theme-colour-text-primary);
+    border-radius: 20px;
+    p {
+      font-family: var(--theme-font-family-note);
+      color: var(--theme-colour-text-primary);
+      text-align: center;
+      margin: 0;
+      display: block;
+      width: 100%;
+    }
+  }
+
+  div#pattern-bg {
+    background-image: url(https://res.cloudinary.com/practicaldev/image/fetch/s--BuPz-p40--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nphrgz8yfnjylrwfr0yl.png);
+
+    :global(.nav-container .inner) {
+      background: #161019 !important;
+    }
+    :global(.nav-container .dropdown) {
+      background: #161019 !important;
+    }
+  }
+</style>
diff --git a/src/components/Theme/Theme.svelte b/src/components/Theme/Theme.svelte
new file mode 100644
index 0000000..dbea6cb
--- /dev/null
+++ b/src/components/Theme/Theme.svelte
@@ -0,0 +1,55 @@
+<!-- @component `Theme` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-theming-theme--docs) -->
+<script module lang="ts">
+  import light from './themes/light.js';
+  import dark from './themes/dark.js';
+  /**
+   * Pre-made themes you can import.
+   */
+  export const themes = { light, dark };
+</script>
+
+<script lang="ts">
+  // Utils
+  import flatten from './utils/flatten.js';
+  import mergeThemes from './utils/merge.js';
+
+  // Types
+  import type { CustomThemeConfig, ThemeConfig } from './@types/component';
+  import type { Snippet } from 'svelte';
+  type Base = 'light' | 'dark';
+
+  interface Props {
+    /** Custom theme object. Can be a partial theme with just
+     * what you want to change.
+     */
+    theme?: CustomThemeConfig | ThemeConfig;
+    /**
+     * Base theme is one of `light` or `dark` and will be merged
+     * with your custom theme to fill in any values you don't
+     * explicitly set.
+     */
+    base?: Base;
+    /** Content wrapped inside `Theme` */
+    children: Snippet;
+  }
+
+  let { theme = {}, base = 'light', children }: Props = $props();
+
+  let mergedTheme = $derived(
+    mergeThemes({}, themes[base] || themes.light, theme)
+  );
+
+  let cssVariables = $derived(
+    Object.entries(flatten({ theme: mergedTheme }))
+      .map(([key, value]) => `--${key}: ${value};`)
+      .join(' ')
+  );
+</script>
+
+<div class="theme" style={cssVariables} style:display="contents">
+  <!-- Clients can override the theme above by attaching custom properties to this element. -->
+  <div class="theme-client-override" style="display: contents;">
+    <!-- Themed content -->
+    {@render children()}
+  </div>
+</div>
diff --git a/src/components/Theme/demo/ThemedPage.svelte b/src/components/Theme/demo/ThemedPage.svelte
new file mode 100644
index 0000000..57c3236
--- /dev/null
+++ b/src/components/Theme/demo/ThemedPage.svelte
@@ -0,0 +1,36 @@
+<script>
+  import Article from '../../Article/Article.svelte';
+  import Headline from '../../Headline/Headline.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import GraphicBlock from '../../GraphicBlock/GraphicBlock.svelte';
+</script>
+
+<Article>
+  <Headline
+    hed={'Reuters Graphics Interactive'}
+    dek={'The beginning of a beautiful page'}
+    section={'Global news'}
+    authors={['Jon McClure', 'Prasanta Kumar Dutta']}
+    publishTime={new Date('2021-09-12').toISOString()}
+  />
+  <BodyText
+    text={`Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.`}
+  />
+  <GraphicBlock
+    title="Steak tar-tar"
+    description="Andouille pork loin cow buffalo pork chop shoulder."
+    notes="Source: U.S. FDA"
+  >
+    <div class="fake-graphic"></div>
+  </GraphicBlock>
+  <BodyText
+    text={'Bacon ipsum dolor amet cupim porchetta chuck buffalo sirloin beef. Biltong ham brisket tenderloin hamburger doner.'}
+  />
+</Article>
+
+<style>
+  div.fake-graphic {
+    height: 200px;
+    border: 1px solid var(--theme-colour-accent);
+  }
+</style>
diff --git a/src/components/Theme/themes/common.js b/src/components/Theme/themes/common.js
new file mode 100644
index 0000000..65af9e2
--- /dev/null
+++ b/src/components/Theme/themes/common.js
@@ -0,0 +1,32 @@
+/** @type {Omit<import('../@types/component').ThemeConfig, "colour">} */
+/* Generated from
+https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.125&maxFontSize=21&maxWidth=1280&maxRatio=1.25&steps=xxs%2Cxs%2Csm%2Cbase%2Clg%2Cxl%2C2xl%2C3xl%2C4xl%2C5xl%2C6xl&baseStep=base&prefix=&decimals=2&useRems=on&remValue=16&previewFont=Noto+Sans&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=0
+*/
+
+export default {
+  font: {
+    family: {
+      serif: '"Newsreader Text", serif',
+      'sans-serif': 'Knowledge, sans-serif',
+      monospace:
+        '"Droid Sans Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      hed: 'var(--theme-font-family-sans-serif)',
+      subhed: 'var(--theme-font-family-sans-serif)',
+      body: 'var(--theme-font-family-serif)',
+      note: 'var(--theme-font-family-sans-serif)',
+    },
+    size: {
+      xxs: 'clamp(0.79rem, -0.2vw + 0.83rem, 0.67rem)',
+      xs: 'clamp(0.89rem, -0.08vw + 0.91rem, 0.84rem)',
+      sm: 'clamp(1rem, 0.08vw + 0.98rem, 1.05rem)',
+      base: 'clamp(1.13rem, 0.31vw + 1.06rem, 1.31rem)',
+      lg: 'clamp(1.27rem, 0.63vw + 1.14rem, 1.64rem)',
+      xl: 'clamp(1.42rem, 1.04vw + 1.21rem, 2.05rem)',
+      '2xl': 'clamp(1.6rem, 1.6vw + 1.28rem, 2.56rem)',
+      '3xl': 'clamp(1.8rem, 2.34vw + 1.33rem, 3.2rem)',
+      '4xl': 'clamp(2.03rem, 3.3vw + 1.37rem, 4.01rem)',
+      '5xl': 'clamp(2.28rem, 4.54vw + 1.37rem, 5.01rem)',
+      '6xl': 'clamp(2.57rem, 6.15vw + 1.33rem, 6.26rem)',
+    },
+  },
+};
diff --git a/src/components/Theme/themes/dark.js b/src/components/Theme/themes/dark.js
new file mode 100644
index 0000000..f5d6a33
--- /dev/null
+++ b/src/components/Theme/themes/dark.js
@@ -0,0 +1,15 @@
+import common from './common.js';
+
+/** @type {import('../@types/component').ThemeConfig} */
+export default {
+  ...common,
+  colour: {
+    background: '#2e3440',
+    'text-primary': '#ffffff',
+    'text-secondary': 'rgb(255 255 255 / 60%)',
+    accent: '#ef3c2a',
+    'brand-logo': '#ffffff',
+    'brand-rules': 'rgb(255 255 255 / 25%)',
+    'brand-shadow': 'rgb(255 255 255 / 10%)',
+  },
+};
diff --git a/src/components/Theme/themes/light.js b/src/components/Theme/themes/light.js
new file mode 100644
index 0000000..5749c7b
--- /dev/null
+++ b/src/components/Theme/themes/light.js
@@ -0,0 +1,15 @@
+import common from './common.js';
+
+/** @type {import('../@types/component').ThemeConfig} */
+export default {
+  ...common,
+  colour: {
+    background: '#ffffff',
+    'text-primary': '#404040',
+    'text-secondary': '#666666',
+    accent: ' #d64000',
+    'brand-logo': '#d64000',
+    'brand-rules': '#d0d0d0',
+    'brand-shadow': 'rgba(64, 64, 64, .08)',
+  },
+};
diff --git a/src/components/Theme/utils/flatten.ts b/src/components/Theme/utils/flatten.ts
new file mode 100644
index 0000000..ae84fcf
--- /dev/null
+++ b/src/components/Theme/utils/flatten.ts
@@ -0,0 +1,46 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isBuffer(obj: any): boolean {
+  return (
+    obj &&
+    obj.constructor &&
+    typeof obj.constructor.isBuffer === 'function' &&
+    obj.constructor.isBuffer(obj)
+  );
+}
+
+const transformKey = (key: string): string => key.replace(/[^a-z0-9-]/gi, '');
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function flatten<T extends Record<string, any>>(target: T) {
+  const delimiter = '-';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const output: Record<string, any> = {};
+
+  function step(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    object: Record<string, any>,
+    prev?: string,
+    currentDepth = 1
+  ): void {
+    Object.keys(object).forEach(function (key) {
+      const value = object[key];
+      const isArray = Array.isArray(value);
+      const type = Object.prototype.toString.call(value);
+      const isbuffer = isBuffer(value);
+      const isObject = type === '[object Object]' || type === '[object Array]';
+
+      const newKey =
+        prev ? prev + delimiter + transformKey(key) : transformKey(key);
+
+      if (!isArray && !isbuffer && isObject && Object.keys(value).length) {
+        return step(value, newKey, currentDepth + 1);
+      }
+
+      output[newKey] = value;
+    });
+  }
+
+  step(target);
+
+  return output;
+}
diff --git a/src/components/Theme/utils/merge.ts b/src/components/Theme/utils/merge.ts
new file mode 100644
index 0000000..7a90c23
--- /dev/null
+++ b/src/components/Theme/utils/merge.ts
@@ -0,0 +1,31 @@
+import type { ThemeConfig, CustomThemeConfig } from '../@types/component';
+
+function isObject(item: unknown): item is Record<string, unknown> {
+  return item !== null && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Deep merges theme objects.
+ */
+export default function merge<T extends Record<string, unknown>>(
+  target: T,
+  ...sources: (ThemeConfig | CustomThemeConfig)[]
+): T {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        merge(
+          target[key] as Record<string, unknown>,
+          source[key] as Record<string, unknown>
+        );
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return merge(target, ...sources);
+}
diff --git a/src/components/ToolsHeader/ToolsHeader.mdx b/src/components/ToolsHeader/ToolsHeader.mdx
new file mode 100644
index 0000000..1247302
--- /dev/null
+++ b/src/components/ToolsHeader/ToolsHeader.mdx
@@ -0,0 +1,23 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ToolsHeaderStories from './ToolsHeader.stories.svelte';
+
+<Meta of={ToolsHeaderStories} />
+
+# ToolsHeader
+
+The `ToolsHeader` component adds a header with the Reuters Graphics logo for internal tooling sites.
+
+> **Note:** Don't use this component for public pages.
+
+```svelte
+<script>
+  import { ToolsHeader } from '@reuters-graphics/graphics-components';
+</script>
+
+<ToolsHeader>
+  <!-- Anything else goes to the right of the logo -->
+</ToolsHeader>
+```
+
+<Canvas of={ToolsHeaderStories.Demo} />
diff --git a/src/components/ToolsHeader/ToolsHeader.stories.svelte b/src/components/ToolsHeader/ToolsHeader.stories.svelte
new file mode 100644
index 0000000..1c46b89
--- /dev/null
+++ b/src/components/ToolsHeader/ToolsHeader.stories.svelte
@@ -0,0 +1,22 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ToolsHeader from './ToolsHeader.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Page furniture/ToolsHeader',
+    component: ToolsHeader,
+  });
+</script>
+
+<Story name="Demo" tags={['!autodocs', '!dev']}>
+  <div>
+    <ToolsHeader />
+  </div>
+</Story>
+
+<style>
+  div {
+    width: calc(100% + 30px);
+    margin-inline-start: -15px;
+  }
+</style>
diff --git a/src/components/ToolsHeader/ToolsHeader.svelte b/src/components/ToolsHeader/ToolsHeader.svelte
new file mode 100644
index 0000000..2d68b00
--- /dev/null
+++ b/src/components/ToolsHeader/ToolsHeader.svelte
@@ -0,0 +1,96 @@
+<!-- @component `ToolsHeader` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-toolsheader--docs) -->
+<script lang="ts">
+  import ReutersGraphicsLogo from '../ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** Snippet content */
+    children?: Snippet;
+
+    /** ID of the header container */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+    /**
+     * Make the header stick when user scrolls.
+     */
+    sticky?: boolean;
+    /**
+     * Background CSS
+     */
+    background?: string;
+    /**
+     * Border bottom CSS
+     */
+    borderBottom?: string;
+    /**
+     * Colour props passed to `ReutersGraphicsLogo` component.
+     */
+    logoProps?: {
+      logoColour?: string;
+      textColor?: string;
+    };
+    /**
+     * Link the logo points to.
+     */
+    homeLink?: string;
+  }
+
+  let {
+    children,
+    id = '',
+    class: cls = '',
+    sticky = false,
+    background = 'transparent',
+    borderBottom = '1px solid #dedede',
+    logoProps = { logoColour: '#404040' },
+    homeLink = '/',
+  }: Props = $props();
+</script>
+
+<header
+  {id}
+  class={cls}
+  class:sticky
+  style:background
+  style:border-bottom={borderBottom}
+>
+  <div class="logo-container">
+    <a href={homeLink}>
+      <ReutersGraphicsLogo {...{ ...logoProps, ...{ width: '100%' } }} />
+    </a>
+  </div>
+
+  <!-- Any additional content -->
+  {#if children}
+    <div class="menu-items-container">
+      {@render children()}
+    </div>
+  {/if}
+</header>
+
+<style lang="scss">
+  header {
+    padding: 10px 15px;
+    display: flex;
+    gap: 15px;
+    &.sticky {
+      position: sticky;
+      top: 0;
+    }
+    div.logo-container {
+      width: 250px;
+      display: flex;
+      align-items: center;
+      @media (max-width: 1200px) {
+        width: 200px;
+      }
+    }
+    div.menu-items-container {
+      width: calc(100% - 265px);
+      @media (max-width: 1200px) {
+        width: calc(100% - 215px);
+      }
+    }
+  }
+</style>
diff --git a/src/components/Video/Video.stories.svelte b/src/components/Video/Video.stories.svelte
index 90705f4..2ce5f2a 100644
--- a/src/components/Video/Video.stories.svelte
+++ b/src/components/Video/Video.stories.svelte
@@ -88,7 +88,7 @@
 </Story>
 
 <style lang="scss">
-  @use '../../scss/mixins' as mixins;
+  @use 'mixins' as mixins;
 
   p.notes {
     @include mixins.body-note;
diff --git a/src/components/Visible/Visible.mdx b/src/components/Visible/Visible.mdx
new file mode 100644
index 0000000..bb5d2bc
--- /dev/null
+++ b/src/components/Visible/Visible.mdx
@@ -0,0 +1,34 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as VisibleStories from './Visible.stories.svelte';
+
+<Meta of={VisibleStories} />
+
+# Visible
+
+The `Visible` component wraps around other components or HTML elements and uses the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to determine if they are visible on the page.
+
+This is useful for lazy loading elements, especially expensive media files or components that fetch lots of data. You can also use it trigger animations or play media once a reader scrolls a component into view.
+
+By default, `visible` will switch between `false` and `true` whenever the element is in our out of view. To trigger this just once, set the prop `once` to `true`. This is useful for loading expensive media when they first come into view and then keeping them around once they're loaded.
+
+> **Note:** Don't use this for content that's "above the fold" at the top of the page. That'll just slow down the first load of important visible content.
+
+```svelte
+<script>
+  import { Visible } from '@reuters-graphics/graphics-components';
+</script>
+
+<!-- Optionally set your own `top`, `bottom`, `right` and `left` values with `px` or `%` units -->
+<Visible top="10px">
+  {#snippet children(visible)}
+    {#if visible}
+      <p>Visible!</p>
+    {:else}
+      <p>Not yet visible.</p>
+    {/if}
+  {/snippet}
+</Visible>
+```
+
+<Canvas of={VisibleStories.Demo} />
diff --git a/src/components/Visible/Visible.stories.svelte b/src/components/Visible/Visible.stories.svelte
new file mode 100644
index 0000000..cefa60d
--- /dev/null
+++ b/src/components/Visible/Visible.stories.svelte
@@ -0,0 +1,15 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+
+  import Visible from './Visible.svelte';
+  import VisibleDemo from './demo/VisibleDemo.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/Utilities/Visible',
+    component: Visible,
+  });
+</script>
+
+<Story name="Demo">
+  <VisibleDemo />
+</Story>
diff --git a/src/components/Visible/Visible.svelte b/src/components/Visible/Visible.svelte
new file mode 100644
index 0000000..b95bcc6
--- /dev/null
+++ b/src/components/Visible/Visible.svelte
@@ -0,0 +1,71 @@
+<!-- @component `Visible` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-visible--docs) -->
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte';
+
+  interface Props {
+    /**
+     * Whether to change visibility just once.
+     *
+     * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
+     */
+    once?: boolean;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    top?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    bottom?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    left?: string;
+    /** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right` with units. Units must be  `px` or other [absolute lengths units](https://arc.net/l/quote/jkukcxqq), or `%`. */
+    right?: string;
+    /** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
+    threshold?: number;
+    children?: Snippet<[boolean]>;
+  }
+
+  let {
+    once = false,
+    top = '0px',
+    bottom = '0px',
+    left = '0px',
+    right = '0px',
+    threshold = 0,
+    children,
+  }: Props = $props();
+
+  let visible = $state(false);
+  let container: HTMLElement | undefined = $state(undefined);
+
+  onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+      const rootMargin = `${bottom} ${left} ${top} ${right}`;
+
+      const observer = new IntersectionObserver(
+        (entries) => {
+          visible = entries[0].isIntersecting;
+          if (visible && once && container) {
+            observer.unobserve(container);
+          }
+        },
+        {
+          rootMargin,
+          threshold,
+        }
+      );
+      if (container) observer.observe(container);
+      return () => {
+        if (container) observer.unobserve(container);
+      };
+    }
+  });
+</script>
+
+<div
+  bind:this={container}
+  class="visibility-tracker"
+  class:visible
+  class:not-visible={!visible}
+>
+  {#if children}
+    {@render children(visible)}
+  {/if}
+</div>
diff --git a/src/components/Visible/demo/VisibleDemo.svelte b/src/components/Visible/demo/VisibleDemo.svelte
new file mode 100644
index 0000000..02f65c7
--- /dev/null
+++ b/src/components/Visible/demo/VisibleDemo.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  import Visible from '../Visible.svelte';
+  import BodyText from '../../BodyText/BodyText.svelte';
+  import Block from '../../Block/Block.svelte';
+  import FeaturePhoto from '../../FeaturePhoto/FeaturePhoto.svelte';
+  import sharkSrc from '../../FeaturePhoto/images/shark.jpg';
+
+  let top = '150px';
+
+  const demoText =
+    'Take a look at the *Elements* tab in Inspector to see how the photo in the middle of the page appears in the DOM only when its container comes into view.';
+
+  let demoText2 = $derived(
+    `The top value for \`rootMargin\` is set to \`${top}px\` in this demo. Read about how \`rootMargin\` affects the <a href='https://codepen.io/michellebarker/full/xxwLpRG'>Intersection Observer's behaviour here</a>.`
+  );
+
+  const text =
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+</script>
+
+<BodyText text={`**${demoText}**`} />
+
+<BodyText text={`**${demoText2}**`} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+
+<Visible {top} once={false}>
+  {#snippet children(visible)}
+    {#if visible}
+      <FeaturePhoto
+        src={sharkSrc}
+        altText="A shark!"
+        caption="Carcharodon carcharias - REUTERS"
+      />
+    {:else}
+      <Block><h2>Not yet visible.</h2></Block>
+    {/if}
+  {/snippet}
+</Visible>
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
+<BodyText {text} />
diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..b981352
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,79 @@
+// Actions
+export { default as cssVariables } from './actions/cssVariables/index';
+export { default as resizeObserver } from './actions/resizeObserver/index';
+
+// Utils
+/* export { prettifyDate, getAuthorPageUrl, formatTime } from './utils/index'; */
+
+// Components
+export {
+  default as Analytics,
+  registerPageview,
+} from './components/Analytics/Analytics.svelte';
+export { default as Article } from './components/Article/Article.svelte';
+/* export { default as BlogPost } from './components/BlogPost/BlogPost.svelte';
+export { default as BlogTOC } from './components/BlogTOC/BlogTOC.svelte'; */
+/* export { default as AdScripts } from './components/AdSlot/AdScripts.svelte'; */
+/* export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte'; */
+export { default as Block } from './components/Block/Block.svelte';
+export { default as ClockWall } from './components/ClockWall/ClockWall.svelte';
+export { default as BodyText } from './components/BodyText/BodyText.svelte';
+export { default as Byline } from './components/Byline/Byline.svelte';
+export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+/* export { default as DocumentCloud } from './components/DocumentCloud/DocumentCloud.svelte'; */
+/* export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte'; */
+export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+/* export { default as Framer } from './components/Framer/Framer.svelte'; */
+export { default as Geocoder } from './components/Geocoder/Geocoder.svelte';
+export { geocode } from './components/Geocoder/geocode';
+export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
+export { default as Headline } from './components/Headline/Headline.svelte';
+/* export { default as Headpile } from './components/Headpile/Headpile.svelte'; */
+export { default as HeroHeadline } from './components/HeroHeadline/HeroHeadline.svelte';
+export { default as HorizontalScroller } from './components/HorizontalScroller/HorizontalScroller.svelte';
+export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
+export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
+/* export { default as InlineAd } from './components/AdSlot/InlineAd.svelte'; */
+/* export { default as KinesisLogo } from './components/KinesisLogo/KinesisLogo.svelte'; */
+/* export { default as LanguageButton } from './components/LanguageButton/LanguageButton.svelte'; */
+/* export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte'; */
+export { default as TileMap } from './components/TileMap/TileMap.svelte';
+export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';
+export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
+export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
+/* export { default as PymChild } from './components/PymChild/PymChild.svelte'; */
+export { pym } from './components/PymChild/state.svelte';
+/* export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte'; */
+/* export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte'; */
+/* export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte'; */
+export { default as Scroller } from './components/Scroller/Scroller.svelte';
+/* export { default as SearchInput } from './components/SearchInput/SearchInput.svelte'; */
+/* export { default as SEO } from './components/SEO/SEO.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 SiteHeadline } from './components/SiteHeadline/SiteHeadline.svelte'; */
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export { default as ScrollerBase } from './components/ScrollerBase/ScrollerBase.svelte';
+/* export { default as ScrollerVideo } from './components/ScrollerVideo/ScrollerVideo.svelte'; */
+export { default as ScrollerVideoForeground } from './components/ScrollerVideo/ScrollerVideoForeground.svelte';
+/* export { default as Lottie } from './components/Lottie/Lottie.svelte'; */
+/* export { default as LottieForeground } from './components/Lottie/LottieForeground.svelte'; */
+/* export { default as SponsorshipAd } from './components/AdSlot/SponsorshipAd.svelte'; */
+export { default as Table } from './components/Table/Table.svelte';
+export { default as Theme, themes } from './components/Theme/Theme.svelte';
+/* export { default as ToolsHeader } from './components/ToolsHeader/ToolsHeader.svelte'; */
+/* export { default as Video } from './components/Video/Video.svelte'; */
+export { default as Visible } from './components/Visible/Visible.svelte';
+
+export type {
+  ContainerWidth,
+  HeadlineSize,
+  ScrollerVideoInstance,
+} from './components/@types/global';
+
+export type {
+  GeocodeOptions,
+  GeocodeFeature,
+  GeocodeFeatureType,
+} from './components/Geocoder/geocode';
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f68339a..025392c 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,5 +1,5 @@
 ---
-import '../scss/main.scss';
+import '../../styles/main.scss';
 ---
 <!doctype html>
 <html lang="en">
@@ -16,11 +16,4 @@ import '../scss/main.scss';
 	</body>
 </html>
 
-<style>
-	html,
-	body {
-		background-color: #3a3a3a;
-		color: #eeeeee;
-	}
-	
-</style>
+
diff --git a/src/lib/Parse.svelte b/src/lib/Parse.svelte
new file mode 100644
index 0000000..f668bc1
--- /dev/null
+++ b/src/lib/Parse.svelte
@@ -0,0 +1,153 @@
+<script lang="ts">
+  /* import type ArchieML from '$locales/en/content.json'; */
+  import { parse } from "@rferl/veronica";
+
+  interface Props {
+    /* Whether the app is being rendered in an embed */
+    embedded?: boolean;
+    /* ArchieML story content */
+    content: (typeof ArchieML)['story'];
+    /* Locale for the page */
+    locale?: string;
+    /* Story-specific ai2svelte background components, keyed by name */
+    aiCharts?: Record<string, any>;
+    /* Story-specific foreground components, keyed by name used in AML */
+    foregrounds?: Record<string, any>;
+    photos?: Record<string, any>;
+  }
+
+  let { embedded = false, content, aiCharts: extraCharts = {}, foregrounds = {}, photos = {} }: Props = $props();
+
+  /* import { assets } from '$app/paths'; */
+
+  import {
+    Article,
+    Block,
+    BodyText,
+    EndNotes,
+    FeaturePhoto,
+    GraphicBlock,
+    Headline,
+    HorizontalScroller,
+    Lottie,
+    Scroller,
+    ScrollerBase,
+    ScrollerVideo,
+    Table,
+    TileMap,
+    Video
+  } from '../index.ts';
+
+  import LogBlock from '@components/LogBlock.svelte';
+  import { truthy } from '@utils/propValidators/index.ts'
+  import { containerWidth, inlineAdNumber } from '@utils/propValidators';
+  /* import { isReutersDotcom } from '$utils/env';
+  import { page } from '$app/state';
+  import pkg from '$pkg'; */
+
+  // Import ai2svelte components...
+  import AiMap from '@lib/ai2svelte/ai-chart.svelte';
+
+  // ...and add them to this object.
+  const defaultAiCharts: Record<string, any> = {
+    AiMap,
+  };
+
+  const aiCharts = $derived({ ...defaultAiCharts, ...extraCharts });
+</script>
+
+<!-- {#if !embedded && isReutersDotcom(page.url)}
+  <Analytics authors={pkg?.reuters?.graphic?.authors || []} />
+{/if} -->
+
+<Article>
+  <!--
+    This component and others are part of our components library.
+    📚 Read the docs: https://reuters-graphics.github.io/graphics-components/
+  -->
+<!--   <SiteHeadline
+    hed={content.hed}
+    section={content.section}
+    sectionUrl={content.sectionUrl}
+    authors={content.authors}
+    publishTime={content.publishTime}
+    updateTime={content.updateTime}
+  /> -->
+
+  <!-- 🔁 Looping through your ArchieML doc blocks... -->
+  {#each content.blocks as block}
+    <!-- Text block -->
+    {#if block.type === 'text'}
+      <BodyText text={block.text} />
+
+      <!-- Ai2svelte graphic block -->
+<!--     {:else if block.type === 'ai-graphic'}
+      {#if !aiCharts[block.chart]}
+        <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
+      {:else}
+        {@const AiChart = aiCharts[block.chart]}
+        <GraphicBlock
+          id={block.chart}
+          width={containerWidth(block.width)}
+          textWidth={containerWidth(block.textWidth)}
+          title={block.title}
+          description={block.description}
+          notes={block.notes}
+          ariaDescription={block.altText}
+        >
+          <AiChart assetsPath={assets || '/'} />
+        </GraphicBlock>
+      {/if} -->
+
+    <!-- Featured Photo -->
+    {:else if block.type === 'photo'}
+      <FeaturePhoto
+        width={block.width}
+        src={photos[block.src] ?? block.src}
+        altText={block.altText}
+        caption={block.caption}
+      />
+
+
+    <!-- Ai2svelte graphic block -->
+    {:else if block.type === 'ai-graphic'}
+      {#if !aiCharts[block.chart]}
+        <LogBlock message={`Unable to find "${block.chart}" in aiCharts`} />
+      {:else}
+        {@const AiChart = aiCharts[block.chart]}
+        <GraphicBlock
+          id={block.chart}
+          width={containerWidth(block.width)}
+          textWidth={containerWidth(block.textWidth)}
+          title={block.title}
+          description={block.description}
+          notes={block.notes}
+          ariaDescription={block.altText}
+        >
+          <!-- <AiChart assetsPath={assets || '/'} /> -->
+        </GraphicBlock>
+      {/if}
+
+      <!-- Scroller -->
+      {:else if block.type === 'ai-scroller'}
+        <Scroller
+          id={block.id}
+          backgroundWidth={block.backgroundWidth}
+          foregroundPosition={block.foregroundPosition}
+          stackBackground={truthy(block.stackBackground)}
+          steps={block.steps.map((step) => ({
+            background: aiCharts[step.background],
+            /* backgroundProps: { assetsPath: assets || '/' }, */
+            foreground: foregrounds[step.foreground] ?? step.foreground,
+            altText: step.altText,
+          }))}
+        />
+
+      <!-- Warning block -->
+    {:else}
+      <LogBlock message={`Unknown block type: "${block.type}"`} />
+    {/if}
+  {/each}
+
+  <!-- <EndNotes notes={content.endNotes} /> -->
+</Article>
diff --git a/src/lib/ai2svelte/ai-chart.svelte b/src/lib/ai2svelte/ai-chart.svelte
new file mode 100644
index 0000000..e3d4c4b
--- /dev/null
+++ b/src/lib/ai2svelte/ai-chart.svelte
@@ -0,0 +1,98 @@
+<script>
+  export let assetsPath = '/';
+  let width = null;
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 13:49 -->
+
+<div id="g-ai-chart-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-ai-chart-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 91.7004% 0;"></div>
+      <div
+        id="g-ai-chart-xs-img"
+        class="g-aiImg"
+        alt=""
+        style="background-image: url({assetsPath.replace(
+          new RegExp('/([^/.]+)$'),
+          '/$1/'
+        )}images/graphics/ai-chart-xs.png);"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-ai-chart-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 82.703% 0;"></div>
+      <div
+        id="g-ai-chart-sm-img"
+        class="g-aiImg"
+        alt=""
+        style="background-image: url({assetsPath.replace(
+          new RegExp('/([^/.]+)$'),
+          '/$1/'
+        )}images/graphics/ai-chart-sm.png);"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660}
+    <div id="g-ai-chart-md" class="g-artboard" style="">
+      <div style="padding: 0 0 79.6009% 0;"></div>
+      <div
+        id="g-ai-chart-md-img"
+        class="g-aiImg"
+        alt=""
+        style="background-image: url({assetsPath.replace(
+          new RegExp('/([^/.]+)$'),
+          '/$1/'
+        )}images/graphics/ai-chart-md.png);"
+      ></div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 13:49 -->
+
+<!-- ai file: ai-chart.ai -->
+
+<!-- svelte-ignore css-unused-selector -->
+<style lang="scss">
+  #g-ai-chart-box,
+  #g-ai-chart-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-ai-chart-box p {
+    margin: 0;
+  }
+  #g-ai-chart-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-ai-chart-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-ai-chart-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-ai-chart-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-ai-chart-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-ai-chart-md {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/pages/Squash.svelte b/src/pages/Squash.svelte
index 531d939..96d905b 100644
--- a/src/pages/Squash.svelte
+++ b/src/pages/Squash.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
   import ScrollerBase from '../components/ScrollerBase/ScrollerBase.svelte';
-  import type { ContainerWidth } from '../components/@types/global';
+  
+
+  // Types
+  import type {
+    ContainerWidth,
+    ForegroundPosition,
+    ScrollerStep,
+  } from '../components/@types/global';
 
   type Graphic = {
     src: string;
@@ -12,15 +19,28 @@
     width?: ContainerWidth;
 
   };
+  
 
   interface Props {
     graphics: Graphic[];
+    /** Duration of the animation, milliseconds **/
+    animationDuration?: number;
+    /** The moment when the animation is at its peak.
+     ** It is here that we transition between steps and swap the graphic. 0-1 **/
+    animationPeak?: number;
+    /** Width of the background */
+    backgroundWidth?: ContainerWidth;
+    /** Position of the foreground */
+    foregroundPosition?: ForegroundPosition;
   }
 
-  let { graphics }: Props = $props();
-
-  let animationDuration = 450; // duration of animation in milliseconds
-  let animationPeak = 0.8; // when to swap the image during the animation (0-1)
+  let { 
+    graphics, 
+    backgroundWidth = 'fluid',
+    foregroundPosition = 'middle',
+    animationDuration = 350, 
+    animationPeak = 0.8, 
+}: Props = $props();
 
   let count = $state(1);
   let index = $state(0);
@@ -53,15 +73,22 @@
   query="div.step-foreground-container"
 >
   {#snippet backgroundSnippet()}
-    <img
-      bind:this={imgEl}
-      class="graphic"
-      style="--animation-time: {animationDuration}ms"
-      src={graphics[displayedIndex].src}
-      srcset={graphics[displayedIndex].srcset}
-      sizes="(min-width: 690px) 660px, calc(100vw - 30px)"
-      alt={graphics[displayedIndex].alt}
-    />
+    <div
+      class="background min-h-screen relative p-0 flex justify-center"
+      class:right={foregroundPosition === 'left opposite'}
+      class:left={foregroundPosition === 'right opposite'}
+      aria-hidden="true"
+    >
+      <img
+        bind:this={imgEl}
+        class="graphic"
+        style="--animation-time: {animationDuration}ms"
+        src={graphics[displayedIndex].src}
+        srcset={graphics[displayedIndex].srcset}
+        sizes="(min-width: 690px) 660px, calc(100vw - 30px)"
+        alt={graphics[displayedIndex].alt}
+      />
+    </div>
   {/snippet}
 
   {#snippet foregroundSnippet()}
@@ -106,6 +133,28 @@
       translate: 0;
     }
   }
+// we play this
+    @keyframes stretch {
+    0% {
+      scale: 1;
+      translate: 0;
+    }
+
+    50% {
+      scale: 0.8 1.2;
+      translate: 0 -8px;
+    }
+
+    80% {
+      scale: 1.4 0.6;
+      translate: 0 -16px;
+    }
+
+    100% {
+      scale: 1;
+      translate: 0;
+    }
+  }
 
   .step-foreground-container {
     height: 50vh;
diff --git a/src/pages/stories/one/Background.svelte b/src/pages/stories/one/Background.svelte
new file mode 100644
index 0000000..7a1c599
--- /dev/null
+++ b/src/pages/stories/one/Background.svelte
@@ -0,0 +1,51 @@
+<script lang="ts"> 
+  import type { ScrollerStep } from '../@types/global';
+
+  interface Props {
+    index: number;
+    steps: ScrollerStep[];
+    preload?: number;
+    stackBackground?: boolean;
+  }
+
+  let { index, steps, preload = 1, stackBackground = true }: Props = $props();
+
+  function showStep(i: number) {
+    if (preload === 0) return true;
+    if (stackBackground) return i >= 0;
+    return i >= index - preload && i <= index + preload;
+  }
+
+  function isVisible(i: number) {
+    if (stackBackground) return i <= index;
+    return i === index;
+  }
+</script>
+
+{#each steps as step, i}
+  {#if showStep(i)}
+    <div
+      class={`step-background step-${i + 1} w-full absolute`}
+      class:visible={isVisible(i)}
+      class:invisible={!isVisible(i)}
+    >
+      <step.background {...step.backgroundProps || {}}></step.background>
+    </div>
+  {/if}
+{/each}
+
+<style lang="scss">
+  .step-background {
+    opacity: 0;
+    will-change: opacity;
+    transition: 0.35s opacity ease;
+
+    &.visible {
+      opacity: 1;
+    }
+
+    &.invisible {
+      opacity: 0;
+    }
+  }
+</style>
diff --git a/src/pages/stories/one/Foreground.svelte b/src/pages/stories/one/Foreground.svelte
new file mode 100644
index 0000000..ff56476
--- /dev/null
+++ b/src/pages/stories/one/Foreground.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+  import type { ScrollerStep } from '@components/@types/global';
+
+  import { Markdown } from '@reuters-graphics/svelte-markdown';
+
+  interface Props {
+    steps: ScrollerStep[];
+  }
+
+  let { steps }: Props = $props();
+</script>
+
+{#each steps as step, i}
+  <div
+    class="step-foreground-container step-{i +
+      1} mb-20 h-screen flex items-center justify-center"
+  >
+    {#if step.foreground === '' || !step.foreground}
+      <!-- Empty foreground -->
+      <div class="empty-step-foreground"></div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          <Markdown source={step.altText} />
+        </div>
+      {/if}
+    {:else}
+      <div class="step-foreground w-full">
+        {#if typeof step.foreground === 'string'}
+          <Markdown source={step.foreground} />
+        {:else}
+          <step.foreground {...step.foregroundProps || {}}></step.foreground>
+        {/if}
+      </div>
+      {#if typeof step.altText === 'string'}
+        <div class="background-alt-text visually-hidden">
+          <Markdown source={step.altText} />
+        </div>
+      {/if}
+    {/if}
+  </div>
+{/each}
+
+<style lang="scss">
+  @use 'mixins' as mixins;
+
+  div.step-foreground-container {
+    width: initial;
+    max-width: initial;
+    .step-foreground {
+      max-width: calc(mixins.$column-width-normal * 0.9);
+      border-radius: 0.25rem;
+      @include mixins.fpy-5;
+      @include mixins.fpx-4;
+      background: rgba(255, 255, 255, 0.9);
+
+      :global(p:last-child) {
+        margin-block-end: 0;
+      }
+      :global(*:first-child) {
+        margin-block-start: 0;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/stories/one/Photo-4439.jpg b/src/pages/stories/one/Photo-4439.jpg
new file mode 100755
index 0000000..a1ab7de
Binary files /dev/null and b/src/pages/stories/one/Photo-4439.jpg differ
diff --git a/src/pages/stories/one/Step01.svelte b/src/pages/stories/one/Step01.svelte
new file mode 100644
index 0000000..d914ec8
--- /dev/null
+++ b/src/pages/stories/one/Step01.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'lightblue' }: Props = $props();
+</script>
+
+<div class="step" style={`background: ${colour};`}></div>
+
+<style lang="scss">
+  .step {
+    width: 100vw;
+    max-width: 100%;
+    margin: 0 auto;
+    height: 400px;
+  }
+</style>
diff --git a/src/pages/stories/one/Step02.svelte b/src/pages/stories/one/Step02.svelte
new file mode 100644
index 0000000..3ad3dc9
--- /dev/null
+++ b/src/pages/stories/one/Step02.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+  interface Props {
+    colour?: string;
+  }
+
+  let { colour = 'lightgreen' }: Props = $props();
+</script>
+
+<div class="step" style={`background: ${colour};`}>Two</div>
+
+<style lang="scss">
+  .step {
+    width: 100vw;
+    max-width: 100%;
+    margin: 0 auto;
+    height: 400px;
+  }
+</style>
diff --git a/src/pages/stories/one/ai-foreground.svelte b/src/pages/stories/one/ai-foreground.svelte
new file mode 100644
index 0000000..6af40a5
--- /dev/null
+++ b/src/pages/stories/one/ai-foreground.svelte
@@ -0,0 +1,112 @@
+<script>
+  // Hard-coding for demo purposes only...
+  import stepXs from './images/Body-issues-key-xs.png';
+  let width = $state();
+</script>
+
+<div id="g-Body-issues-key-box" bind:clientWidth={width}>
+  <!-- Artboard: xs -->
+  {#if width && width >= 0}
+    <div id="g-Body-issues-key-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 48.4848% 0;"></div>
+      <div
+        id="g-Body-issues-key-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:19.4775%;margin-top:-10.2px;left:8.1818%;width:276px;"
+      >
+        <p class="g-pstyle0">Likelihood of something happening</p>
+      </div>
+
+      <div
+        id="g-ai0-3"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:55.1025%;margin-top:-10.2px;left:27.2727%;width:68px;"
+      >
+        <p class="g-pstyle1">0-25%</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:55.1025%;margin-top:-10.2px;left:74.2424%;width:75px;"
+      >
+        <p class="g-pstyle1">50-75%</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:79.4775%;margin-top:-10.2px;left:74.2424%;width:82px;"
+      >
+        <p class="g-pstyle1">75-100%</p>
+      </div>
+      <div
+        id="g-ai0-6"
+        class="g-Layer_1 g-aiAbs g-aiPointText"
+        style="top:83.2275%;margin-top:-10.2px;left:27.2727%;width:77px;"
+      >
+        <p class="g-pstyle1">25-50%</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2025-03-17 09:52 -->
+
+<!-- Generated by ai2html v0.100.0 - 2025-03-17 09:52 -->
+<!-- ai file: Body-issues-key.ai -->
+<style lang="scss">
+  #g-Body-issues-key-box,
+  #g-Body-issues-key-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-Body-issues-key-box p {
+    margin: 0;
+  }
+  #g-Body-issues-key-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-Body-issues-key-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-Body-issues-key-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-Body-issues-key-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-Body-issues-key-xs p {
+    font-family: 'Knowledge', 'Source Sans Pro', Arial, sans-serif;
+    font-weight: 500;
+    line-height: 19px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(64, 64, 64);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-Body-issues-key-xs .g-pstyle0 {
+    height: 19px;
+  }
+  #g-Body-issues-key-xs .g-pstyle1 {
+    font-weight: 400;
+    height: 19px;
+  }
+</style>
diff --git a/src/pages/stories/one/ai-scroller-1.svelte b/src/pages/stories/one/ai-scroller-1.svelte
new file mode 100644
index 0000000..df60d00
--- /dev/null
+++ b/src/pages/stories/one/ai-scroller-1.svelte
@@ -0,0 +1,121 @@
+<script lang="ts">
+  // Hard-coding for demo purposes only...
+  import stepXl from './images/step-1-xl.png';
+  import stepLg from './images/step-1-lg.png';
+  import stepMd from './images/step-1-md.png';
+  import stepSm from './images/step-1-sm.png';
+  import stepXs from './images/step-1-xs.png';
+  let width = $state<number>();
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
+
+<div id="g-step-1-box" bind:clientWidth={width}>
+  <!-- Artboard: XL -->
+  {#if width && width >= 1200}
+    <div id="g-step-1-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 50% 0;"></div>
+      <div
+        id="g-step-1-xl-img"
+        class="g-aiImg"
+        style="background-image: url({stepXl});"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: LG -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-step-1-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.3763% 0;"></div>
+      <div
+        id="g-step-1-lg-img"
+        class="g-aiImg"
+        style="background-image: url({stepLg});"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: MD -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-step-1-md" class="g-artboard" style="">
+      <div style="padding: 0 0 55.7576% 0;"></div>
+      <div
+        id="g-step-1-md-img"
+        class="g-aiImg"
+        style="background-image: url({stepMd});"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: SM -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-step-1-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 49.6078% 0;"></div>
+      <div
+        id="g-step-1-sm-img"
+        class="g-aiImg"
+        style="background-image: url({stepSm});"
+      ></div>
+    </div>
+  {/if}
+  <!-- Artboard: XS -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-step-1-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 55.4545% 0;"></div>
+      <div
+        id="g-step-1-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 14:21 -->
+
+<!-- ai file: step-1.ai -->
+
+<!-- svelte-ignore css_unused_selector -->
+<style lang="scss">
+  #g-step-1-box,
+  #g-step-1-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-step-1-box p {
+    margin: 0;
+  }
+  #g-step-1-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-step-1-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-step-1-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-step-1-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-1-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-1-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-1-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-1-xs {
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/pages/stories/one/ai-scroller-2.svelte b/src/pages/stories/one/ai-scroller-2.svelte
new file mode 100644
index 0000000..18a5870
--- /dev/null
+++ b/src/pages/stories/one/ai-scroller-2.svelte
@@ -0,0 +1,310 @@
+<script lang="ts">
+  // Hard-coding for demo purposes only...
+  // @ts-ignore img
+  import stepXl from './images/step-2-xl.png';
+  // @ts-ignore img
+  import stepLg from './images/step-2-lg.png';
+  // @ts-ignore img
+  import stepMd from './images/step-2-md.png';
+  // @ts-ignore img
+  import stepSm from './images/step-2-sm.png';
+  // @ts-ignore img
+  import stepXs from './images/step-2-xs.png';
+  let width = $state<null | number>(null);
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->
+
+<div id="g-step-2-box" bind:clientWidth={width}>
+  <!-- Artboard: XL -->
+  {#if width && width >= 1200}
+    <div id="g-step-2-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 50% 0;"></div>
+      <div
+        id="g-step-2-xl-img"
+        class="g-aiImg"
+        style="background-image: url({stepXl});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:26.183%;margin-top:-21.1px;left:55.6774%;width:180px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: LG -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-step-2-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.3763% 0;"></div>
+      <div
+        id="g-step-2-lg-img"
+        class="g-aiImg"
+        style="background-image: url({stepLg});"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:25.8206%;margin-top:-21px;left:56.2692%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: MD -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-step-2-md" class="g-artboard" style="">
+      <div style="padding: 0 0 55.7576% 0;"></div>
+      <div
+        id="g-step-2-md-img"
+        class="g-aiImg"
+        style="background-image: url({stepMd});"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:47.5478%;margin-top:-21px;left:32.4915%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: SM -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-step-2-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 49.6078% 0;"></div>
+      <div
+        id="g-step-2-sm-img"
+        class="g-aiImg"
+        style="background-image: url({stepSm});"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:55.3265%;margin-top:-21px;left:30.7585%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: XS -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-step-2-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 55.4545% 0;"></div>
+      <div
+        id="g-step-2-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-annotation g-aiAbs g-aiPointText"
+        style="top:22.3913%;margin-top:-21px;left:52.5519%;width:162px;"
+      >
+        <p class="g-pstyle0">This thing here is</p>
+        <p class="g-pstyle0">particularly important</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 14:20 -->
+
+<!-- ai file: step-2.ai -->
+
+<style lang="scss">
+  #g-step-2-box,
+  #g-step-2-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-step-2-box p {
+    margin: 0;
+  }
+  #g-step-2-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-step-2-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-step-2-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-step-2-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-2-xl p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 18px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-2-xl .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-2-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-2-lg p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-2-lg .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-2-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-2-md p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-2-md .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-2-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-2-sm p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-2-sm .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-2-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-2-xs p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-2-xs .g-pstyle0 {
+    height: 20px;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/pages/stories/one/ai-scroller-3.svelte b/src/pages/stories/one/ai-scroller-3.svelte
new file mode 100644
index 0000000..33538e0
--- /dev/null
+++ b/src/pages/stories/one/ai-scroller-3.svelte
@@ -0,0 +1,310 @@
+<script lang="ts">
+  // Hard-coding for demo purposes only...
+  // @ts-ignore img
+  import stepXl from './images/step-3-xl.png';
+  // @ts-ignore img
+  import stepLg from './images/step-3-lg.png';
+  // @ts-ignore img
+  import stepMd from './images/step-3-md.png';
+  // @ts-ignore img
+  import stepSm from './images/step-3-sm.png';
+  // @ts-ignore img
+  import stepXs from './images/step-3-xs.png';
+  let width = $state<null | number>(null);
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->
+
+<div id="g-step-3-box" bind:clientWidth={width}>
+  <!-- Artboard: XL -->
+  {#if width && width >= 1200}
+    <div id="g-step-3-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 50% 0;"></div>
+      <div
+        id="g-step-3-xl-img"
+        class="g-aiImg"
+        style="background-image: url({stepXl});"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:19.683%;margin-top:-21.1px;left:54.3441%;width:130px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: LG -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-step-3-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.3763% 0;"></div>
+      <div
+        id="g-step-3-lg-img"
+        class="g-aiImg"
+        style="background-image: url({stepLg});"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:27.5682%;margin-top:-21px;left:54.9127%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: MD -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-step-3-md" class="g-artboard" style="">
+      <div style="padding: 0 0 55.7576% 0;"></div>
+      <div
+        id="g-step-3-md-img"
+        class="g-aiImg"
+        style="background-image: url({stepMd});"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:23.3631%;margin-top:-21px;left:50.4963%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: SM -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-step-3-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 49.6078% 0;"></div>
+      <div
+        id="g-step-3-sm-img"
+        class="g-aiImg"
+        style="background-image: url({stepSm});"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:20.1486%;margin-top:-21px;left:55.7925%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: XS -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-step-3-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 55.4545% 0;"></div>
+      <div
+        id="g-step-3-xs-img"
+        class="g-aiImg"
+        style="background-image: url({stepXs});"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-step-3 g-aiAbs g-aiPointText"
+        style="top:42.0634%;margin-top:-21px;left:27.3523%;width:118px;"
+      >
+        <p class="g-pstyle0">Something</p>
+        <p class="g-pstyle0">happened here</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2021-09-30 14:28 -->
+
+<!-- ai file: step-3.ai -->
+
+<style lang="scss">
+  #g-step-3-box,
+  #g-step-3-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-step-3-box p {
+    margin: 0;
+  }
+  #g-step-3-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-step-3-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-step-3-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-step-3-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-3-xl p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 18px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-3-xl .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-3-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-3-lg p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-3-lg .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-3-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-3-md p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-3-md .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-3-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-3-sm p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-3-sm .g-pstyle0 {
+    height: 20px;
+  }
+  #g-step-3-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-step-3-xs p {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(0, 0, 0);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-step-3-xs .g-pstyle0 {
+    height: 20px;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/pages/stories/one/images/Body-issues-key-xs.png b/src/pages/stories/one/images/Body-issues-key-xs.png
new file mode 100644
index 0000000..e03e5e1
Binary files /dev/null and b/src/pages/stories/one/images/Body-issues-key-xs.png differ
diff --git a/src/pages/stories/one/images/step-1-lg.png b/src/pages/stories/one/images/step-1-lg.png
new file mode 100644
index 0000000..de1888e
Binary files /dev/null and b/src/pages/stories/one/images/step-1-lg.png differ
diff --git a/src/pages/stories/one/images/step-1-md.png b/src/pages/stories/one/images/step-1-md.png
new file mode 100644
index 0000000..ead091c
Binary files /dev/null and b/src/pages/stories/one/images/step-1-md.png differ
diff --git a/src/pages/stories/one/images/step-1-sm.png b/src/pages/stories/one/images/step-1-sm.png
new file mode 100644
index 0000000..dada63c
Binary files /dev/null and b/src/pages/stories/one/images/step-1-sm.png differ
diff --git a/src/pages/stories/one/images/step-1-xl.png b/src/pages/stories/one/images/step-1-xl.png
new file mode 100644
index 0000000..55823fb
Binary files /dev/null and b/src/pages/stories/one/images/step-1-xl.png differ
diff --git a/src/pages/stories/one/images/step-1-xs.png b/src/pages/stories/one/images/step-1-xs.png
new file mode 100644
index 0000000..26e4449
Binary files /dev/null and b/src/pages/stories/one/images/step-1-xs.png differ
diff --git a/src/pages/stories/one/images/step-2-lg.png b/src/pages/stories/one/images/step-2-lg.png
new file mode 100644
index 0000000..9619643
Binary files /dev/null and b/src/pages/stories/one/images/step-2-lg.png differ
diff --git a/src/pages/stories/one/images/step-2-md.png b/src/pages/stories/one/images/step-2-md.png
new file mode 100644
index 0000000..37450dc
Binary files /dev/null and b/src/pages/stories/one/images/step-2-md.png differ
diff --git a/src/pages/stories/one/images/step-2-sm.png b/src/pages/stories/one/images/step-2-sm.png
new file mode 100644
index 0000000..e236862
Binary files /dev/null and b/src/pages/stories/one/images/step-2-sm.png differ
diff --git a/src/pages/stories/one/images/step-2-xl.png b/src/pages/stories/one/images/step-2-xl.png
new file mode 100644
index 0000000..fa15744
Binary files /dev/null and b/src/pages/stories/one/images/step-2-xl.png differ
diff --git a/src/pages/stories/one/images/step-2-xs.png b/src/pages/stories/one/images/step-2-xs.png
new file mode 100644
index 0000000..0fef62a
Binary files /dev/null and b/src/pages/stories/one/images/step-2-xs.png differ
diff --git a/src/pages/stories/one/images/step-3-lg.png b/src/pages/stories/one/images/step-3-lg.png
new file mode 100644
index 0000000..9e4f037
Binary files /dev/null and b/src/pages/stories/one/images/step-3-lg.png differ
diff --git a/src/pages/stories/one/images/step-3-md.png b/src/pages/stories/one/images/step-3-md.png
new file mode 100644
index 0000000..91cfa1a
Binary files /dev/null and b/src/pages/stories/one/images/step-3-md.png differ
diff --git a/src/pages/stories/one/images/step-3-sm.png b/src/pages/stories/one/images/step-3-sm.png
new file mode 100644
index 0000000..876a388
Binary files /dev/null and b/src/pages/stories/one/images/step-3-sm.png differ
diff --git a/src/pages/stories/one/images/step-3-xl.png b/src/pages/stories/one/images/step-3-xl.png
new file mode 100644
index 0000000..03e47dd
Binary files /dev/null and b/src/pages/stories/one/images/step-3-xl.png differ
diff --git a/src/pages/stories/one/images/step-3-xs.png b/src/pages/stories/one/images/step-3-xs.png
new file mode 100644
index 0000000..26223ca
Binary files /dev/null and b/src/pages/stories/one/images/step-3-xs.png differ
diff --git a/src/pages/stories/one/index.astro b/src/pages/stories/one/index.astro
new file mode 100644
index 0000000..57ef147
--- /dev/null
+++ b/src/pages/stories/one/index.astro
@@ -0,0 +1,30 @@
+---
+import Layout from '../../../layouts/Layout.astro';
+
+import Parse from '@lib/Parse.svelte';
+import { parse } from '@rferl/veronica';
+import ArchieML from './story.aml?raw';
+
+
+const content = parse(ArchieML);
+
+// ai2svelte backgrounds
+import AiMap1 from './ai-scroller-1.svelte';
+import AiMap2 from './ai-scroller-2.svelte';
+import AiMap3 from './ai-scroller-3.svelte';
+
+//photos
+import { getImage } from "astro:assets";
+import photoOne from './Photo-4439.jpg';
+const photos = { 'Photo-4439.jpg': photoOne.src };
+
+// ai2svelte foreground
+import AiForeground from './ai-foreground.svelte';
+
+const aiCharts = { AiMap1, AiMap2, AiMap3 };
+const foregrounds = { Foreground1: AiForeground };
+---
+
+<Layout>
+  <Parse {content} {aiCharts} {foregrounds} {photos} client:load />
+</Layout>
\ No newline at end of file
diff --git a/src/pages/stories/one/one.json b/src/pages/stories/one/one.json
new file mode 100644
index 0000000..8a3e703
--- /dev/null
+++ b/src/pages/stories/one/one.json
@@ -0,0 +1,75 @@
+{
+  "metadata": {
+    "id": "cltmvzj5m0000lc089jz22aet",
+    "name": "graphics-kit-page",
+    "storyboard": {
+      "id": "cltmvxt5q0000l908irus4rdd",
+      "name": "🔒 TEMPLATES"
+    },
+    "lastSynced": "2025-03-26T17:16:03.466Z",
+    "liveEditing": {
+      "preview": {
+        "aml": "https://graphics.thomsonreuters.com/apps/graphics-tools/prod/stories/cltmvzj5m0000lc089jz22aet/preview/story.aml",
+        "json": "https://graphics.thomsonreuters.com/apps/graphics-tools/prod/stories/cltmvzj5m0000lc089jz22aet/preview/story.json",
+        "enabled": true
+      }
+    }
+  },
+  "story": {
+    "slug": "ROOT-SLUG/WILD",
+    "seoTitle": "Page title for search",
+    "seoDescription": "Page description for search",
+    "shareTitle": "Page title for social media",
+    "shareDescription": "Page description for social media",
+    "shareImgPath": "images/reuters-graphics.jpg",
+    "shareImgAlt": "Alt text for share image.",
+    "hed": "A Reuters Graphics page",
+    "section": "Graphics",
+    "sectionUrl": "https://www.reuters.com/graphics/",
+    "authors": ["Jane Doe", "John Doe"],
+    "publishTime": "2024-04-17T17:00:00.000Z",
+    "updateTime": "",
+    "blocks": [
+      {
+        "type": "text",
+        "text": "Pig short ribs jerky, meatloaf turducken ribeye strip steak bacon pastrami tail pancetta chicken. Turkey landjaeger <a href=\"https://www.reuters.com/graphics/\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">kevin turducken kielbasa</a> pork loin, filet mignon leberkas meatball cow tenderloin. T-bone meatloaf kielbasa pancetta filet mignon doner. \r\n\r\nPig short ribs jerky, meatloaf <em>turducken ribeye strip steak</em> bacon pastrami tail pancetta chicken. Shankle pork loin burgdoggen, prosciutto beef ribs turducken ball tip.\r\n\r\nBoudin alcatra kevin, jerky swine <strong>brisket pastrami</strong> tail pork chop drumstick tongue."
+      },
+      {
+        "type": "ai-graphic",
+        "chart": "AiMap",
+        "width": "normal",
+        "textWidth": "normal",
+        "title": "Optional title of the graphic",
+        "description": "Optional chatter describes more about the graphic.",
+        "notes": "Note: Optional note clarifying something in the data.\r\n\r\nSource: Optional source of the data.",
+        "altText": "Add a description of the graphic for screen readers. This is invisible on the page."
+      },
+      {
+        "type": "text",
+        "text": "Quis ea deserunt tempor. Incididunt ipsum culpa laboris. Aliqua culpa excepteur magna. Fugiat aliqua commodo ea ut dolor. Irure deserunt qui commodo sunt elit deserunt culpa. Amet occaecat ipsum cupidatat proident incididunt officia non ea.\r\n\r\nId incididunt laboris cillum eu. Ullamco ipsum mollit ipsum consequat laboris. Pariatur incididunt sit aute nulla enim excepteur ut."
+      },
+      {
+        "type": "inline-ad",
+        "n": "1"
+      },
+      {
+        "type": "text",
+        "text": "Dolor qui dolore nulla pariatur sunt fugiat. Fugiat amet voluptate consequat. Dolore consequat proident commodo. Exercitation occaecat deserunt occaecat ea. Reprehenderit incididunt ad quis proident laboris et dolore.\r\n\r\nSint velit elit do sunt ad voluptate nulla dolore. Deserunt aliquip mollit reprehenderit nulla do ad quis ullamco. Deserunt aliquip aute qui eiusmod aliquip ullamco nostrud incididunt."
+      }
+    ],
+    "endNotes": [
+      {
+        "title": "Note",
+        "text": "Data is current as of today"
+      },
+      {
+        "title": "Sources",
+        "text": "Data, Inc."
+      },
+      {
+        "title": "Edited by",
+        "text": "Editor, Copyeditor"
+      }
+    ]
+  }
+}
diff --git a/src/pages/stories/one/story.aml b/src/pages/stories/one/story.aml
new file mode 100644
index 0000000..48b89d1
--- /dev/null
+++ b/src/pages/stories/one/story.aml
@@ -0,0 +1,38 @@
+# ArchieML doc
+[blocks]
+
+type: photo
+width: normal
+src: Photo-4439.jpg
+altText: Boom
+caption: Peerless
+
+type: ai-scroller
+id: my-map-scroller
+foregroundPosition: left
+stackBackground: true
+
+# Array of step objects
+  [.steps]
+    background: AiMap1
+    # You can still use a markdown string even if other step/s use a custom foreground component
+    foreground: #### Step 1
+
+    Here's where something happend.
+    :end
+    altText: A map showing the Upper West side in New York City.
+    :end
+
+    background: AiMap2
+    foreground: Foreground1 # The name of your custom foreground component
+    altText: The same map now highlights 98th Street.
+    :end
+    background: AiMap3
+    foreground: #### Step 3
+
+    ... and now there are multiple protests.
+    :end
+    altText: The same map now highlights three locations near 98th Street where something particulary important happened.
+    :end
+  []
+[]
\ No newline at end of file
diff --git a/src/scss/_mixins.scss b/src/styles/_mixins.scss
similarity index 100%
rename from src/scss/_mixins.scss
rename to src/styles/_mixins.scss
diff --git a/src/scss/colours/_main.scss b/src/styles/colours/_main.scss
similarity index 100%
rename from src/scss/colours/_main.scss
rename to src/styles/colours/_main.scss
diff --git a/src/scss/colours/primary/_amber.scss b/src/styles/colours/primary/_amber.scss
similarity index 100%
rename from src/scss/colours/primary/_amber.scss
rename to src/styles/colours/primary/_amber.scss
diff --git a/src/scss/colours/primary/_blue.scss b/src/styles/colours/primary/_blue.scss
similarity index 100%
rename from src/scss/colours/primary/_blue.scss
rename to src/styles/colours/primary/_blue.scss
diff --git a/src/scss/colours/primary/_cyan.scss b/src/styles/colours/primary/_cyan.scss
similarity index 100%
rename from src/scss/colours/primary/_cyan.scss
rename to src/styles/colours/primary/_cyan.scss
diff --git a/src/scss/colours/primary/_emerald.scss b/src/styles/colours/primary/_emerald.scss
similarity index 100%
rename from src/scss/colours/primary/_emerald.scss
rename to src/styles/colours/primary/_emerald.scss
diff --git a/src/scss/colours/primary/_fuchsia.scss b/src/styles/colours/primary/_fuchsia.scss
similarity index 100%
rename from src/scss/colours/primary/_fuchsia.scss
rename to src/styles/colours/primary/_fuchsia.scss
diff --git a/src/scss/colours/primary/_green.scss b/src/styles/colours/primary/_green.scss
similarity index 100%
rename from src/scss/colours/primary/_green.scss
rename to src/styles/colours/primary/_green.scss
diff --git a/src/scss/colours/primary/_grey.scss b/src/styles/colours/primary/_grey.scss
similarity index 100%
rename from src/scss/colours/primary/_grey.scss
rename to src/styles/colours/primary/_grey.scss
diff --git a/src/scss/colours/primary/_indigo.scss b/src/styles/colours/primary/_indigo.scss
similarity index 100%
rename from src/scss/colours/primary/_indigo.scss
rename to src/styles/colours/primary/_indigo.scss
diff --git a/src/scss/colours/primary/_lime.scss b/src/styles/colours/primary/_lime.scss
similarity index 100%
rename from src/scss/colours/primary/_lime.scss
rename to src/styles/colours/primary/_lime.scss
diff --git a/src/scss/colours/primary/_neutral.scss b/src/styles/colours/primary/_neutral.scss
similarity index 100%
rename from src/scss/colours/primary/_neutral.scss
rename to src/styles/colours/primary/_neutral.scss
diff --git a/src/scss/colours/primary/_orange.scss b/src/styles/colours/primary/_orange.scss
similarity index 100%
rename from src/scss/colours/primary/_orange.scss
rename to src/styles/colours/primary/_orange.scss
diff --git a/src/scss/colours/primary/_pink.scss b/src/styles/colours/primary/_pink.scss
similarity index 100%
rename from src/scss/colours/primary/_pink.scss
rename to src/styles/colours/primary/_pink.scss
diff --git a/src/scss/colours/primary/_purple.scss b/src/styles/colours/primary/_purple.scss
similarity index 100%
rename from src/scss/colours/primary/_purple.scss
rename to src/styles/colours/primary/_purple.scss
diff --git a/src/scss/colours/primary/_red.scss b/src/styles/colours/primary/_red.scss
similarity index 100%
rename from src/scss/colours/primary/_red.scss
rename to src/styles/colours/primary/_red.scss
diff --git a/src/scss/colours/primary/_rose.scss b/src/styles/colours/primary/_rose.scss
similarity index 100%
rename from src/scss/colours/primary/_rose.scss
rename to src/styles/colours/primary/_rose.scss
diff --git a/src/scss/colours/primary/_sky.scss b/src/styles/colours/primary/_sky.scss
similarity index 100%
rename from src/scss/colours/primary/_sky.scss
rename to src/styles/colours/primary/_sky.scss
diff --git a/src/scss/colours/primary/_slate.scss b/src/styles/colours/primary/_slate.scss
similarity index 100%
rename from src/scss/colours/primary/_slate.scss
rename to src/styles/colours/primary/_slate.scss
diff --git a/src/scss/colours/primary/_stone.scss b/src/styles/colours/primary/_stone.scss
similarity index 100%
rename from src/scss/colours/primary/_stone.scss
rename to src/styles/colours/primary/_stone.scss
diff --git a/src/scss/colours/primary/_teal.scss b/src/styles/colours/primary/_teal.scss
similarity index 100%
rename from src/scss/colours/primary/_teal.scss
rename to src/styles/colours/primary/_teal.scss
diff --git a/src/scss/colours/primary/_violet.scss b/src/styles/colours/primary/_violet.scss
similarity index 100%
rename from src/scss/colours/primary/_violet.scss
rename to src/styles/colours/primary/_violet.scss
diff --git a/src/scss/colours/primary/_yellow.scss b/src/styles/colours/primary/_yellow.scss
similarity index 100%
rename from src/scss/colours/primary/_yellow.scss
rename to src/styles/colours/primary/_yellow.scss
diff --git a/src/scss/colours/primary/_zinc.scss b/src/styles/colours/primary/_zinc.scss
similarity index 100%
rename from src/scss/colours/primary/_zinc.scss
rename to src/styles/colours/primary/_zinc.scss
diff --git a/src/scss/colours/thematic/_nord.scss b/src/styles/colours/thematic/_nord.scss
similarity index 100%
rename from src/scss/colours/thematic/_nord.scss
rename to src/styles/colours/thematic/_nord.scss
diff --git a/src/scss/colours/thematic/_tr.scss b/src/styles/colours/thematic/_tr.scss
similarity index 100%
rename from src/scss/colours/thematic/_tr.scss
rename to src/styles/colours/thematic/_tr.scss
diff --git a/src/scss/fonts/_font-faces.scss b/src/styles/fonts/_font-faces.scss
similarity index 100%
rename from src/scss/fonts/_font-faces.scss
rename to src/styles/fonts/_font-faces.scss
diff --git a/src/scss/main.scss b/src/styles/main.scss
similarity index 100%
rename from src/scss/main.scss
rename to src/styles/main.scss
diff --git a/src/scss/mixins/_block.scss b/src/styles/mixins/_block.scss
similarity index 100%
rename from src/scss/mixins/_block.scss
rename to src/styles/mixins/_block.scss
diff --git a/src/scss/mixins/_main.scss b/src/styles/mixins/_main.scss
similarity index 100%
rename from src/scss/mixins/_main.scss
rename to src/styles/mixins/_main.scss
diff --git a/src/scss/reset/_main.scss b/src/styles/reset/_main.scss
similarity index 95%
rename from src/scss/reset/_main.scss
rename to src/styles/reset/_main.scss
index bc29520..d210083 100644
--- a/src/scss/reset/_main.scss
+++ b/src/styles/reset/_main.scss
@@ -1,4 +1,4 @@
-@use '../mixins' as *;
+@use 'mixins' as *;
 @forward 'normalize';
 @forward 'typography';
 
diff --git a/src/scss/reset/_normalize.scss b/src/styles/reset/_normalize.scss
similarity index 100%
rename from src/scss/reset/_normalize.scss
rename to src/styles/reset/_normalize.scss
diff --git a/src/scss/reset/_typography.scss b/src/styles/reset/_typography.scss
similarity index 98%
rename from src/scss/reset/_typography.scss
rename to src/styles/reset/_typography.scss
index 0727c9b..6668e5f 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/styles/reset/_typography.scss
@@ -1,4 +1,4 @@
-@use '../mixins' as *;
+@use 'mixins' as *;
 
 html {
   font-size: 100%;
diff --git a/src/scss/token-classes.scss b/src/styles/token-classes.scss
similarity index 100%
rename from src/scss/token-classes.scss
rename to src/styles/token-classes.scss
diff --git a/src/scss/tokens/accessibility/_main.scss b/src/styles/tokens/accessibility/_main.scss
similarity index 100%
rename from src/scss/tokens/accessibility/_main.scss
rename to src/styles/tokens/accessibility/_main.scss
diff --git a/src/scss/tokens/accessibility/_visibility.scss b/src/styles/tokens/accessibility/_visibility.scss
similarity index 100%
rename from src/scss/tokens/accessibility/_visibility.scss
rename to src/styles/tokens/accessibility/_visibility.scss
diff --git a/src/scss/tokens/accessibility/mixins/_main.scss b/src/styles/tokens/accessibility/mixins/_main.scss
similarity index 100%
rename from src/scss/tokens/accessibility/mixins/_main.scss
rename to src/styles/tokens/accessibility/mixins/_main.scss
diff --git a/src/scss/tokens/accessibility/mixins/_visibility.scss b/src/styles/tokens/accessibility/mixins/_visibility.scss
similarity index 100%
rename from src/scss/tokens/accessibility/mixins/_visibility.scss
rename to src/styles/tokens/accessibility/mixins/_visibility.scss
diff --git a/src/scss/tokens/backgrounds/_background-color.scss b/src/styles/tokens/backgrounds/_background-color.scss
similarity index 100%
rename from src/scss/tokens/backgrounds/_background-color.scss
rename to src/styles/tokens/backgrounds/_background-color.scss
diff --git a/src/scss/tokens/backgrounds/_main.scss b/src/styles/tokens/backgrounds/_main.scss
similarity index 100%
rename from src/scss/tokens/backgrounds/_main.scss
rename to src/styles/tokens/backgrounds/_main.scss
diff --git a/src/scss/tokens/backgrounds/mixins/_background-color.scss b/src/styles/tokens/backgrounds/mixins/_background-color.scss
similarity index 100%
rename from src/scss/tokens/backgrounds/mixins/_background-color.scss
rename to src/styles/tokens/backgrounds/mixins/_background-color.scss
diff --git a/src/scss/tokens/backgrounds/mixins/_main.scss b/src/styles/tokens/backgrounds/mixins/_main.scss
similarity index 100%
rename from src/scss/tokens/backgrounds/mixins/_main.scss
rename to src/styles/tokens/backgrounds/mixins/_main.scss
diff --git a/src/scss/tokens/borders/_border-color.scss b/src/styles/tokens/borders/_border-color.scss
similarity index 100%
rename from src/scss/tokens/borders/_border-color.scss
rename to src/styles/tokens/borders/_border-color.scss
diff --git a/src/scss/tokens/borders/_border-radius.scss b/src/styles/tokens/borders/_border-radius.scss
similarity index 100%
rename from src/scss/tokens/borders/_border-radius.scss
rename to src/styles/tokens/borders/_border-radius.scss
diff --git a/src/scss/tokens/borders/_border-style.scss b/src/styles/tokens/borders/_border-style.scss
similarity index 100%
rename from src/scss/tokens/borders/_border-style.scss
rename to src/styles/tokens/borders/_border-style.scss
diff --git a/src/scss/tokens/borders/_border-width.scss b/src/styles/tokens/borders/_border-width.scss
similarity index 100%
rename from src/scss/tokens/borders/_border-width.scss
rename to src/styles/tokens/borders/_border-width.scss
diff --git a/src/scss/tokens/borders/_main.scss b/src/styles/tokens/borders/_main.scss
similarity index 100%
rename from src/scss/tokens/borders/_main.scss
rename to src/styles/tokens/borders/_main.scss
diff --git a/src/scss/tokens/interactivity/_cursor.scss b/src/styles/tokens/interactivity/_cursor.scss
similarity index 100%
rename from src/scss/tokens/interactivity/_cursor.scss
rename to src/styles/tokens/interactivity/_cursor.scss
diff --git a/src/scss/tokens/interactivity/_main.scss b/src/styles/tokens/interactivity/_main.scss
similarity index 100%
rename from src/scss/tokens/interactivity/_main.scss
rename to src/styles/tokens/interactivity/_main.scss
diff --git a/src/scss/tokens/interactivity/_pointer-events.scss b/src/styles/tokens/interactivity/_pointer-events.scss
similarity index 100%
rename from src/scss/tokens/interactivity/_pointer-events.scss
rename to src/styles/tokens/interactivity/_pointer-events.scss
diff --git a/src/scss/tokens/layout/_box-sizing.scss b/src/styles/tokens/layout/_box-sizing.scss
similarity index 100%
rename from src/scss/tokens/layout/_box-sizing.scss
rename to src/styles/tokens/layout/_box-sizing.scss
diff --git a/src/scss/tokens/layout/_display.scss b/src/styles/tokens/layout/_display.scss
similarity index 100%
rename from src/scss/tokens/layout/_display.scss
rename to src/styles/tokens/layout/_display.scss
diff --git a/src/scss/tokens/layout/_floats.scss b/src/styles/tokens/layout/_floats.scss
similarity index 100%
rename from src/scss/tokens/layout/_floats.scss
rename to src/styles/tokens/layout/_floats.scss
diff --git a/src/scss/tokens/layout/_main.scss b/src/styles/tokens/layout/_main.scss
similarity index 100%
rename from src/scss/tokens/layout/_main.scss
rename to src/styles/tokens/layout/_main.scss
diff --git a/src/scss/tokens/layout/_object-fit.scss b/src/styles/tokens/layout/_object-fit.scss
similarity index 100%
rename from src/scss/tokens/layout/_object-fit.scss
rename to src/styles/tokens/layout/_object-fit.scss
diff --git a/src/scss/tokens/layout/_object-position.scss b/src/styles/tokens/layout/_object-position.scss
similarity index 100%
rename from src/scss/tokens/layout/_object-position.scss
rename to src/styles/tokens/layout/_object-position.scss
diff --git a/src/scss/tokens/layout/_overflow.scss b/src/styles/tokens/layout/_overflow.scss
similarity index 100%
rename from src/scss/tokens/layout/_overflow.scss
rename to src/styles/tokens/layout/_overflow.scss
diff --git a/src/scss/tokens/layout/_position.scss b/src/styles/tokens/layout/_position.scss
similarity index 100%
rename from src/scss/tokens/layout/_position.scss
rename to src/styles/tokens/layout/_position.scss
diff --git a/src/scss/tokens/layout/flex/_align-content.scss b/src/styles/tokens/layout/flex/_align-content.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_align-content.scss
rename to src/styles/tokens/layout/flex/_align-content.scss
diff --git a/src/scss/tokens/layout/flex/_align-items.scss b/src/styles/tokens/layout/flex/_align-items.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_align-items.scss
rename to src/styles/tokens/layout/flex/_align-items.scss
diff --git a/src/scss/tokens/layout/flex/_align-self.scss b/src/styles/tokens/layout/flex/_align-self.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_align-self.scss
rename to src/styles/tokens/layout/flex/_align-self.scss
diff --git a/src/scss/tokens/layout/flex/_flex-direction.scss b/src/styles/tokens/layout/flex/_flex-direction.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_flex-direction.scss
rename to src/styles/tokens/layout/flex/_flex-direction.scss
diff --git a/src/scss/tokens/layout/flex/_flex-grow.scss b/src/styles/tokens/layout/flex/_flex-grow.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_flex-grow.scss
rename to src/styles/tokens/layout/flex/_flex-grow.scss
diff --git a/src/scss/tokens/layout/flex/_flex-shrink.scss b/src/styles/tokens/layout/flex/_flex-shrink.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_flex-shrink.scss
rename to src/styles/tokens/layout/flex/_flex-shrink.scss
diff --git a/src/scss/tokens/layout/flex/_flex-wrap.scss b/src/styles/tokens/layout/flex/_flex-wrap.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_flex-wrap.scss
rename to src/styles/tokens/layout/flex/_flex-wrap.scss
diff --git a/src/scss/tokens/layout/flex/_flex.scss b/src/styles/tokens/layout/flex/_flex.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_flex.scss
rename to src/styles/tokens/layout/flex/_flex.scss
diff --git a/src/scss/tokens/layout/flex/_justify-content.scss b/src/styles/tokens/layout/flex/_justify-content.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_justify-content.scss
rename to src/styles/tokens/layout/flex/_justify-content.scss
diff --git a/src/scss/tokens/layout/flex/_justify-items.scss b/src/styles/tokens/layout/flex/_justify-items.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_justify-items.scss
rename to src/styles/tokens/layout/flex/_justify-items.scss
diff --git a/src/scss/tokens/layout/flex/_justify-self.scss b/src/styles/tokens/layout/flex/_justify-self.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_justify-self.scss
rename to src/styles/tokens/layout/flex/_justify-self.scss
diff --git a/src/scss/tokens/layout/flex/_main.scss b/src/styles/tokens/layout/flex/_main.scss
similarity index 100%
rename from src/scss/tokens/layout/flex/_main.scss
rename to src/styles/tokens/layout/flex/_main.scss
diff --git a/src/scss/tokens/sizing/_height.scss b/src/styles/tokens/sizing/_height.scss
similarity index 100%
rename from src/scss/tokens/sizing/_height.scss
rename to src/styles/tokens/sizing/_height.scss
diff --git a/src/scss/tokens/sizing/_main.scss b/src/styles/tokens/sizing/_main.scss
similarity index 100%
rename from src/scss/tokens/sizing/_main.scss
rename to src/styles/tokens/sizing/_main.scss
diff --git a/src/scss/tokens/sizing/_max-height.scss b/src/styles/tokens/sizing/_max-height.scss
similarity index 100%
rename from src/scss/tokens/sizing/_max-height.scss
rename to src/styles/tokens/sizing/_max-height.scss
diff --git a/src/scss/tokens/sizing/_max-width.scss b/src/styles/tokens/sizing/_max-width.scss
similarity index 100%
rename from src/scss/tokens/sizing/_max-width.scss
rename to src/styles/tokens/sizing/_max-width.scss
diff --git a/src/scss/tokens/sizing/_min-height.scss b/src/styles/tokens/sizing/_min-height.scss
similarity index 100%
rename from src/scss/tokens/sizing/_min-height.scss
rename to src/styles/tokens/sizing/_min-height.scss
diff --git a/src/scss/tokens/sizing/_min-width.scss b/src/styles/tokens/sizing/_min-width.scss
similarity index 100%
rename from src/scss/tokens/sizing/_min-width.scss
rename to src/styles/tokens/sizing/_min-width.scss
diff --git a/src/scss/tokens/sizing/_width.scss b/src/styles/tokens/sizing/_width.scss
similarity index 100%
rename from src/scss/tokens/sizing/_width.scss
rename to src/styles/tokens/sizing/_width.scss
diff --git a/src/scss/tokens/spacers/_fluid-margin.scss b/src/styles/tokens/spacers/_fluid-margin.scss
similarity index 100%
rename from src/scss/tokens/spacers/_fluid-margin.scss
rename to src/styles/tokens/spacers/_fluid-margin.scss
diff --git a/src/scss/tokens/spacers/_fluid-padding.scss b/src/styles/tokens/spacers/_fluid-padding.scss
similarity index 100%
rename from src/scss/tokens/spacers/_fluid-padding.scss
rename to src/styles/tokens/spacers/_fluid-padding.scss
diff --git a/src/scss/tokens/spacers/_main.scss b/src/styles/tokens/spacers/_main.scss
similarity index 100%
rename from src/scss/tokens/spacers/_main.scss
rename to src/styles/tokens/spacers/_main.scss
diff --git a/src/scss/tokens/spacers/_margin.scss b/src/styles/tokens/spacers/_margin.scss
similarity index 100%
rename from src/scss/tokens/spacers/_margin.scss
rename to src/styles/tokens/spacers/_margin.scss
diff --git a/src/scss/tokens/spacers/_padding.scss b/src/styles/tokens/spacers/_padding.scss
similarity index 100%
rename from src/scss/tokens/spacers/_padding.scss
rename to src/styles/tokens/spacers/_padding.scss
diff --git a/src/scss/tokens/spacers/mixins/_fluid-margin.scss b/src/styles/tokens/spacers/mixins/_fluid-margin.scss
similarity index 100%
rename from src/scss/tokens/spacers/mixins/_fluid-margin.scss
rename to src/styles/tokens/spacers/mixins/_fluid-margin.scss
diff --git a/src/scss/tokens/spacers/mixins/_fluid-padding.scss b/src/styles/tokens/spacers/mixins/_fluid-padding.scss
similarity index 100%
rename from src/scss/tokens/spacers/mixins/_fluid-padding.scss
rename to src/styles/tokens/spacers/mixins/_fluid-padding.scss
diff --git a/src/scss/tokens/spacers/mixins/_main.scss b/src/styles/tokens/spacers/mixins/_main.scss
similarity index 100%
rename from src/scss/tokens/spacers/mixins/_main.scss
rename to src/styles/tokens/spacers/mixins/_main.scss
diff --git a/src/scss/tokens/text/_color.scss b/src/styles/tokens/text/_color.scss
similarity index 100%
rename from src/scss/tokens/text/_color.scss
rename to src/styles/tokens/text/_color.scss
diff --git a/src/scss/tokens/text/_font-family.scss b/src/styles/tokens/text/_font-family.scss
similarity index 100%
rename from src/scss/tokens/text/_font-family.scss
rename to src/styles/tokens/text/_font-family.scss
diff --git a/src/scss/tokens/text/_font-size.scss b/src/styles/tokens/text/_font-size.scss
similarity index 100%
rename from src/scss/tokens/text/_font-size.scss
rename to src/styles/tokens/text/_font-size.scss
diff --git a/src/scss/tokens/text/_font-style.scss b/src/styles/tokens/text/_font-style.scss
similarity index 100%
rename from src/scss/tokens/text/_font-style.scss
rename to src/styles/tokens/text/_font-style.scss
diff --git a/src/scss/tokens/text/_font-weight.scss b/src/styles/tokens/text/_font-weight.scss
similarity index 100%
rename from src/scss/tokens/text/_font-weight.scss
rename to src/styles/tokens/text/_font-weight.scss
diff --git a/src/scss/tokens/text/_letter-spacing.scss b/src/styles/tokens/text/_letter-spacing.scss
similarity index 100%
rename from src/scss/tokens/text/_letter-spacing.scss
rename to src/styles/tokens/text/_letter-spacing.scss
diff --git a/src/scss/tokens/text/_line-height.scss b/src/styles/tokens/text/_line-height.scss
similarity index 100%
rename from src/scss/tokens/text/_line-height.scss
rename to src/styles/tokens/text/_line-height.scss
diff --git a/src/scss/tokens/text/_main.scss b/src/styles/tokens/text/_main.scss
similarity index 100%
rename from src/scss/tokens/text/_main.scss
rename to src/styles/tokens/text/_main.scss
diff --git a/src/scss/tokens/text/_text-align.scss b/src/styles/tokens/text/_text-align.scss
similarity index 100%
rename from src/scss/tokens/text/_text-align.scss
rename to src/styles/tokens/text/_text-align.scss
diff --git a/src/scss/tokens/text/_text-decoration.scss b/src/styles/tokens/text/_text-decoration.scss
similarity index 100%
rename from src/scss/tokens/text/_text-decoration.scss
rename to src/styles/tokens/text/_text-decoration.scss
diff --git a/src/scss/tokens/text/_text-role.scss b/src/styles/tokens/text/_text-role.scss
similarity index 100%
rename from src/scss/tokens/text/_text-role.scss
rename to src/styles/tokens/text/_text-role.scss
diff --git a/src/scss/tokens/text/_text-stroke.scss b/src/styles/tokens/text/_text-stroke.scss
similarity index 100%
rename from src/scss/tokens/text/_text-stroke.scss
rename to src/styles/tokens/text/_text-stroke.scss
diff --git a/src/scss/tokens/text/_text-transform.scss b/src/styles/tokens/text/_text-transform.scss
similarity index 100%
rename from src/scss/tokens/text/_text-transform.scss
rename to src/styles/tokens/text/_text-transform.scss
diff --git a/src/scss/tokens/text/_vertical-align.scss b/src/styles/tokens/text/_vertical-align.scss
similarity index 100%
rename from src/scss/tokens/text/_vertical-align.scss
rename to src/styles/tokens/text/_vertical-align.scss
diff --git a/src/scss/tokens/text/_white-space.scss b/src/styles/tokens/text/_white-space.scss
similarity index 100%
rename from src/scss/tokens/text/_white-space.scss
rename to src/styles/tokens/text/_white-space.scss
diff --git a/src/scss/tokens/text/_word-break.scss b/src/styles/tokens/text/_word-break.scss
similarity index 100%
rename from src/scss/tokens/text/_word-break.scss
rename to src/styles/tokens/text/_word-break.scss
diff --git a/src/scss/tokens/text/mixins/_color.scss b/src/styles/tokens/text/mixins/_color.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_color.scss
rename to src/styles/tokens/text/mixins/_color.scss
diff --git a/src/scss/tokens/text/mixins/_font-family.scss b/src/styles/tokens/text/mixins/_font-family.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_font-family.scss
rename to src/styles/tokens/text/mixins/_font-family.scss
diff --git a/src/scss/tokens/text/mixins/_font-size.scss b/src/styles/tokens/text/mixins/_font-size.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_font-size.scss
rename to src/styles/tokens/text/mixins/_font-size.scss
diff --git a/src/scss/tokens/text/mixins/_font-weight.scss b/src/styles/tokens/text/mixins/_font-weight.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_font-weight.scss
rename to src/styles/tokens/text/mixins/_font-weight.scss
diff --git a/src/scss/tokens/text/mixins/_letter-spacing.scss b/src/styles/tokens/text/mixins/_letter-spacing.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_letter-spacing.scss
rename to src/styles/tokens/text/mixins/_letter-spacing.scss
diff --git a/src/scss/tokens/text/mixins/_line-height.scss b/src/styles/tokens/text/mixins/_line-height.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_line-height.scss
rename to src/styles/tokens/text/mixins/_line-height.scss
diff --git a/src/scss/tokens/text/mixins/_main.scss b/src/styles/tokens/text/mixins/_main.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_main.scss
rename to src/styles/tokens/text/mixins/_main.scss
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/styles/tokens/text/mixins/_text-role.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_text-role.scss
rename to src/styles/tokens/text/mixins/_text-role.scss
diff --git a/src/scss/tokens/text/mixins/_text-stroke.scss b/src/styles/tokens/text/mixins/_text-stroke.scss
similarity index 100%
rename from src/scss/tokens/text/mixins/_text-stroke.scss
rename to src/styles/tokens/text/mixins/_text-stroke.scss
diff --git a/src/scss/tokens/variables/_block.scss b/src/styles/tokens/variables/_block.scss
similarity index 100%
rename from src/scss/tokens/variables/_block.scss
rename to src/styles/tokens/variables/_block.scss
diff --git a/src/scss/tokens/variables/_main.scss b/src/styles/tokens/variables/_main.scss
similarity index 100%
rename from src/scss/tokens/variables/_main.scss
rename to src/styles/tokens/variables/_main.scss
diff --git a/src/scss/tokens/variables/_theme.scss b/src/styles/tokens/variables/_theme.scss
similarity index 100%
rename from src/scss/tokens/variables/_theme.scss
rename to src/styles/tokens/variables/_theme.scss
diff --git a/src/utils/env/index.ts b/src/utils/env/index.ts
new file mode 100644
index 0000000..0dfca6a
--- /dev/null
+++ b/src/utils/env/index.ts
@@ -0,0 +1,72 @@
+import { building } from '$app/environment';
+
+/**
+ * Check if the page is being hosted inside the Reuters mobile app.
+ *
+ * @example
+ * ```typescript
+ * import { page } from "$app/stores";
+ *
+ * isReutersApp($page.url);
+ * ```
+ * @param url URL of current page
+ * @returns `true` if in the Reuters app
+ */
+export const isReutersApp = (url: URL) => {
+  if (building) return false;
+  return url.searchParams.get('outputType') === 'chromeless';
+};
+
+/**
+ * Check if the page is being hosted on reuters.com.
+ *
+ * @example
+ * ```typescript
+ * import { page } from "$app/stores";
+ *
+ * isReutersDotcom($page.url);
+ * ```
+ *
+ * @param url URL of current page
+ * @returns `true` if on reuters.com and not in an iframe
+ */
+export const isReutersDotcom = (url: URL) => {
+  if (typeof window !== 'undefined') {
+    if (window.self !== window.top) return false;
+  }
+  return /\Wreuters\.com$/.test(url.hostname);
+};
+
+/**
+ * Check if the page is being hosted on our preview server at graphics.thomsonreuters.com.
+ *
+ * @example
+ * ```typescript
+ * import { page } from "$app/stores";
+ *
+ * isReutersPreview($page.url);
+ * ```
+ *
+ * @param url URL of current page
+ * @returns `true` if on graphics.thomsonreuters.com
+ */
+export const isReutersPreview = (url: URL) => {
+  return url.hostname === 'graphics.thomsonreuters.com';
+};
+
+/**
+ * Check if the page is being hosted in development or on our preview server at graphics.thomsonreuters.com.
+ *
+ * @example
+ * ```typescript
+ * import { page } from "$app/stores";
+ *
+ * isReutersDev($page.url);
+ * ```
+ *
+ * @param url URL of current page
+ * @returns `true` if on dev or graphics.thomsonreuters.com
+ */
+export const isReutersDev = (url: URL) => {
+  return url.hostname === 'localhost' || isReutersPreview(url);
+};
diff --git a/src/utils/graphics/ResponsiveGraphic.astro b/src/utils/graphics/ResponsiveGraphic.astro
new file mode 100644
index 0000000..afcbd10
--- /dev/null
+++ b/src/utils/graphics/ResponsiveGraphic.astro
@@ -0,0 +1,30 @@
+---
+import type { ImageMetadata } from "astro";
+import { getImage } from "astro:assets";
+
+interface Props {
+    width: string | ImageMetadata;
+}
+
+const { width } = Astro.props;
+
+const mobileImg = await getImage({
+    src: mobileImgUrl,
+    format: "webp",
+    width: 200,
+    height: 200,
+});
+
+const desktopImg = await getImage({
+    src: desktopImgUrl,
+    format: "webp",
+    width: 800,
+    height: 200,
+});
+---
+
+<picture>
+    <source media="(max-width: 799px)" srcset={mobileImg.src} />
+    <source media="(min-width: 800px)" srcset={desktopImg.src} />
+    <img src={desktopImg.src} alt={alt} />
+</picture>
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
new file mode 100644
index 0000000..1509348
--- /dev/null
+++ b/src/utils/index.ts
@@ -0,0 +1,112 @@
+import slug from 'slugify';
+
+/** Helper function to generate a random 4-character string */
+export const random4 = () =>
+  Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1);
+
+/**
+ * Custom function that returns an author page URL.
+ */
+export const getAuthorPageUrl = (author: string): string => {
+  const authorSlug = slug(author.trim(), { lower: true });
+  return `https://www.reuters.com/authors/${authorSlug}/`;
+};
+
+/** Formats a string containing a full or 3-letter abbreviated month, AM/PM, and am/pm to match the Reuters style.
+ *
+ * All months, full or abbreviated to 3 letters, are formatted to:
+ * - Jan.
+ * - Feb.
+ * - March
+ * - April]
+ * - May
+ * - June
+ * - July
+ * - Aug.
+ * - Sept.
+ * - Oct.
+ * - Nov.
+ * - Dec.
+ *
+ * AM and PM are formatted as lowercase.
+ *
+ */
+export const prettifyDate = (input: string) => {
+  // Define an object to map full month names to their Reuters style equivalents
+  const conversions: { [key: string]: string } = {
+    // full months
+    january: 'Jan.',
+    february: 'Feb.',
+    august: 'Aug.',
+    september: 'Sept.',
+    october: 'Oct.',
+    november: 'Nov.',
+    december: 'Dec.',
+
+    // 3-letter abbreviations that need fixing
+    jan: 'Jan.',
+    feb: 'Feb.',
+    mar: 'March',
+    apr: 'April',
+    jun: 'June',
+    jul: 'July',
+    aug: 'Aug.',
+    sep: 'Sept.',
+    oct: 'Oct.',
+    nov: 'Nov.',
+    dec: 'Dec.',
+  };
+
+  // If the key in conversions is found in the input (case insensitive), replace it with the corresponding value
+  const formatted = Object.keys(conversions).reduce((acc, key) => {
+    const regex = new RegExp(`\\b${key}\\b`, 'gi'); // Added 'i' flag for case insensitive
+    return acc.replace(regex, conversions[key]);
+  }, input);
+
+  // Fix rogue periods in abbreviations (case insensitive)
+  const fixedAbbr = formatted
+    .replace(/\bmar\./gi, 'March')
+    .replace(/\bmarch\./gi, 'March')
+    .replace(/\bapr\./gi, 'April')
+    .replace(/\bapril\./gi, 'April')
+    .replace(/\bmay\./gi, 'May')
+    .replace(/\bjune\./gi, 'June')
+    .replace(/\bjuly\./gi, 'July')
+    .replace(/\bsep\./gi, 'Sept.');
+
+  // Replace double periods with a single period
+  const fixedPeriods = fixedAbbr.replace(/\.{2,}/g, '.');
+
+  // Fix am/pm formatting
+  return prettifyAmPm(fixedPeriods);
+};
+
+const prettifyAmPm = (text: string) => {
+  return text.replace(
+    /(\d)\s*(am|AM|pm|PM)\b/g,
+    (_match, digit, timeDesignator) => {
+      const formattedDesignator =
+        timeDesignator.toLowerCase() === 'am' ? 'a.m.' : 'p.m.';
+      return `${digit} ${formattedDesignator}`;
+    }
+  );
+};
+
+/**
+ * Converts a string into a URL-friendly slug.
+ *
+ * @param str The string to be slugified.
+ * @returns The slugified string.
+ */
+export const slugify = (str: string) =>
+  slug(str, { lower: true, strict: true });
+
+/** Formats a datetime string into a localized time string with hour, minute, and time zone for the dateline */
+export const formatTime = (datetime: string) =>
+  new Date(datetime).toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+    timeZoneName: 'short',
+  });
diff --git a/src/utils/liveEndpoints/index.ts b/src/utils/liveEndpoints/index.ts
new file mode 100644
index 0000000..0afca46
--- /dev/null
+++ b/src/utils/liveEndpoints/index.ts
@@ -0,0 +1,197 @@
+interface ConfigLiveEndpoint {
+  enabled: boolean;
+  json: string;
+  aml: string;
+}
+
+interface StoryConfig {
+  name: string;
+  rngsIo: string;
+  syncPath: string;
+  preview?: ConfigLiveEndpoint;
+  public?: ConfigLiveEndpoint;
+}
+
+interface StoryboardConfig {
+  name: string;
+  rngsIo: string;
+  stories: {
+    [storyId: string]: StoryConfig;
+  };
+}
+
+interface StoryClientConfig {
+  storyboards: {
+    [storyboardId: string]: StoryboardConfig;
+  };
+}
+
+type LiveEndpoint = {
+  localFile: string;
+  metadata: {
+    id: string;
+    name: string;
+    storyboard: {
+      id: string;
+      name: string;
+    };
+    lastPublished: string;
+    version: 'preview' | 'public';
+  };
+  story: unknown;
+};
+
+/**
+ * LiveEndpoints connects your app to updating data published independent of your project files.
+ *
+ * This is often used in preview stages, but can also be used in production to allow updating a
+ * published page with new content.
+ */
+export class LiveEndpoints {
+  private clientConfig: StoryClientConfig;
+  private currentUrl: URL;
+  /**
+   * @param clientConfig RNGS.io config object, usually imported directly from `rngs-io.json`
+   * in the root of the project.
+   * @param currentUrl URL of the current page.
+   */
+  constructor(clientConfig: StoryClientConfig, currentUrl: URL) {
+    this.clientConfig = clientConfig;
+    this.currentUrl = currentUrl;
+  }
+
+  private extractLiveUrlsFromConfig(config: StoryClientConfig) {
+    const urls: {
+      url: string;
+      localFile: string;
+      version: 'preview' | 'public';
+    }[] = [];
+
+    // Loop through each storyboard in the storyboards object
+    for (const storyboardId in config.storyboards) {
+      const storyboard = config.storyboards[storyboardId];
+
+      // Loop through each story in the stories object of the current storyboard
+      for (const storyId in storyboard.stories) {
+        const story = storyboard.stories[storyId];
+
+        // Check both 'preview' and 'public' keys in the story
+        (['preview', 'public'] as const).forEach((version) => {
+          const media = story[version];
+          // If media exists, is not an empty object, and enabled is true
+          if (media && Object.keys(media).length !== 0 && media.enabled) {
+            // If the json URL exists, add it to the urls array
+            if (media.json) {
+              urls.push({
+                localFile: story.syncPath,
+                url: media.json,
+                version,
+              });
+            }
+          }
+        });
+      }
+    }
+
+    return urls;
+  }
+
+  private async fetchLiveUrls(urlsData: { url: string; localFile: string }[]) {
+    const fetchPromises = urlsData.map(
+      async (data: {
+        url: string;
+        localFile: string;
+      }): Promise<LiveEndpoint> => {
+        const response = await fetch(data.url);
+        const story = (await response.json()) as LiveEndpoint;
+        return { ...story, localFile: data.localFile };
+      }
+    );
+
+    const result = await Promise.all(fetchPromises);
+    return result;
+  }
+
+  private async fetchLiveEndPoints() {
+    const liveUrls = this.extractLiveUrlsFromConfig(this.clientConfig);
+
+    let liveStories: LiveEndpoint[] = [];
+
+    // Public pages
+    if (this.currentUrl.hostname === 'reuters.com') {
+      const versionLiveUrls = liveUrls.filter(
+        ({ version }) => version === 'public'
+      );
+      liveStories = await this.fetchLiveUrls(versionLiveUrls);
+    }
+
+    // Preview pages
+    if (this.currentUrl.hostname === 'graphics.thomsonreuters.com') {
+      const versionLiveUrls = liveUrls.filter(
+        ({ version }) => version === 'preview'
+      );
+      liveStories = await this.fetchLiveUrls(versionLiveUrls);
+    }
+
+    return liveStories;
+  }
+
+  /**
+   * Get the latest version of content docs, which may be published remotely.
+   *
+   * @example
+   * ```typescript
+   * import localContent from '$locales/en/content.json';
+   *
+   * const liveEndpoints = new LiveEndpoints(rngsIoConfig, url);
+   * const content = await liveEndpoints.getLiveContent('en/content', localContent);
+   * ```
+   * @param localeFilePath Path part of the locale file, e.g., `en/content` for
+   * `locales/en/content.json`
+   * @param localContent Local copy of the locale file, imported directly as json.
+   * @returns The latest content
+   */
+  async getLiveContent<T>(localeFilePath: string, localContent: T): Promise<T> {
+    const liveEndpoints = await this.fetchLiveEndPoints();
+    const pathParts = localeFilePath.split('/');
+    if (pathParts.length !== 2) {
+      throw new Error(
+        'Invalid locale file. Must have just two path parts, e.g., "en/content"'
+      );
+    }
+
+    const liveContent = liveEndpoints.find(
+      (endPoint) => endPoint.localFile === `locales/${localeFilePath}.json`
+    );
+
+    // If no live content found, return local content
+    if (!liveContent) {
+      return localContent;
+    }
+
+    // Compare lastPublished dates to determine which content is more recent
+    const localContentWithMetadata = localContent as {
+      metadata?: { lastSynced?: string };
+    };
+
+    const liveLastPublished = liveContent.metadata?.lastPublished;
+    const localLastSynced = localContentWithMetadata.metadata?.lastSynced;
+
+    // If local content doesn't have lastSynced return live content
+    if (!localLastSynced) {
+      return liveContent as typeof localContent;
+    }
+
+    // If live content doesn't have lastPublished, return local content
+    if (!liveLastPublished) {
+      return localContent;
+    }
+
+    // Compare dates - return live content if it's more recent, otherwise return local
+    const liveDate = new Date(liveLastPublished);
+    const localDate = new Date(localLastSynced);
+
+    if (liveDate > localDate) return liveContent as typeof localContent;
+    return localContent;
+  }
+}
diff --git a/src/utils/propValidators/index.ts b/src/utils/propValidators/index.ts
new file mode 100644
index 0000000..87a6467
--- /dev/null
+++ b/src/utils/propValidators/index.ts
@@ -0,0 +1,68 @@
+/**
+ * Coeerce a string to a valid container width.
+ *
+ * Used to satisfy type checking.
+ *
+ * @param width Width string
+ * @returns valid container width
+ */
+export const containerWidth = (width: string) => {
+  switch (width) {
+    case 'narrower':
+    case 'narrow':
+    case 'normal':
+    case 'wide':
+    case 'wider':
+    case 'widest':
+    case 'fluid':
+      return width;
+    default:
+      return 'normal'; // Default value if invalid
+  }
+};
+
+/**
+ * Validate inline ad number prop
+ * @param n string
+ * @returns Ad number
+ */
+export const inlineAdNumber = (n: string) => {
+  switch (n) {
+    case '1':
+    case '2':
+    case '3':
+      return n;
+    default:
+      return '1';
+  }
+};
+
+/**
+ * Coerce a truth-y value to a proper boolean.
+ *
+ * @example
+ * ```
+ * truthyString('true'); // true
+ * truthyString('f'); // false
+ * truthrString('yes'); // true
+ * truthyString('0'); // false
+ * ```
+ * @param value
+ * @param defaultValue Default value
+ * @returns `true` or `false`
+ */
+export const truthy = (value: string, defaultValue = false) => {
+  // trim and standardise string
+  const cleaned = value.toLowerCase().trim();
+
+  const truthyStrings = ['true', 't', 'yes', '1'];
+  const falsyStrings = ['false', 'f', 'no', '0'];
+
+  if (truthyStrings.includes(cleaned)) {
+    return true;
+  } else if (falsyStrings.includes(cleaned)) {
+    return false;
+  } else {
+    return defaultValue;
+  }
+};
diff --git a/svelte.config.js b/svelte.config.js
index 522c1ef..d86edd2 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,5 +1,19 @@
 import { vitePreprocess } from '@astrojs/svelte';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 export default {
-	preprocess: vitePreprocess(),
-}
+  preprocess: vitePreprocess({
+    style: {
+      css: {
+        preprocessorOptions: {
+          scss: {
+            loadPaths: [path.resolve(__dirname, 'src/styles')]
+          }
+        }
+      }
+    }
+  })
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 8bf91d3..d3572ac 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,14 @@
 {
   "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "paths": {
+      "@assets/*": ["./src/assets/*"],
+      "@components/*": ["./src/components/*"],
+      "@lib/*": ["./src/lib/*"],
+      "../../styles/*": ["./src/styles/*"],
+      "@utils/*": ["./src/utils/*"]
+    }
+  },
   "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist"]
 }