diff --git a/bedrock.config.js b/bedrock.config.js
index 8981d31a..ee42dd40 100644
--- a/bedrock.config.js
+++ b/bedrock.config.js
@@ -35,6 +35,7 @@ module.exports = {
     componentCategories: {
       aov: 'Overviews',
       c: 'Components',
+      cc: 'Custom components category',
     }
   },
   /**
diff --git a/content/docs/patterns/doc-example-2.pug b/content/docs/patterns/doc-example-2.pug
index 592760eb..2e391d18 100644
--- a/content/docs/patterns/doc-example-2.pug
+++ b/content/docs/patterns/doc-example-2.pug
@@ -10,9 +10,9 @@ p This one should be first.
 
 p This is just an example of how you can make static docs.
 
-p You could include real code examples here. Notice how we are referencing c-example here.
+p You could include real code examples here. Notice how we are referencing <code>c-example-manual-docs</code> here.
 
 .br-sample
     .br-sample-content(style="height: 200px; overflow: scroll")
-        include /templates/_components/c-example/01-example
+        include /templates/_components/c-example-manual-docs/01-example
 
diff --git a/content/docs/patterns/doc-example.pug b/content/docs/patterns/doc-example.pug
index 7bcc3a4b..96add1d1 100644
--- a/content/docs/patterns/doc-example.pug
+++ b/content/docs/patterns/doc-example.pug
@@ -8,9 +8,20 @@ h2 This is a docs page
 
 p This is just an example of how you can make static docs.
 
-p You could include real code examples here. Notice how we are referencing c-example here.
+p This page should be second. Page order is influenced by the <code>order</code> number in the front matter.
+
+pre
+    code.
+        ---
+        title: Doc page example
+        category: Design patterns
+        order: 2
+        ---
+
+
+p You could include real code examples here. Notice how we are referencing <code>c-example-manual-docs</code> here.
 
 .br-sample
     .br-sample-content(style="height: 200px; overflow: scroll")
-        include /templates/_components/c-example/01-example
+        include /templates/_components/c-example-manual-docs/01-example
 
diff --git a/content/templates/_components/c-example-2/_docs-footer.md b/content/templates/_components/c-example-2/_docs-footer.md
deleted file mode 100644
index 82d1b8e7..00000000
--- a/content/templates/_components/c-example-2/_docs-footer.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Footer Content
-containsCustom: true
----
-
-This is the footer
diff --git a/content/templates/_components/c-example-2/_docs.md b/content/templates/_components/c-example-2/_docs.md
deleted file mode 100644
index 1e90bff8..00000000
--- a/content/templates/_components/c-example-2/_docs.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Example with automatic humanized names
-containsCustom: true
----
-
-These names should be humanized.
\ No newline at end of file
diff --git a/content/templates/_components/c-example-2/01-button-test-03.pug b/content/templates/_components/c-example-custom-marker/01-my-custom-component.pug
similarity index 100%
rename from content/templates/_components/c-example-2/01-button-test-03.pug
rename to content/templates/_components/c-example-custom-marker/01-my-custom-component.pug
diff --git a/content/templates/_components/c-example-custom-marker/_docs.md b/content/templates/_components/c-example-custom-marker/_docs.md
new file mode 100644
index 00000000..b5fe1218
--- /dev/null
+++ b/content/templates/_components/c-example-custom-marker/_docs.md
@@ -0,0 +1,6 @@
+---
+title: Custom example
+containsCustom: true
+---
+
+Example that is marked as “custom”. Useful to denote a component as custom when documenting changes to a standard framework (e.g. Bootstrap).
\ No newline at end of file
diff --git a/content/templates/_components/c-example-2/02-button-test.pug b/content/templates/_components/c-example-footer-docs/02-button-test.pug
similarity index 100%
rename from content/templates/_components/c-example-2/02-button-test.pug
rename to content/templates/_components/c-example-footer-docs/02-button-test.pug
diff --git a/content/templates/_components/c-example-footer-docs/_docs-footer.md b/content/templates/_components/c-example-footer-docs/_docs-footer.md
new file mode 100644
index 00000000..c12c9e6a
--- /dev/null
+++ b/content/templates/_components/c-example-footer-docs/_docs-footer.md
@@ -0,0 +1,23 @@
+---
+title: Footer Content
+---
+
+This example has docs the footer. Useful to maybe put a table here with props.
+
+<table>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Description</th>
+    </tr>
+    <tr>
+        <td>Prop</td>
+        <td>Boolean</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</td>
+    </tr>
+    <tr>
+        <td>Prop</td>
+        <td>Boolean</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</td>
+    </tr>
+</table>
\ No newline at end of file
diff --git a/content/templates/_components/c-example/01-example.pug b/content/templates/_components/c-example-humanized-names/01-button-test-03.pug
similarity index 100%
rename from content/templates/_components/c-example/01-example.pug
rename to content/templates/_components/c-example-humanized-names/01-button-test-03.pug
diff --git a/content/templates/_components/c-example/02-example-2.pug b/content/templates/_components/c-example-humanized-names/02-button-test.pug
similarity index 100%
rename from content/templates/_components/c-example/02-example-2.pug
rename to content/templates/_components/c-example-humanized-names/02-button-test.pug
diff --git a/content/templates/_components/c-example-humanized-names/_docs.md b/content/templates/_components/c-example-humanized-names/_docs.md
new file mode 100644
index 00000000..1c89cdd5
--- /dev/null
+++ b/content/templates/_components/c-example-humanized-names/_docs.md
@@ -0,0 +1,5 @@
+---
+title: Example with automatic humanized names
+---
+
+Example where we only have pug files, no markdown files. The names of the docs are automatically “humanized”.
\ No newline at end of file
diff --git a/content/templates/_components/c-example/01-example.md b/content/templates/_components/c-example-manual-docs/01-example.md
similarity index 100%
rename from content/templates/_components/c-example/01-example.md
rename to content/templates/_components/c-example-manual-docs/01-example.md
diff --git a/content/templates/_components/c-example-manual-docs/01-example.pug b/content/templates/_components/c-example-manual-docs/01-example.pug
new file mode 100644
index 00000000..48bec303
--- /dev/null
+++ b/content/templates/_components/c-example-manual-docs/01-example.pug
@@ -0,0 +1,2 @@
+.example
+    p This is an example component.
diff --git a/content/templates/_components/c-example/02-example-2.md b/content/templates/_components/c-example-manual-docs/02-example-2.md
similarity index 100%
rename from content/templates/_components/c-example/02-example-2.md
rename to content/templates/_components/c-example-manual-docs/02-example-2.md
diff --git a/content/templates/_components/c-example-manual-docs/02-example-2.pug b/content/templates/_components/c-example-manual-docs/02-example-2.pug
new file mode 100644
index 00000000..48bec303
--- /dev/null
+++ b/content/templates/_components/c-example-manual-docs/02-example-2.pug
@@ -0,0 +1,2 @@
+.example
+    p This is an example component.
diff --git a/content/templates/_components/c-example/_docs.md b/content/templates/_components/c-example-manual-docs/_docs.md
similarity index 100%
rename from content/templates/_components/c-example/_docs.md
rename to content/templates/_components/c-example-manual-docs/_docs.md
diff --git a/content/templates/_components/c-example/03-with-source.md b/content/templates/_components/c-example-named-source/03-with-source.md
similarity index 100%
rename from content/templates/_components/c-example/03-with-source.md
rename to content/templates/_components/c-example-named-source/03-with-source.md
diff --git a/content/templates/_components/c-example-named-source/03-with-source.pug b/content/templates/_components/c-example-named-source/03-with-source.pug
new file mode 100644
index 00000000..a7e1f3e3
--- /dev/null
+++ b/content/templates/_components/c-example-named-source/03-with-source.pug
@@ -0,0 +1,2 @@
+.example
+    p This is an example component with a named source. In this case “unofficial”.
diff --git a/content/templates/_components/c-example-named-source/_docs.md b/content/templates/_components/c-example-named-source/_docs.md
new file mode 100644
index 00000000..e3936b64
--- /dev/null
+++ b/content/templates/_components/c-example-named-source/_docs.md
@@ -0,0 +1,5 @@
+---
+title: Example with named source
+---
+
+Example with a named source.
\ No newline at end of file
diff --git a/content/templates/_components/c-example/03-with-source.pug b/content/templates/_components/c-example/03-with-source.pug
deleted file mode 100644
index ae9d5f32..00000000
--- a/content/templates/_components/c-example/03-with-source.pug
+++ /dev/null
@@ -1,2 +0,0 @@
-.example
-    p This is an example component with a named source.
diff --git a/content/templates/_components/cc-example/01-my-component.pug b/content/templates/_components/cc-example/01-my-component.pug
new file mode 100644
index 00000000..48bec303
--- /dev/null
+++ b/content/templates/_components/cc-example/01-my-component.pug
@@ -0,0 +1,2 @@
+.example
+    p This is an example component.
diff --git a/content/templates/_components/cc-example/_docs.md b/content/templates/_components/cc-example/_docs.md
new file mode 100644
index 00000000..9e52280b
--- /dev/null
+++ b/content/templates/_components/cc-example/_docs.md
@@ -0,0 +1,5 @@
+---
+title: Custom category
+---
+
+This example occurs in a custom category. You can define categories in `bedrock.config.js`.
\ No newline at end of file
diff --git a/content/templates/_components/whitespace-test/whitespace-test.pug b/content/templates/_components/whitespace-test/whitespace-test.pug
deleted file mode 100644
index cbc99b4b..00000000
--- a/content/templates/_components/whitespace-test/whitespace-test.pug
+++ /dev/null
@@ -1,3 +0,0 @@
-p
-    a
-        span Test
\ No newline at end of file