diff --git a/data/demos/demo.1lLBfFenH.json b/data/demos/demo.1lLBfFenH.json
new file mode 100644
index 0000000..a0c7d93
--- /dev/null
+++ b/data/demos/demo.1lLBfFenH.json
@@ -0,0 +1,36 @@
+{
+  "id": "1lLBfFenH",
+  "data": {
+    "props": {
+      "bandTitle": "Three Card Layout Example",
+      "bandContent": "Facilisis tristique id habitant dis augue interdum sagittis morbi et fusce, taciti erat maecenas ad auctor ipsum pulvinar luctus varius, massa diam blandit ridiculus potenti aptent feugiat risus primis."
+    },
+    "slots": {
+      "children": [
+        {
+          "type": "template-demo",
+          "demoId": "7D6QZNchkb",
+          "patternId": "card",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "DExtGOnv0o",
+          "patternId": "card",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "r8BEk0oKL",
+          "patternId": "card",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "3-Column Card Example",
+  "patternId": "layout",
+  "templateId": "react",
+  "description": "A description"
+}
diff --git a/data/demos/demo.2wyGdAaVjR.json b/data/demos/demo.2wyGdAaVjR.json
new file mode 100644
index 0000000..ca0c20e
--- /dev/null
+++ b/data/demos/demo.2wyGdAaVjR.json
@@ -0,0 +1,23 @@
+{
+  "id": "2wyGdAaVjR",
+  "data": {
+    "props": {
+      "date": "Mar 10, 2020 ",
+      "read": "4 min read",
+      "imgSrc": "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Brenna Goyette",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Brenna Goyette",
+  "patternId": "author",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.7D6QZNchkb.json b/data/demos/demo.7D6QZNchkb.json
new file mode 100644
index 0000000..df9343e
--- /dev/null
+++ b/data/demos/demo.7D6QZNchkb.json
@@ -0,0 +1,38 @@
+{
+  "id": "7D6QZNchkb",
+  "data": {
+    "props": {
+      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
+      "label": "Article",
+      "title": "Boost your conversion rate",
+      "imgSrc": "https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-1.2.1&ixqx=exTPH5Vqg4&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "type": "template-demo",
+          "demoId": "g1hgvKv0Qu",
+          "patternId": "author",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "LP0PDSh0i",
+          "patternId": "author",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "oHFFChOXky",
+          "patternId": "button",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Two Author CTA",
+  "patternId": "card",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.91d43J7jmh.json b/data/demos/demo.91d43J7jmh.json
new file mode 100644
index 0000000..d89fe8a
--- /dev/null
+++ b/data/demos/demo.91d43J7jmh.json
@@ -0,0 +1,21 @@
+{
+  "id": "91d43J7jmh",
+  "data": {
+    "props": {
+      "imgSrc": "https://images.unsplash.com/photo-1525130413817-d45c1d127c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1920&q=60&&sat=-100",
+      "heading": "Get in touch"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Mattis amet hendrerit dolor, quisque lorem pharetra. Pellentesque lacus nisi urna, arcu sociis eu. Orci vel           lectus nisl eget eget ut consectetur. Sit justo viverra non adipisicing elit distinctio.",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Main",
+  "patternId": "header",
+  "templateId": "react"
+}
diff --git a/data/demos/demo.BwVLYdA7GA.json b/data/demos/demo.BwVLYdA7GA.json
new file mode 100644
index 0000000..e000ad3
--- /dev/null
+++ b/data/demos/demo.BwVLYdA7GA.json
@@ -0,0 +1,39 @@
+{
+  "id": "BwVLYdA7GA",
+  "data": {
+    "props": {},
+    "slots": {
+      "children": [
+        {
+          "type": "template-demo",
+          "demoId": "arD82Utaju",
+          "patternId": "hero",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "1lLBfFenH",
+          "patternId": "layout",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "91d43J7jmh",
+          "patternId": "header",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "tuyC-DRiD8",
+          "patternId": "footer",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "New Variation",
+  "patternId": "one-pager",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.DExtGOnv0o.json b/data/demos/demo.DExtGOnv0o.json
new file mode 100644
index 0000000..028bbd3
--- /dev/null
+++ b/data/demos/demo.DExtGOnv0o.json
@@ -0,0 +1,26 @@
+{
+  "id": "DExtGOnv0o",
+  "data": {
+    "props": {
+      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit facilis asperiores porro quaerat doloribus, eveniet dolore. Adipisci tempora aut inventore optio animi., tempore temporibus quo laudantium.",
+      "label": "Video",
+      "title": "How to use search engine optimization to drive sales",
+      "imgSrc": "https://images.unsplash.com/photo-1547586696-ea22b4d4235d?ixlib=rb-1.2.1&ixqx=exTPH5Vqg4&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "type": "template-demo",
+          "demoId": "2wyGdAaVjR",
+          "patternId": "author",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "One Author - No CTA",
+  "patternId": "card",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.LP0PDSh0i.json b/data/demos/demo.LP0PDSh0i.json
new file mode 100644
index 0000000..ee8e1c1
--- /dev/null
+++ b/data/demos/demo.LP0PDSh0i.json
@@ -0,0 +1,22 @@
+{
+  "id": "LP0PDSh0i",
+  "data": {
+    "props": {
+      "date": "Mar 16, 2020",
+      "read": "6 min read",
+      "imgSrc": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Roel Aufderehar",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Roel Aufderehar",
+  "patternId": "author",
+  "templateId": "react"
+}
diff --git a/data/demos/demo.Md73hLM1l8.json b/data/demos/demo.Md73hLM1l8.json
new file mode 100644
index 0000000..f09f858
--- /dev/null
+++ b/data/demos/demo.Md73hLM1l8.json
@@ -0,0 +1,16 @@
+{
+  "id": "Md73hLM1l8",
+  "data": {
+    "props": {
+      "logo": "https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg",
+      "links": ["#1|Product", "#2|Features", "Marketplace", "Company", "About"],
+      "button": "#login|Login"
+    },
+    "slots": {}
+  },
+  "type": "data",
+  "title": "Full Featured Top Nav w/ Button",
+  "patternId": "top-nav",
+  "templateId": "react",
+  "description": "This Top Nav variation contains a logo, links, and a button."
+}
diff --git a/data/demos/demo.Qq5Hn9Gw3.json b/data/demos/demo.Qq5Hn9Gw3.json
new file mode 100644
index 0000000..f40b22f
--- /dev/null
+++ b/data/demos/demo.Qq5Hn9Gw3.json
@@ -0,0 +1,23 @@
+{
+  "id": "Qq5Hn9Gw3",
+  "data": {
+    "props": {
+      "date": "Mar 10, 2020 ",
+      "read": "4 min read",
+      "imgSrc": "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Brenna Goyette",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Brenna Goyette",
+  "patternId": "author",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.arD82Utaju.json b/data/demos/demo.arD82Utaju.json
new file mode 100644
index 0000000..5f47f07
--- /dev/null
+++ b/data/demos/demo.arD82Utaju.json
@@ -0,0 +1,27 @@
+{
+  "id": "arD82Utaju",
+  "data": {
+    "props": {
+      "buttonOne": "Get started!",
+      "buttonTwo": "Live Demo",
+      "paragraph": "Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.",
+      "headlineOne": "Data to enrich your ",
+      "headlineTwo": "online business",
+      "showBackground": false
+    },
+    "slots": {
+      "header": [
+        {
+          "type": "template-demo",
+          "demoId": "Md73hLM1l8",
+          "patternId": "top-nav",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Hero w/ Nav",
+  "patternId": "hero",
+  "templateId": "react"
+}
diff --git a/data/demos/demo.g1hgvKv0Qu.json b/data/demos/demo.g1hgvKv0Qu.json
new file mode 100644
index 0000000..ea2251e
--- /dev/null
+++ b/data/demos/demo.g1hgvKv0Qu.json
@@ -0,0 +1,23 @@
+{
+  "id": "g1hgvKv0Qu",
+  "data": {
+    "props": {
+      "date": "Mar 10, 2020 ",
+      "read": "4 min read",
+      "imgSrc": "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Brenna Goyette",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Brenna Goyette",
+  "patternId": "author",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.oHFFChOXky.json b/data/demos/demo.oHFFChOXky.json
new file mode 100644
index 0000000..63e24fb
--- /dev/null
+++ b/data/demos/demo.oHFFChOXky.json
@@ -0,0 +1,30 @@
+{
+  "id": "oHFFChOXky",
+  "data": {
+    "props": {
+      "url": "#url",
+      "icon": false,
+      "mode": "info",
+      "size": "medium",
+      "type": "solid",
+      "outline": false
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Button",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "theme": {
+    "Dual": "light"
+  },
+  "title": "Primary",
+  "width": 918,
+  "height": 65,
+  "patternId": "button",
+  "templateId": "react"
+}
diff --git a/data/demos/demo.r8BEk0oKL.json b/data/demos/demo.r8BEk0oKL.json
new file mode 100644
index 0000000..2142111
--- /dev/null
+++ b/data/demos/demo.r8BEk0oKL.json
@@ -0,0 +1,32 @@
+{
+  "id": "r8BEk0oKL",
+  "data": {
+    "props": {
+      "body": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint harum rerum voluptatem quo recusandae magni placeat saepe molestiae, sed excepturi cumque corporis perferendis hic.",
+      "label": "Case Study",
+      "title": "Improve your customer experience",
+      "imgSrc": "https://images.unsplash.com/photo-1492724441997-5dc865305da7?ixlib=rb-1.2.1&ixqx=exTPH5Vqg4&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1679&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "type": "template-demo",
+          "demoId": "x5QhQrZVwA",
+          "patternId": "author",
+          "templateId": "react"
+        },
+        {
+          "type": "template-demo",
+          "demoId": "Qq5Hn9Gw3",
+          "patternId": "author",
+          "templateId": "react"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Two Author - No CTA",
+  "patternId": "card",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/demos/demo.tuyC-DRiD8.json b/data/demos/demo.tuyC-DRiD8.json
new file mode 100644
index 0000000..77148d2
--- /dev/null
+++ b/data/demos/demo.tuyC-DRiD8.json
@@ -0,0 +1,95 @@
+{
+  "id": "tuyC-DRiD8",
+  "data": {
+    "props": {
+      "social": {
+        "github": true,
+        "twitter": true,
+        "dribbble": true,
+        "facebook": true,
+        "instagram": true
+      },
+      "tagline": "Making the world a better place through constructing elegant hierarchies.",
+      "copyright": "2020 Workflow, Inc. All rights reserved.",
+      "navigation": {
+        "legal": [
+          {
+            "href": "#legal-1",
+            "name": "Claim"
+          },
+          {
+            "href": "#legal-2",
+            "name": "Privacy"
+          },
+          {
+            "href": "#legal-3",
+            "name": "Terms"
+          }
+        ],
+        "company": [
+          {
+            "href": "#company-1",
+            "name": "About"
+          },
+          {
+            "href": "#company-2",
+            "name": "Blog"
+          },
+          {
+            "href": "#company-3",
+            "name": "Jobs"
+          },
+          {
+            "href": "#company-4",
+            "name": "Press"
+          },
+          {
+            "href": "#company-5",
+            "name": "Partners"
+          }
+        ],
+        "support": [
+          {
+            "href": "#support-1",
+            "name": "Pricing"
+          },
+          {
+            "href": "#support-2",
+            "name": "Documentation"
+          },
+          {
+            "href": "#support-3",
+            "name": "Guides"
+          },
+          {
+            "href": "#support-4",
+            "name": "API Status"
+          }
+        ],
+        "solutions": [
+          {
+            "href": "#solutions-1",
+            "name": "Marketing"
+          },
+          {
+            "href": "#solutions-2",
+            "name": "Analytics"
+          },
+          {
+            "href": "#solutions-3",
+            "name": "Commerce"
+          },
+          {
+            "href": "#solutions-4",
+            "name": "Insights"
+          }
+        ]
+      }
+    },
+    "slots": {}
+  },
+  "type": "data",
+  "title": "Main",
+  "patternId": "footer",
+  "templateId": "react"
+}
diff --git a/data/demos/demo.x5QhQrZVwA.json b/data/demos/demo.x5QhQrZVwA.json
new file mode 100644
index 0000000..7fbdb6e
--- /dev/null
+++ b/data/demos/demo.x5QhQrZVwA.json
@@ -0,0 +1,23 @@
+{
+  "id": "x5QhQrZVwA",
+  "data": {
+    "props": {
+      "date": "Feb 12, 2020",
+      "read": "11 min read",
+      "imgSrc": "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+    },
+    "slots": {
+      "children": [
+        {
+          "text": "Daniela Metz",
+          "type": "text"
+        }
+      ]
+    }
+  },
+  "type": "data",
+  "title": "Daniela Metz",
+  "patternId": "author",
+  "templateId": "react",
+  "description": ""
+}
diff --git a/data/knapsack.pattern.one-pager.json b/data/knapsack.pattern.one-pager.json
index 85d4dbb..de43055 100644
--- a/data/knapsack.pattern.one-pager.json
+++ b/data/knapsack.pattern.one-pager.json
@@ -55,7 +55,7 @@
       "title": "Playground",
       "templateLanguageId": "react",
       "assetSetIds": ["default", "dark"],
-      "demoIds": ["jIkrNzJ0cO", "eYJV0byNIp"],
+      "demoIds": ["jIkrNzJ0cO", "eYJV0byNIp", "BwVLYdA7GA"],
       "blockIds": []
     }
   ],