diff --git a/astro.config.mjs b/astro.config.mjs
index a96e029..c76e952 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -33,6 +33,12 @@ export default defineConfig({
             directory: "components",
           },
         },
+        {
+          label: "Classes",
+          autogenerate: {
+            directory: "classes",
+          },
+        },
       ],
     }),
   ],
diff --git a/src/content/config.ts b/src/content/config.ts
index 9df91b6..f043fb4 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -1,7 +1,7 @@
-import { defineCollection } from 'astro:content';
-import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from "astro:content";
+import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
-	i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
+  docs: defineCollection({ schema: docsSchema() }),
+  i18n: defineCollection({ type: "data", schema: i18nSchema() }),
 };
diff --git a/src/content/docs/classes/img-outline.mdx b/src/content/docs/classes/img-outline.mdx
new file mode 100644
index 0000000..83b2fdb
--- /dev/null
+++ b/src/content/docs/classes/img-outline.mdx
@@ -0,0 +1,17 @@
+---
+title: img-outline
+---
+
+import { LinkOut } from "@interledger/docs-design-system";
+
+Use the `img-outline` class to add a border to an image. The border is 1px solid gray with rounded edges and a bit of a drop shadow.
+
+```html
+<img
+  src="/img/snippets/view-keys.png"
+  alt="Alt text goes here"
+  class="img-outline"
+/>
+```
+
+See the <LinkOut href='https://webmonetization.org/docs/intro/web-monetization-flow/'>Web Monetization flow sequence diagram</LinkOut> for an example.
diff --git a/src/content/docs/components/snippets.mdx b/src/content/docs/components/snippets.mdx
new file mode 100644
index 0000000..e8dec8f
--- /dev/null
+++ b/src/content/docs/components/snippets.mdx
@@ -0,0 +1,21 @@
+---
+title: Snippet
+---
+
+:::danger
+HJ is still building out this component to work the way we need it to.
+:::
+
+## Usage
+
+Import the `Snippets` component like so:
+
+```jsx
+import Snippet from "/src/components/Snippet.astro";
+```
+
+Use the `<Snippet>` component within your content like so:
+
+```
+<Snippet source='https://raw.githubusercontent.com/interledger/open-payments-snippets/main/incoming-payment/incoming-payment-create.ts' />
+```
diff --git a/tsconfig.json b/tsconfig.json
index 032ad64..b7243b9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,4 +4,4 @@
     "jsx": "react-jsx",
     "jsxImportSource": "react"
   }
-}
\ No newline at end of file
+}