diff --git a/content/patterns/widgets/example2.md b/content/patterns/widgets/example2.md
index fa2cfcb..69c721e 100644
--- a/content/patterns/widgets/example2.md
+++ b/content/patterns/widgets/example2.md
@@ -22,7 +22,18 @@ tags = ["animated", "interactive"]
 <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac sodales <code>.generate()</code> magna. Aliquam tincidunt velit sit amet <a href='#'>ante hendrerit</a> tempus. Donec et nisi dictum felis sollicitudin congue.</p>
 
 {{<demo>}}
-
+<p>You must be having a laugh.</p>
+<style>
+p {
+  color: red !important;
+  font-family: cursive;
+}
+</style>
+<script>
+  demo.querySelector('p').addEventListener('click', function() {
+    alert('hello');
+  })
+</script>
 {{</demo>}}
 
 <p>Nulla vel magna sit &mdash; amet dui lobortis commodo &mdash; vitae vel nulla. Nulla lobortis tempus commodo. </p>
diff --git a/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html b/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
index 7df12e0..9b1d835 100644
--- a/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
+++ b/themes/inclusive-pattern-docs/layouts/shortcodes/demo.html
@@ -3,18 +3,7 @@
   <div id="demo-{{ $uniq }}">
   </div>
   <template id="template-{{ $uniq }}">
-    <p>You must be joking.</p>
-    <style>
-    p {
-      color: red !important;
-      font-family: cursive;
-    }
-    </style>
-    <script>
-      demo.querySelector('p').addEventListener('click', function() {
-        alert('hello');
-      })
-    </script>
+    {{ .Inner }}
   </template>
   <script>
     (function() {
diff --git a/themes/inclusive-pattern-docs/static/css/styles.css b/themes/inclusive-pattern-docs/static/css/styles.css
index 9b4ea9f..9d940e9 100644
--- a/themes/inclusive-pattern-docs/static/css/styles.css
+++ b/themes/inclusive-pattern-docs/static/css/styles.css
@@ -314,6 +314,17 @@ th:empty {
   margin-top: 0;
 }
 
+.note.warning {
+  border-left: 0;
+  background-image: url(images/stripe.svg);
+  background-size: 0.5rem auto;
+  background-repeat: repeat-y;
+}
+
+.note.warning > div {
+  margin-left: 1.25rem;
+}
+
 /* Tick lists */
 
 .ticks li {