diff --git a/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.html b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.html
new file mode 100644
index 0000000000000000000000000000000000000000..101e73ee1242e61286f52da9c6e64f0910770e81
--- /dev/null
+++ b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.html
@@ -0,0 +1,21 @@
+<ul class="accordion foldable-info-tabs" data-accordion data-allow-all-closed="true" data-multi-expand="true" data-slide-speed="0">
+  <li data-accordion-item>
+    <a href="#" class="tag">I don’t think our service is processing personal data?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      Are you sure? Some examples of personal data processing that you might be doing without thinking about them: Web analytics capturing users locations? Logging of IP addresses in application logs? Email lists? Surveys of users? Helpdesk or email support?
+    </div>
+  </li>
+  <li data-accordion-item>
+    <a href="#" class="tag">What is “personal data”?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      <p>“Personal data” is a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person.</p>
+      <p>Example of personal data: IP address, ORCID, email address...etc.  </p>
+    </div>
+  </li>
+  <li data-accordion-item>
+    <a href="#" class="tag">What is “processing of personal data”?</a>
+    <div class="accordion-content callout clear" data-tab-content>
+      “Processing of personal data” means any operation, automated or not, performed with the data. Examples of data processing are collection, storage, deletion, structuring, adaptation, consultation, use or dissemination.
+    </div>
+  </li>
+</ul>
diff --git a/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.png b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2e7fb125d53c6b99a75c43d4a8ba2d1e2be5701
Binary files /dev/null and b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.png differ
diff --git a/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.scss b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..959494ab5655f2418c3f63d66b9ebfc29cce6eaa
--- /dev/null
+++ b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.scss
@@ -0,0 +1,19 @@
+.foldable-info-tabs > li {
+  margin-bottom: .5rem;
+  > a:hover {
+    background: #DDD;
+    color: #222;
+  }
+  > a:before {
+    font-family: 'EBI-Common';
+    content: "\003f";
+    margin-right: .5rem;
+
+  }
+  &.is-active > a:before {
+    content: "\0f11a";
+
+  }
+  > .accordion-content {
+  }
+}
diff --git a/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.yml b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.yml
new file mode 100644
index 0000000000000000000000000000000000000000..a44e14157a85437361106cb4e500089f4a8ca728
--- /dev/null
+++ b/content/websites/patterns/foldable-info-tabs/foldable-info-tabs.yml
@@ -0,0 +1,14 @@
+name: 'Foldable info tabs'
+tags:
+  - interactive
+  - accordian
+  - help
+category: containers
+description: Add some contextual help.
+versions:
+  - 1.2.0
+  - 1.3.0
+author:
+  name: Ken Hawkins
+  github: khawkins98
+  twitter: khawkins98
diff --git a/content/websites/patterns/foldable-info-tabs/layout.html b/content/websites/patterns/foldable-info-tabs/layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..9541d4a4f214bf218242992193eb63b6a12262ac
--- /dev/null
+++ b/content/websites/patterns/foldable-info-tabs/layout.html
@@ -0,0 +1,9 @@
+{{#markdown}}
+
+Leveraging the [Foundation Accordian feature](https://foundation.zurb.com/sites/docs/accordion.html), use this pattern to display contextual tips in an unobtrusive way.
+
+<div class="row"><div class="column">
+{{> foldable-info-tabs}}
+</div></div>
+
+{{/markdown}}
diff --git a/content/websites/patterns/modal/layout.html b/content/websites/patterns/modal/layout.html
index 033eea7279cd40774cff73f7890ab271d6e09482..489e5a5c896383df6d9672560899b13f1e7265c8 100644
--- a/content/websites/patterns/modal/layout.html
+++ b/content/websites/patterns/modal/layout.html
@@ -6,6 +6,8 @@ Here's how to implement the [Foundation Reveal](https://foundation.zurb.com/site
 
 This is a stub pattern that references the Foudnation documentation, <a href="https://foundation.zurb.com/sites/docs/reveal.html" class="readmore">have a read of it for configurartion options</a>
 
+Tip: if you just need to add some contextual help, [consider the Foldable Info Tabs pattern]({{root}}websites/patterns/foldable-info-tabs.html).
+
 {{/markdown}}
 
 {{> modal}}
diff --git a/content/websites/patterns/modal/modal.yml b/content/websites/patterns/modal/modal.yml
index 8677c6aec7b606230a83dc2e54bffb836896e617..8c7ba46b7c64be397893894d30c823de7f5c72ab 100644
--- a/content/websites/patterns/modal/modal.yml
+++ b/content/websites/patterns/modal/modal.yml
@@ -1,11 +1,12 @@
 name: 'Dialouge modal'
 tags:
-- prompt
-- messaging
-- modal
-- reveal
-category: typography
-description: For your obtrusive messaging needs. 
+  - prompt
+  - messaging
+  - modal
+  - reveal
+  - interactive
+category: containers
+description: For your obtrusive messaging needs.
 versions:
   - 1.1.0
   - 1.2.0