ISTWCMS-5724: adding codepen

src/patterns/04-components/codepen/codepen.twig

+<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>

src/patterns/04-components/codepen/codepen.yml

+slug_hash: 'qgxdrj'
+username: 'kpaxman'
+pen_title: 'Hover check'
+displayname: 'Kevin Paxman'
+default_tab: 'result'
+height: 300
+theme_id: 'dark'
+preview: 'true'