diff --git a/src/components/Block/Block.mdx b/src/components/Block/Block.mdx
index 93f7619c..522fbfe6 100644
--- a/src/components/Block/Block.mdx
+++ b/src/components/Block/Block.mdx
@@ -6,37 +6,43 @@ import * as BlockStories from './Block.stories.svelte';
# Block
-The `Block` component is the basic building block of stories, a responsive container that wraps each section of your piece.
+The `Block` component is the basic building block of pages, a responsive container that wraps around each section of your piece. The contents of each block are rendered as [snippets](https://svelte.dev/docs/svelte/snippet).
-Blocks are stacked vertically within the well created by the [`Article`](./?path=/docs/layout-article) component. They can have different widths on larger screens depending on the `width` prop.
+Blocks are stacked vertically within the well created by the [Article](./?path=/docs/components-page-layout-article--docs) component. They can have different widths on larger screens depending on the `width` prop.
-> 📌 Many of our other components already use the `Block` component, internally. You'll usually only need to use it yourself if you're making something custom.
+> 📌 Many of our other components already use the `Block` component internally. You'll usually only need to use it yourself if you're making something custom.
```svelte
-
-
+
+ {#snippet content()}
+
+ {/snippet}
```
+
+
## Custom layouts
-Our article well is designed to provide a basic responsive layout for you, but it's also made to get out of the way quickly when you need to do something custom.
+Our article well is designed to provide a basic responsive layout for you, but it also lets you customise.
-If you need to get really radical, the easiest way is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+The radical but easiest way to do this is to create a `Block` with a `fluid` width -- which basically cancels out the article well dimensions -- and then code whatever you need from scratch or with another framework.
+
+The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
```svelte
-
+
```
-The demo below does exactly that to create an edge-to-edge grid with [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
+
## Snap widths
@@ -46,35 +52,44 @@ You can use the `snap` prop to force the container to snap to each block width s
```svelte
-
+ {#snippet content()}
+
+ {/snippet}
```
+
+
If you want to skip certain block widths entirely, you can add one or more class of `skip-{block width class}` to the `Block`.
+> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
+
```svelte
-
+ {#snippet content()}
+
+ {/snippet}
```
-This is probably easier to see in action than explain in words, so resize the window to get a better picture of how it all works.
+This is probably easier to see in action than explain in words, so [resize the demo](./?path=/docs/components-page-layout-block--snap-skip-widths) to get a better picture of how it all works.
-> **NOTE:** The snap width breakpoints only work on `Block` components with widths `wider` and below. `widest` and `fluid` are both **always** fluid, since they go edge-to-edge.
+## Using with custom column widths
-#### Using with custom column widths
+Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the [Article](./?path=/docs/components-page-layout-article--docs) component (**rare!**), you need to do a littie work to use this functionality.
-Snap width breakpoints are hard-coded to the default article well column widths, so if you set custom `columnWidths` on the `Article` tag (**rare!**), you can't use this functionality without a little extra work.
-
-Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Now, defined a few SCSS variables corresponding to your custom column widths and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
+Luckily, it's still pretty easy. Just add a `cls` or `id` to your `Block` so you can target it with some custom SCSS. Then define a few SCSS variables corresponding to your custom column widths, and use the `block-snap-widths` SCSS mixin to get the same functionality at your custom breakpoints.
```svelte
-
+ {#snippet content()}
+
+ {/snippet}
diff --git a/src/components/Block/Block.stories.svelte b/src/components/Block/Block.stories.svelte
index a73274dc..d1f22dc7 100644
--- a/src/components/Block/Block.stories.svelte
+++ b/src/components/Block/Block.stories.svelte
@@ -23,89 +23,136 @@
});
-
+
-
+{/snippet}
-
+
-
-