diff --git a/src/patterns/04-components/codepen/codepen.twig b/src/patterns/04-components/codepen/codepen.twig
new file mode 100644
index 0000000000000000000000000000000000000000..67f6b442ae89477ff16c4ba1be68c2f9d314a0cf
--- /dev/null
+++ b/src/patterns/04-components/codepen/codepen.twig
@@ -0,0 +1,4 @@
+<div class="uw-codepen">
+  <div class="codepen" data-height="{{ height }}" data-theme-id="{{ theme_id }}" data-slug-hash="{{ slug_hash }}" data-default-tab="{{ default_tab }}" data-user="{{ username }}" data-pen-title="{{ pen_title|escape }}" data-preview="{{ preview }}">See the Pen <a href="https://codepen.io/{{ username }}/pen/{{ slug_hash }}/">{{ pen_title|escape }}</a> by {{ displayname|escape }} (<a href="https://codepen.io/{{ username }}/">@{{ username }}</a>) on <a href="https://codepen.io/">CodePen</a>.</div>
+  <script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+</div>
diff --git a/src/patterns/04-components/codepen/codepen.yml b/src/patterns/04-components/codepen/codepen.yml
new file mode 100644
index 0000000000000000000000000000000000000000..858fd9c9dd8ce5d6bccf478affc87f49efe9821f
--- /dev/null
+++ b/src/patterns/04-components/codepen/codepen.yml
@@ -0,0 +1,8 @@
+slug_hash: 'qgxdrj'
+username: 'kpaxman'
+pen_title: 'Hover check'
+displayname: 'Kevin Paxman'
+default_tab: 'result'
+height: 300
+theme_id: 'dark'
+preview: 'true'