-{:else}
- {@render children?.()}
-{/if}
diff --git a/src/components/GraphicBlock/GraphicBlock.mdx b/src/components/GraphicBlock/GraphicBlock.mdx
new file mode 100644
index 00000000..14dd3dad
--- /dev/null
+++ b/src/components/GraphicBlock/GraphicBlock.mdx
@@ -0,0 +1,215 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as GraphicBlockStories from './GraphicBlock.stories.svelte';
+
+
+
+# GraphicBlock
+
+The `GraphicBlock` component is a special derivative of the [Block](./?path=/docs/layout-block) component that wraps around your graphic. It also adds a title, description, notes and other text elements.
+
+Many other Reuters Graphics components use `GraphicBlock` to wrap graphics with styled text.
+
+```svelte
+
+
+
+
+
+
+```
+
+
+
+## Using with ai2svelte and ArchieML docs
+
+The `GraphicBlock` component is built to handle [ai2svelte](https://github.com/reuters-graphics/ai2svelte) graphics in Graphics Kit.
+
+You'll likely get your text value from an ArchieML doc...
+
+```yaml
+# ArchieML doc
+[blocks]
+type: ai-graphic
+width: normal
+chart: AiMap # IMPORTANT: This must match the name of the ai2svelte chart you import in App.svelte
+title: Earthquake in Haiti
+description: The 7.2-magnitude earthquake struck at 8:29 a.m. EST, Aug. 14, 2021.
+notes: \Note: A shakemap represents the ground shaking produced by an earthquake.
+
+\Source: USGIS
+:end
+altText: A map that shows the shake intensity of the earthquake, which was worst in central Haiti.
+:end
+[]
+```
+
+... which you'll parse out of a ArchieML block object before passing to the `GraphicBlock` component.
+
+To pass your ai2svelte graphic into `GraphicBlock` component, import your ai2svelte graphic at the top of `App.svelte` and add it to the `aiCharts` object.
+
+> **Important❗:** Make sure that the value for `chart` in the ArchieML doc matches the name of the ai2svelte file imported in `App.svelte`.
+
+```svelte
+
+
+
+
+{#each content.blocks as block}
+ {#if block.type === 'ai-graphic'}
+ {#if !aiCharts[block.chart]}
+
+
+ {:else}
+
+ {@const AiChart = aiCharts[block.chart]}
+
+
+
+
+ {/if}
+ {/if}
+{/each}
+```
+
+
+
+## Custom text
+
+You can override the default styles for title and notes by making your own custom elements with the `customTitle` and `customNotes` [snippets](https://svelte.dev/docs/svelte/snippet):
+
+```svelte
+
+
+ {#snippet customTitle()}
+
My smaller title
+ {/snippet}
+
+
+
+
+
+ {#snippet customNotes()}
+
+ {/snippet}
+
+```
+
+
+
+## ARIA descriptions
+
+If the text in your chart isn't easily read by screen readers — for example, a map with annotations that wouldn't make sense without the visual — add an `ariaDescription` that describes the chart.
+
+The `ariaDescription` string will be processed as markdown, so you can add multiple paragraphs, links, headers, etc. in markdown.
+
+> **Note:** When you set an `ariaDescription`, your graphic will be automatically wrapped in a div with [aria-hidden="true"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-hidden), which tells screen readers to read the hidden ARIA description and skip the text in the graphic.
+
+```svelte
+
+
+
+
+```
+
+
+
+## Custom ARIA descriptions
+
+Sometimes, instead of a simple sentence, we want to provide a data table or something more complex as an ARIA description. To do this, use the `customAria` [snippet](https://svelte.dev/docs/svelte/snippet).
+
+[Read this](https://accessibility.psu.edu/images/charts/) for more information on using screen reader data tables for charts.
+
+> **Note:** The `customAria` snippet will override the `ariaDescription` and will also hide the text in your graphic from screen readers.
+
+```svelte
+
+
+
+
+
+ {#snippet customAria()}
+
+ A shakemap shows the intensity of the 7.2-magnitude earthquake that struck
+ Haiti at 8:29 a.m. EST, Aug. 14, 2021.
+
-