diff --git a/components/blocks/vf-section-header/vf-section-header.config.yml b/components/blocks/vf-section-header/vf-section-header.config.yml
index 9dde1e4b3e00c2ebf070c76cd72989d29f9e2d4a..15b7651e3112aaef6801030a9f7dd008f80f319b 100755
--- a/components/blocks/vf-section-header/vf-section-header.config.yml
+++ b/components/blocks/vf-section-header/vf-section-header.config.yml
@@ -1,2 +1,4 @@
 title: Section Header
 label: Section Header
+context:
+  section-title: Projects
diff --git a/components/blocks/vf-section-header/vf-section-header.hbs b/components/blocks/vf-section-header/vf-section-header.hbs
index a3fe970f9b2141677150e39f1e73e8782280f038..8c14e8fee9cdd492dbc5d2011de19d74fc20069e 100755
--- a/components/blocks/vf-section-header/vf-section-header.hbs
+++ b/components/blocks/vf-section-header/vf-section-header.hbs
@@ -1,3 +1,3 @@
 <div class="vf-section-header">
-  <h2 class="vf-section-header__heading | vf-text vf-text--heading-r">Projects</h2>
+  <h2 class="vf-section-header__heading | vf-text vf-text--heading-r">{{section-title}}</h2>
 </div>
diff --git a/components/blocks/vf-summary/vf-summary.config.yml b/components/blocks/vf-summary/vf-summary.config.yml
index 97107db6f75e4680528b15e4c175b76723484078..86fa41f43da0c73b6fa0a6681e54efe97c074993 100755
--- a/components/blocks/vf-summary/vf-summary.config.yml
+++ b/components/blocks/vf-summary/vf-summary.config.yml
@@ -1,2 +1,5 @@
 title: Summary Pattern
 label: Summary
+context:
+  summary__title: What is Cancer?
+  summary__text: Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body.
diff --git a/components/blocks/vf-summary/vf-summary.hbs b/components/blocks/vf-summary/vf-summary.hbs
index 7796220c0c95c66fd764c4e6f622f1cca78b1aa4..5450f7faac6262226832653ff866533578bd33f7 100755
--- a/components/blocks/vf-summary/vf-summary.hbs
+++ b/components/blocks/vf-summary/vf-summary.hbs
@@ -1,6 +1,6 @@
-<aside class="vf-summary">
+<article class="vf-summary">
   <h3 class="vf-summary__title vf-text vf-text--heading-l">
-    <a href="#" class="vf-link">What is Cancer?</a>
+    <a href="#" class="vf-link">{{ summary__title }}</a>
   </h3>
-  <p class="vf-summary__text vf-text vf-text--body-r">Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body.</p>
-</aside>
+  <p class="vf-summary__text vf-text vf-text--body-r">{{ summary__text }}</p>
+</article>
diff --git a/components/containers/vf-summary-container/CHANGELOG.md b/components/containers/vf-summary-container/CHANGELOG.md
new file mode 100755
index 0000000000000000000000000000000000000000..f512cfff9607b896054e45f610dea3eb685636d4
--- /dev/null
+++ b/components/containers/vf-summary-container/CHANGELOG.md
@@ -0,0 +1,15 @@
+# 0.1.0
+
+### Added
+- added this
+- added that
+
+### Changes
+
+- changed this
+- changed that
+
+### Removed
+
+- deleted this
+- deleted that
diff --git a/components/containers/vf-summary-container/README.md b/components/containers/vf-summary-container/README.md
new file mode 100755
index 0000000000000000000000000000000000000000..73961688e47026cf3eab0c3dbbd6b31ad1bfe151
--- /dev/null
+++ b/components/containers/vf-summary-container/README.md
@@ -0,0 +1 @@
+# vf-summary Pattern
diff --git a/components/containers/vf-summary-container/index.scss b/components/containers/vf-summary-container/index.scss
new file mode 100755
index 0000000000000000000000000000000000000000..ea797f7942ffda67a8f87c2203e9a14c1d81484c
--- /dev/null
+++ b/components/containers/vf-summary-container/index.scss
@@ -0,0 +1,10 @@
+// setup files required
+
+// sass-lint:disable clean-import-paths
+@import './assets/scss/variables/variables.scss';
+@import './assets/scss/functions/functions.scss';
+@import './assets/scss/mixins/mixins.scss';
+
+// pattern specific styles
+
+@import 'vf-summary.scss';
diff --git a/components/containers/vf-summary-container/package.json b/components/containers/vf-summary-container/package.json
new file mode 100755
index 0000000000000000000000000000000000000000..4fae9d2fcc86ac45d665fa995da081ab33ad0dd8
--- /dev/null
+++ b/components/containers/vf-summary-container/package.json
@@ -0,0 +1,26 @@
+{
+  "version": "0.0.1",
+  "name": "vf-summary",
+  "description": "vf-summary component",
+  "homepage": "",
+  "author": "VF",
+  "license": "Apache 2.0",
+  "style": "build/vf-summary.css",
+  "main": "build/index.js",
+  "files": [
+    "index.scss",
+    "lib",
+    "CHANGELOG.md"
+  ],
+  "test": "echo \"Error: no test specified\" && exit 1",
+  "repo": "",
+  "bugs": {
+    "url": ""
+  },
+  "dependencies": {
+  },
+  "keywords": [
+    "fractal",
+    "component"
+  ]
+}
diff --git a/components/containers/vf-summary-container/vf-summary-container.config.yml b/components/containers/vf-summary-container/vf-summary-container.config.yml
new file mode 100755
index 0000000000000000000000000000000000000000..3319ee9348502339bbb8e297397b5216922b7d2e
--- /dev/null
+++ b/components/containers/vf-summary-container/vf-summary-container.config.yml
@@ -0,0 +1,13 @@
+title: Summary Container Pattern
+label: Summary Container
+context:
+  section-title: Learn about Cancer
+  item01:
+    summary__title: What is Cancer?
+    summary__text: Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body.
+  item02:
+    summary__title: Cancer and EMBL
+    summary__text: EMBL researchers use both computational and traditional lab research to try and understand why cancer happens and how cancer grows and spreads. They can sample and test how tumours and drugs react and find unique molecular data to identify diseases.
+  item03:
+    summary__title: What does Cancer look like?
+    summary__text: Cancer is caused by uncontrolled cell division. These cells are tiny, but but can quickly add up and cancerous cells can look very different from healthy ones.
diff --git a/components/containers/vf-summary-container/vf-summary-container.hbs b/components/containers/vf-summary-container/vf-summary-container.hbs
new file mode 100755
index 0000000000000000000000000000000000000000..27d3cc9bc8eb3374539a65477dffd0151347433e
--- /dev/null
+++ b/components/containers/vf-summary-container/vf-summary-container.hbs
@@ -0,0 +1,13 @@
+<section class="vf-summary-container | embl-grid embl-grid--with-label">
+
+  {{> '@vf-section-header'}}
+
+  <div class="vf-section-content | vf-grid vf-grid__col-3">
+
+    {{> '@vf-summary' item01 }}
+    {{> '@vf-summary' item02 }}
+    {{> '@vf-summary' item03 }}
+
+  </div>
+
+</section>
diff --git a/components/containers/vf-summary-container/vf-summary-container.scss b/components/containers/vf-summary-container/vf-summary-container.scss
new file mode 100755
index 0000000000000000000000000000000000000000..2ebb6210d13e0b7ee47a27a142c1e1bc7f3bb9cf
--- /dev/null
+++ b/components/containers/vf-summary-container/vf-summary-container.scss
@@ -0,0 +1,5 @@
+// vf-summary
+
+.vf-summary {
+
+}