diff --git a/opentech/static_src/src/javascript/public/page-box.js b/opentech/static_src/src/javascript/public/page-box.js
new file mode 100644
index 0000000000000000000000000000000000000000..188079985498cad1ee2a38e2911d3ba708e63c51
--- /dev/null
+++ b/opentech/static_src/src/javascript/public/page-box.js
@@ -0,0 +1,7 @@
+(function ($) {
+
+    'use strict';
+
+    $('.page-box').wrapAll('<div class="wrapper wrapper--breakout wrapper--inner-space-large wrapper--page-box" />').wrapAll('<div class="wrapper wrapper--small wrapper--flex page-boxes" />');
+
+})(jQuery);
diff --git a/opentech/static_src/src/sass/public/components/_page-box.scss b/opentech/static_src/src/sass/public/components/_page-box.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e1880dccfd2d863115ff6b7b474923cc2877c2b8
--- /dev/null
+++ b/opentech/static_src/src/sass/public/components/_page-box.scss
@@ -0,0 +1,65 @@
+.page-boxes {
+    flex-flow: wrap;
+    justify-content: space-between;
+}
+
+.page-box {
+    padding: 1rem;
+    margin-bottom:  1rem;
+    background-color: $color--white;
+
+    @include media-query(tablet-portrait) {
+        padding: 2rem;
+        margin-bottom:  2rem;
+        width:  48%;
+    }
+
+    & > .wrapper {
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top:  0;
+            right:  0;
+            width: 40px;
+            height: 40px;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .otf-icon-red {
+        &::before {
+            background-image: url('./../../images/learnings/otf-icon-red.svg');
+        }
+    }
+
+    .bullhorn-icon-red {
+        &::before {
+            background-image: url('./../../images/learnings/bullhorn-icon-red.svg');
+        }
+    }
+
+    .potion-icon-red {
+        &::before {
+            background-image: url('./../../images/learnings/potion-icon-red.svg');
+        }
+    }
+
+    .user-friends-icon-red {
+        &::before {
+            background-image: url('./../../images/learnings/user-friends-icon-red.svg');
+        }
+    }
+
+    b:first-of-type {
+        color: $color--pink;
+    }
+
+    h3,
+    h4,
+    h5 {
+        color: $color--dark-blue;
+    }
+
+}
diff --git a/opentech/static_src/src/sass/public/components/_wrapper.scss b/opentech/static_src/src/sass/public/components/_wrapper.scss
index 4ae716a77baf82b93e90ecd3074d765ee6cda180..1267dbaeac81f109739f842b665e5c79fc469985 100644
--- a/opentech/static_src/src/sass/public/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/public/components/_wrapper.scss
@@ -244,4 +244,12 @@
     &--center {
         text-align: center;
     }
+
+    &--flex {
+        display:  flex;
+    }
+
+    &--page-box {
+        background-color: $color--light-grey;
+    }
 }
diff --git a/opentech/static_src/src/sass/public/main.scss b/opentech/static_src/src/sass/public/main.scss
index 6cb1a024548c35c364e249c8c52fac82483efa19..474d97f992bbd6d7aec40919ea9c021e23dcefd5 100644
--- a/opentech/static_src/src/sass/public/main.scss
+++ b/opentech/static_src/src/sass/public/main.scss
@@ -28,6 +28,7 @@
 @import 'components/media-box';
 @import 'components/messages';
 @import 'components/nav';
+@import 'components/page-box';
 @import 'components/pagination';
 @import 'components/responsive-object';
 @import 'components/rich-text';