diff --git a/css/styles.css b/css/styles.css
index a6d0e126d2364c63dc9a6fc814edee4d2a00a5a9..0c58651a4860e4131ed4ecc60942160f46a9457f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -7638,6 +7638,10 @@ picture img {
   text-transform: none;
 }
 
+.uw-tableau__placeholder {
+  position: relative;
+}
+
 .uw-tabs {
   margin: 16px auto;
   width: 100%;
diff --git a/source/_patterns/04-components/tableau/_tableau.scss b/source/_patterns/04-components/tableau/_tableau.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bf7d7a59b7cd72483609f01bee14d6c91142fe77
--- /dev/null
+++ b/source/_patterns/04-components/tableau/_tableau.scss
@@ -0,0 +1,5 @@
+.uw-tableau {
+  &__placeholder {
+    position: relative;
+  }
+}
diff --git a/source/_patterns/04-components/tableau/tableau.twig b/source/_patterns/04-components/tableau/tableau.twig
new file mode 100644
index 0000000000000000000000000000000000000000..f45d8b9ee72d9e37b89670fcc8f4f73ffd5d00c7
--- /dev/null
+++ b/source/_patterns/04-components/tableau/tableau.twig
@@ -0,0 +1,22 @@
+<div class="uw-tableau">
+  <div class="uw-tableau__wrapper">
+    <div class="uw-tableau__placeholder" id="embedded-tableau-{{ tableau.key }}">
+      <object class="tableauViz" type="text/html">
+        <param name="host_url" value="{{ tableau.host_url }}" />
+        <param name="site_root" value="{{ tableau.tableau_site }}" />
+        <param name="name" value="{{ tableau.url }}" />
+        <param name="tabs" value="{{ tableau.tabs }}" />
+        <div class="uw-tableau__no_js_message">Enable JavaScript to view data visualisation.</div>
+      </object>
+    </div>
+    <script>
+      var divElement = document.getElementById('embedded-tableau-{{ tableau.key }}');
+      var vizElement = divElement.getElementsByTagName('object')[0];
+      vizElement.style.width = '100%';
+      vizElement.style.height = '{{ tableau.height }}px';
+      var scriptElement = document.createElement('script');
+      scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';
+      vizElement.parentNode.insertBefore(scriptElement, vizElement);
+    </script>
+  </div>
+</div>
diff --git a/source/_patterns/04-components/tableau/tableau.yml b/source/_patterns/04-components/tableau/tableau.yml
new file mode 100644
index 0000000000000000000000000000000000000000..e9e632f3f11ca2dd3f20ce15a062bb9ece79b800
--- /dev/null
+++ b/source/_patterns/04-components/tableau/tableau.yml
@@ -0,0 +1,8 @@
+---
+tableau:
+  key: '1'
+  host_url: 'https://public.tableau.com/'
+  tableau_site:
+  url: 'SPINTERIM_ExperientialLearning/Incoming-IND'
+  tabs: 'no'
+  height: '650'