diff --git a/src/assets/sass/demos/block-demo.scss b/src/assets/sass/demos/block-demo.scss
new file mode 100644
index 000000000..5361ea824
--- /dev/null
+++ b/src/assets/sass/demos/block-demo.scss
@@ -0,0 +1,87 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Block demo
+
+@import '../protocol/includes/lib';
+@import '../docs/protocol';
+@import '../docs/protocol-extra';
+
+#config {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-column-gap: $layout-md;
+    grid-row-gap: $layout-md;
+
+    fieldset fieldset {
+        margin-bottom: $layout-sm;
+    }
+
+    legend {
+        @include font-size(16px);
+    }
+}
+
+#config-preset {
+    grid-column-start: 1;
+    grid-column-end: 4;
+}
+
+.demo {
+    .mzp-c-block,
+    .mzp-c-block-container,
+    .mzp-c-block-media,
+    .mzp-c-block-body {
+
+        &:before {
+            content: attr(class);
+            background-color: #fff;
+            color: #000;
+            display: block;
+            font-family: monospace;
+            font-size: 12px;
+            left: 0;
+            padding: 0 2px;
+            position: absolute;
+            top: 0;
+            z-index: 1;
+        }
+    }
+
+    .mzp-c-block-container {
+        &:before {
+            top: 1em;
+        }
+    }
+
+    .mzp-c-block {
+    outline: 1px solid red;
+    }
+
+    .mzp-c-block-container {
+        background-color: rgba(0, 0, 255, 0.1);
+    }
+
+    .mzp-c-block-media {
+        background-color: rgba(0, 255, 0, 0.1);
+    }
+
+    .mzp-c-block-body {
+        background-color: rgba(255, 0, 0, 0.1);
+    }
+}
+
+.spacer {
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: center;
+    height: 200px;
+    margin: 20px;
+}
+
+#demo-block .mzp-has-bg .mzp-c-block-container {
+    background-color: $color-yellow-20;
+}
diff --git a/src/assets/sass/demos/block.scss b/src/assets/sass/demos/block.scss
new file mode 100644
index 000000000..526454acd
--- /dev/null
+++ b/src/assets/sass/demos/block.scss
@@ -0,0 +1,10 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+/* -------------------------------------------------------------------------- */
+// Block demo
+
+@import '../protocol/includes/lib';
+@import '../docs/protocol';
+@import '../docs/protocol-extra';
diff --git a/src/assets/sass/protocol/components/_block.scss b/src/assets/sass/protocol/components/_block.scss
new file mode 100644
index 000000000..d015daa0e
--- /dev/null
+++ b/src/assets/sass/protocol/components/_block.scss
@@ -0,0 +1,433 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@import '../includes/lib';
+
+// horizontal spacing should match mzp-l-content's horizontal spacing
+
+// xs
+$v-grid-xs: $layout-xs;
+$h-grid-xs: $layout-lg;
+
+//md
+$v-grid-md: $layout-md;
+$h-grid-md: $layout-lg;
+
+//lg
+$v-grid-lg: $layout-lg;
+$h-grid-lg: $layout-xl;
+
+
+/* -------------------------------------------------------------------------- */
+// Basic vertical alignment
+
+.mzp-c-block {
+    overflow-x: hidden;
+    padding: $v-grid-xs 0;
+    position: relative;
+
+    @media #{$mq-md} {
+        padding: $v-grid-md 0;
+    }
+
+    @media #{$mq-lg} {
+        padding: $v-grid-lg 0;
+    }
+}
+
+.mzp-c-block-container {
+    @include clearfix();
+    @include border-box;
+    margin: 0 auto;
+    max-width: $content-max;
+    min-width: $content-xs;
+    padding: 0 $layout-xs;
+
+    @media #{$mq-md} {
+        padding: 0 $h-grid-md;
+    }
+
+    @media #{$mq-lg} {
+        padding: 0 $h-grid-lg;
+    }
+
+    .mzp-t-dark &,
+    .mzp-has-bg {
+        @include light-links;
+        background-color: #000;
+        color: #fff;
+    }
+}
+
+.mzp-c-block-media-img {
+    display: block;
+}
+
+.mzp-c-block-body {
+    position: relative;
+
+    // vertical spacing between body and media before side by side display kicks in
+    @media all and (max-width: #{$screen-lg - 1}) {
+        &:first-child {
+            margin-bottom: $v-grid-xs;
+
+            @media all and (min-width: #{$screen-md}) {
+                margin-bottom: $v-grid-md;
+            }
+        }
+
+        &:last-child {
+            margin-top: $v-grid-xs;
+
+            @media all and (min-width: #{$screen-md}) {
+                margin-top: $v-grid-md;
+            }
+        }
+
+        .mzp-has-media-hide & {
+            margin-top: 0;
+            margin-bottom: 0;
+
+            @media all and (min-width: #{$screen-md}) {
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+    }
+}
+
+.mzp-c-block-media {
+    position: relative;
+
+    @media all and (max-width:#{$screen-lg - 1}) {
+        .mzp-has-media-hide & {
+            display: none;
+        }
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+// side by side layout, float based fall back
+
+@media #{$mq-lg} {
+    .mzp-c-block-body {
+        @include border-box;
+        @include bidi(((float, left, right),));
+        width: 50%;
+        padding: 0 ($h-grid-lg / 2);
+
+        > *:first-child {
+            margin-top: 0;
+        }
+
+        > *:last-child {
+            margin-bottom: 0;
+        }
+
+        .mzp-l-block-body-33 & {
+            width: 33.33%;
+        }
+
+        .mzp-l-block-body-66 & {
+            width: 66.66%;
+        }
+
+        .mzp-l-reversed & {
+            @include bidi(((float, right, left),));
+        }
+    }
+
+    .mzp-c-block-media {
+        @include border-box;
+        @include bidi(((float, right, left),));
+        width: 50%;
+        padding: 0 ($h-grid-lg / 2);
+
+
+        .mzp-l-block-body-33 & {
+            width: 66.66%;
+        }
+
+        .mzp-l-block-body-66 & {
+            width: 33.33%;
+        }
+
+        .mzp-l-reversed & {
+            @include bidi(((float, left, right),));
+        }
+    }
+
+}
+
+/* -------------------------------------------------------------------------- */
+// side by side layout, grid based
+
+@media #{$mq-lg} {
+    @supports( display:grid) {
+        .mzp-c-block-container {
+            // grid is all start/end based we don't need bidi declarations for RTL support \o/
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-areas: "body media";
+            grid-column-gap: $h-grid-lg;
+
+            .mzp-l-block-body-33 > & {
+                grid-template-columns: 2fr 3fr;
+            }
+
+            .mzp-l-block-body-66 > & {
+                grid-template-columns: 3fr 2fr;
+            }
+
+            .mzp-l-reversed > & {
+                grid-template-areas: "media body";
+            }
+
+            .mzp-l-block-body-33.mzp-l-reversed > & {
+                grid-template-columns: 3fr 2fr;
+            }
+
+            .mzp-l-block-body-66.mzp-l-reversed > & {
+                grid-template-columns: 2fr 3fr;
+            }
+        }
+
+        .mzp-c-block-body,
+        .mzp-c-block-media {
+            .mzp-c-block-container & { // extra specificitly to over-ride the styles that make the float fall-back work
+                float: none;
+                min-width: 0; //because of https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items
+                padding: 0;
+                width: auto;
+            }
+        }
+
+        .mzp-c-block-body {
+            grid-area: body;
+        }
+
+        .mzp-c-block-media {
+            align-self: stretch;
+            grid-area: media;
+
+            .mzp-c-block-media-img {
+                display: block;
+                max-width: none;
+            }
+        }
+    }
+}
+
+/* -------------------------------------------------------------------------- */
+// constraints on height or width of media
+
+.mzp-c-block-media {
+    @media all and (max-width: #{$screen-lg - 1}) {
+        // center image & constrain width
+        &.mzp-l-media-constrain-mobile {
+            text-align: center;
+
+            .mzp-c-block-media-img {
+                margin: 0 auto;
+                max-width: $content-sm;
+            }
+        }
+    }
+
+    @media #{$mq-lg} {
+        @supports ( display:grid ) {
+            &.mzp-l-media-constrain-width {
+                .mzp-c-block-media-img {
+                    max-width: 100%;
+                }
+            }
+
+            &.mzp-l-media-constrain-height {
+                height: 100%;
+                justify-self: auto !important; /* stylelint-disable-line declaration-no-important */
+
+                .mzp-c-block-media-img {
+                    bottom: 0;
+                    left: 0;
+                    max-height: 100%;
+                    max-width: auto;
+                    position: absolute;
+                    top: 0;
+                    width: auto;
+
+                    [dir='rtl'] &,
+                    .mzp-l-reversed & {
+                        left: auto;
+                        right: 0;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* --------------------------------------------------------------------------- */
+// vertical spacing for body or media
+
+
+.mzp-t-dark,
+.mzp-has-bg {
+    .mzp-c-block-body {
+        // vertical spacing between text and edges when there's a bg-color
+        @media all and (max-width: #{$screen-lg - 1}) {
+            &:first-child {
+                padding-top: $v-grid-xs;
+
+                @media all and (min-width: #{$screen-md}) {
+                    padding-top: $v-grid-md;
+                }
+            }
+
+            &:last-child {
+                padding-bottom: $v-grid-xs;
+
+                @media all and (min-width: #{$screen-md}) {
+                    padding-bottom: $v-grid-md;
+                }
+            }
+
+            @at-root #{selector-append(".mzp-has-media-hide", &)} {
+                padding-top: $v-grid-xs;
+                padding-bottom: $v-grid-xs;
+
+                @media all and (min-width: #{$screen-md}) {
+                    padding-top: $v-grid-md;
+                    padding-bottom: $v-grid-md;
+                }
+            }
+        }
+    }
+}
+
+@media #{$mq-lg} {
+    @supports(display:grid) {
+        .mzp-t-dark,
+        .mzp-has-bg {
+            .mzp-c-block-body {
+                padding: $v-grid-lg 0;
+            }
+        }
+
+        .mzp-l-v-pad {
+            &.mzp-c-block-body,
+            &.mzp-c-block-media {
+                padding: $v-grid-lg 0;
+            }
+        }
+
+        .mzp-l-pop-top,
+        .mzp-l-pop {
+            &.mzp-c-block {
+                padding-top: $v-grid-lg * 2;
+            }
+            .mzp-c-block-media {
+                margin-top: $v-grid-lg * -1;
+            }
+        }
+        .mzp-l-pop-bottom,
+        .mzp-l-pop {
+            &.mzp-c-block {
+                padding-bottom: $v-grid-lg * 2;
+            }
+            .mzp-c-block-media {
+                margin-bottom: $v-grid-lg * -1;
+            }
+        }
+    }
+}
+
+/* --------------------------------------------------------------------------- */
+// vertical and horizontal aligment for body or media
+// text align works for float fallback
+// justify positioning works for no constraint or width constraint
+// absolute positioning works on constrain-height
+
+.mzp-c-block-container {
+    .mzp-l-h-start {
+        @include bidi(((text-align, left, right),));
+        justify-self: start;
+
+        .mzp-c-block-media-img {
+            @include bidi((
+                (margin-right, auto, margin-left, 0),
+                (margin-left, 0, margin-right, 0),
+            ));
+        }
+    }
+
+    .mzp-l-h-center {
+        justify-self: center;
+        text-align: center;
+
+        .mzp-c-block-media-img {
+            margin: 0 auto;
+        }
+
+        @media #{$mq-lg} {
+            @supports(display:grid) {
+                &.mzp-l-media-constrain-height .mzp-c-block-media-img {
+                    left: 50%;
+                    transform: translateX(-50%);
+                }
+            }
+        }
+    }
+
+    .mzp-l-h-end {
+        @include bidi(((text-align, right, left),));
+        justify-self: end;
+
+        .mzp-c-block-media-img {
+            @include bidi((
+                (margin-left, auto, margin-right, 0),
+                (margin-right, 0, margin-left, 0),
+            ));
+        }
+
+        @media #{$mq-lg} {
+            @supports(display:grid) {
+                &.mzp-l-media-constrain-height .mzp-c-block-media-img {
+                    right: 0;
+                    left: auto;
+                }
+            }
+        }
+    }
+
+    // vertical alignment only after grid starts
+    @media #{$mq-lg} {
+        @supports(display:grid) {
+
+            .mzp-l-v-start {
+                align-self: start;
+            }
+
+            .mzp-l-v-center {
+                align-self: center;
+
+                &.mzp-l-media-constrain-height .mzp-c-block-media-img {
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+
+                &.mzp-l-h-center.mzp-l-media-constrain-height .mzp-c-block-media-img {
+                    transform: translateY(-50%) translateX(-50%);
+                }
+            }
+
+            .mzp-l-v-end {
+                align-self: end;
+
+                &.mzp-l-media-constrain-height .mzp-c-block-media-img {
+                    top: auto;
+                }
+            }
+        }
+    }
+}
diff --git a/src/assets/sass/protocol/protocol-extra.scss b/src/assets/sass/protocol/protocol-extra.scss
index 7b25f944e..bc6fabdd5 100644
--- a/src/assets/sass/protocol/protocol-extra.scss
+++ b/src/assets/sass/protocol/protocol-extra.scss
@@ -9,6 +9,7 @@ $image-path: '../img' !default;
 
 @import '../protocol/components/article';
 @import '../protocol/components/billboard';
+@import '../protocol/components/block';
 @import '../protocol/components/button';
 @import '../protocol/components/call-out';
 @import '../protocol/components/emphasis-box';
diff --git a/src/pages/demos/block-demo.hbs b/src/pages/demos/block-demo.hbs
new file mode 100644
index 000000000..9cdd85f0e
--- /dev/null
+++ b/src/pages/demos/block-demo.hbs
@@ -0,0 +1,479 @@
+---
+title: Block Examples
+layout: blank
+styles:
+  - block-demo
+---
+
+Interactive widget:
+- toggle outlines
+-> output what classes to add to what elements
+
+<form id="config">
+  <fieldset id="config-preset">
+    <label>common configs
+      <select>
+        <option>--</option>
+        <option>default</option>
+        <option>billboard</option>
+        <option>feature</option>
+        <option>hero</option>
+      </select>
+    </label>
+  </fieldset>
+  <fieldset id="config-block">
+    <legend>Block config</legend>
+    <fieldset>
+      <label><input type="checkbox" id="mzp-l-reversed" value="mzp-l-reversed" name="reversed">Reversed</label>
+      <label><input type="checkbox" id="mzp-t-dark" value="mzp-t-dark" name="reversed">Dark</label>
+      <label><input type="checkbox" id="mzp-has-bg" value="mzp-has-bg" name="bg">background</label>
+    </fieldset>
+    <fieldset>
+      <label><input type="radio" id="mzp-l-block-body-50"  value="" name="portion" checked>half/half</label>
+      <label><input type="radio" id="mzp-l-block-body-33" value="mzp-l-block-body-33" name="portion">Body takes up less space</label>
+      <label><input type="radio" id="mzp-l-block-body-66" value="mzp-l-block-body-66" name="portion">Body takes up more space</label>
+    </fieldset>
+    <fieldset>
+      <label><input type="radio" value="" name="pop" checked>none (default)</label>
+      <label><input type="radio" id="mzp-l-pop-top" value="mzp-l-pop-top" name="pop">pop-top</label>
+      <label><input type="radio" id="mzp-l-pop-bottom" value="mzp-l-pop-bottom" name="pop">pop-bottom</label>
+      <label><input type="radio" id="mzp-l-pop" value="mzp-l-pop" name="pop">pop</label>
+    </fieldset>
+  </fieldset>
+  <fieldset id="config-body">
+    <legend>Body config</legend>
+    <label><input type="checkbox" id="body-mzp-l-v-pad" value="mzp-l-v-pad" name="body-pad">add padding</label>
+    <fieldset>
+      <button type="button" id="add-text" class="mzp-c-button mzp-t-small mzp-t-secondary">Add text to body</button>
+      <button type="button" id="remove-text" class="mzp-c-button mzp-t-small mzp-t-secondary">Remove text from body</button>
+    </fieldset>
+    <fieldset>
+      <legend>horizontal alignment</legend>
+      <label><input type="radio" value="" name="body-h-align" checked>none</label>
+      <label><input type="radio" id="body-mzp-l-h-start" value="mzp-l-h-start" name="body-h-align">start</label>
+      <label><input type="radio" id="body-mzp-l-h-center" value="mzp-l-h-center" name="body-h-align">center</label>
+      <label><input type="radio" id="body-mzp-l-h-end" value="mzp-l-h-end" name="body-h-align">end</label>
+    </fieldset>
+    <fieldset>
+      <legend>vertical alignment</legend>
+      <label><input type="radio" value="" name="body-v-align" checked>none</label>
+      <label><input type="radio" id="body-mzp-l-v-start" value="mzp-l-v-start" name="body-v-align">top</label>
+      <label><input type="radio" id="body-mzp-l-v-center" value="mzp-l-v-center" name="body-v-align">center</label>
+      <label><input type="radio" id="body-mzp-l-v-end" value="mzp-l-v-end" name="body-v-align">bottom</label>
+    </fieldset>
+  </fieldset>
+  <fieldset id="config-media">
+    <legend>Media config</legend>
+    <label><input type="checkbox" id="media-mzp-l-v-pad" value="mzp-l-v-pad" name="media-pad">add padding</label>
+    <fieldset>
+      <button type="button" id="img-small" class="mzp-c-button mzp-t-small mzp-t-secondary">Small image</button>
+      <button type="button" id="img-big" class="mzp-c-button mzp-t-small mzp-t-secondary">Big image</button>
+      <!-- TODO: toggle media position in source -->
+    </fieldset>
+    <fieldset>
+      <legend>Constrain media:</legend>
+      <label><input type="radio" value="" name="constrain" checked>let image get as big as it can</label>
+      <label><input type="radio" id="mzp-l-media-constrain-width" value="mzp-l-media-constrain-width" name="constrain">constrain to width of component</label>
+      <label><input type="radio" id="mzp-l-media-constrain-height" value="mzp-l-media-constrain-height" name="constrain">constrain to height of component</label>
+      <label><input type="checkbox" id="mzp-l-media-constrain" value="mzp-l-media-constrain-mobile" name="mobile">set a max width just for mobile</label>
+    </fieldset>
+    <fieldset>
+      <legend>horizontal alignment</legend>
+      <label><input type="radio" value="" name="media-h-align" checked>none</label>
+      <label><input type="radio" id="media-mzp-l-h-start" value="mzp-l-h-start" name="media-h-align">start</label>
+      <label><input type="radio" id="media-mzp-l-h-center" value="mzp-l-h-center" name="media-h-align">center</label>
+      <label><input type="radio" id="media-mzp-l-h-end" value="mzp-l-h-end" name="media-h-align">end</label>
+    </fieldset>
+    <fieldset>
+      <legend>vertical alignment</legend>
+      <label><input type="radio" value="" name="media-v-align" checked>none</label>
+      <label><input type="radio" id="media-mzp-l-v-start" value="mzp-l-v-start" name="media-v-align">top</label>
+      <label><input type="radio" id="media-mzp-l-v-center" value="mzp-l-v-center" name="media-v-align">center</label>
+      <label><input type="radio" id="media-mzp-l-v-end" value="mzp-l-v-end" name="media-v-align">bottom</label>
+    </fieldset>
+  </fieldset>
+</form>
+
+
+<div id="demo-block">
+  {{#embed "patterns.organisms.block.block" body_classes="" media_classes="" }}
+    {{#content "content"}}
+    <h2>Block body heading</h2>
+    <p>Block body description. Add logos, buttons, more paragraphs, etc. Whatever the design calls for. </p>
+    {{/content}}
+  {{/embed}}
+</div>
+
+<script>
+(function(doc, Mzp) {
+  var form = doc.getElementById('config');
+  var inputs = doc.querySelectorAll('#config input');
+  var preset = doc.querySelector('#config-preset select');
+  var block = doc.querySelector('#demo-block .mzp-c-block');
+  var blockBody = doc.querySelector('#demo-block .mzp-c-block-body');
+  var blockMedia = doc.querySelector('#demo-block .mzp-c-block-media');
+  var blockMediaImage = doc.querySelector('#demo-block .mzp-c-block-media-img');
+  var addText = doc.getElementById('add-text');
+  var removeText = doc.getElementById('remove-text');
+  var imageSmall = doc.getElementById('img-small');
+  var imageBig = doc.getElementById('img-big');
+
+  // add listener for change
+  for (i = 0; i < inputs.length; ++i) {
+    inputs[i].addEventListener('change', function() {
+      updateClasses();
+    })
+  }
+
+  // presets
+  preset.addEventListener('change', function() {
+    var presetValue = preset.value;
+    resetClasses();
+
+    switch(presetValue) {
+      case 'hero':
+        doc.getElementById('body-mzp-l-v-center').checked = true;
+        break;
+      case 'feature':
+        doc.getElementById('mzp-l-block-body-66').checked = true;
+        doc.getElementById('body-mzp-l-v-center').checked = true;
+        doc.getElementById('mzp-l-media-constrain-width').checked = true;
+        break;
+      case 'billboard':
+        console.log('switch');
+        doc.getElementById('mzp-l-reversed').checked = true;
+        doc.getElementById('mzp-l-pop').checked = true;
+        doc.getElementById('mzp-t-dark').checked = true;
+        doc.getElementById('mzp-l-media-constrain-width').checked = true;
+        doc.getElementById('body-mzp-l-v-center').checked = true;
+        doc.getElementById('body-mzp-l-h-center').checked = true;
+        doc.getElementById('media-mzp-l-v-center').checked = true;
+        doc.getElementById('media-mzp-l-h-center').checked = true;
+        break;
+      default:
+        console.log('no match');
+    }
+    updateClasses();
+  });
+
+  function resetClasses() {
+    form.reset();
+  }
+
+  function updateClasses() {
+    console.log('change');
+    // block
+    var blockInput = doc.querySelectorAll('#config-block input');
+
+    var newBlockClass = 'mzp-c-block';
+    for (i = 0; i < blockInput.length; ++i) {
+      var thisInput = blockInput[i];
+      if(thisInput.checked) {
+        console.log(thisInput.value);
+        newBlockClass += ' ' + thisInput.value;
+      }
+    }
+    block.className = newBlockClass;
+
+    // body
+    var bodyInput = doc.querySelectorAll('#config-body input');
+
+    var newBodyClass = 'mzp-c-block-body';
+    for (i = 0; i < bodyInput.length; ++i) {
+      var thisInput = bodyInput[i];
+      if(thisInput.checked) {
+        console.log(thisInput.value);
+        newBodyClass += ' ' + thisInput.value;
+      }
+    }
+    blockBody.className = newBodyClass;
+
+    // media
+
+    var mediaInput = doc.querySelectorAll('#config-media input');
+
+    var newMediaClass = 'mzp-c-block-media';
+    for (i = 0; i < mediaInput.length; ++i) {
+      var thisInput = mediaInput[i];
+      if(thisInput.checked) {
+        console.log(thisInput.value);
+        newMediaClass += ' ' + thisInput.value;
+      }
+    }
+    blockMedia.className = newMediaClass;
+  }
+
+  // add body text
+  addText.addEventListener('click', function() {
+    var newP = doc.createElement('p');
+    newP.textContent = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nibh mauris, viverra in pulvinar consectetur, feugiat eget lacus. Phasellus vitae nibh enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris in tellus quis est iaculis vulputate pharetra ullamcorper ante. Nam posuere risus et nulla interdum, quis vehicula arcu tempor. Proin ac lacus est. Duis eget diam posuere, commodo nibh sed, mattis lorem. In in aliquet massa. ';
+    blockBody.appendChild(newP);
+  });
+  removeText.addEventListener('click', function() {
+    blockBody.removeChild(blockBody.lastChild);
+  });
+
+  // big vs small image
+  imageSmall.addEventListener('click', function() {
+    console.log('small');
+    blockMediaImage.src = '../static/img/block/add-ons.png';
+    blockMediaImage.srcset = '../static/img/block/add-ons.png';
+  });
+  imageBig.addEventListener('click', function() {
+    blockMediaImage.src = '../static/img/block/devices.png';
+    blockMediaImage.srcset = '../static/img/block/devices-high-res.png 2x';
+  });
+
+})(document, window.Mzp);
+</script>
+
+<p>set the horizontal alignment when using reversed because the default stays left</p>
+<p>in some cases pop-bottom  will need you to set a bottom vertical aligment</p>
+<p>cant pop both top and bottom with constrain-height, you can probably get the effect you want with constrain width </p>
+<p>body and media pad are top and bottom right now, top OR buttom can be added if needed</p>
+
+<p>test on small screens. You might want to set an aligment on a small screen even if it doensn't look like it needs it at large</p>
+
+<p>bug on blue accounts banner with "mzp-c-block-media mzp-l-pop-top mzp-l-v-end mzp-l-media-constrain-height" when text content excees height of image.<br>
+can't use mzp-l-media-constrain-height with v-?<br> need to add mzp-l-h-end to is-reversed in some cases</p>
+
+<p>3 uttility classes, each controls something different, layout, green box, image in green box</p>
+
+<h1>Media constraints</h1>
+<div class="demo">
+
+  {{#embed "patterns.organisms.block.block" body_classes="" media_classes="" }}
+    {{#content "content"}}
+    <h2>default</h2>
+    <p>The image will be it's natural height, pushing the container larger.</p>
+    <p>In some cases this means the image will overflow the container.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="" media_classes="mzp-l-media-constrain-height" }}
+    {{#content "content"}}
+      <h3>mzp-l-media-constrain-height</h3>
+      <p>The image will be constrained by the height of the media container, to the maximum of the image height.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="" media_classes="mzp-l-media-constrain-height" }}
+    {{#content "content"}}
+      <p>In some cases this means the image will overflow the container.</p>
+      <div class="spacer">Spacer</div>
+      <div class="spacer">Spacer</div>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-v-start" media_classes="mzp-l-media-constrain-width" }}
+    {{#content "content"}}
+      <h3>mzp-l-media-constrain-width</h3>
+      <p>By the image will be constrained by the width of the media container.</p>
+    {{/content}}
+  {{/embed}}
+
+  <h1>Block Layout</h1>
+
+  {{#embed "patterns.organisms.block.block" block_classes="" body_classes=""  }}
+    {{#content "content"}}
+      <h2>default layout</h2>
+      <p>By default the body is 50% of the available space.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" block_classes="mzp-l-block-body-33" body_classes=""  }}
+    {{#content "content"}}
+      <h2>mzp-l-block-body-33</h2>
+      <p>The body can be 33%</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" block_classes="mzp-l-block-body-66" body_classes=""  }}
+    {{#content "content"}}
+      <h2>mzp-l-block-body-66</h2>
+      <p>The body can be 66%</p>
+    {{/content}}
+  {{/embed}}
+
+
+  {{#embed "patterns.organisms.block.block" block_classes="mzp-l-reversed" body_classes="" media_classes="" }}
+    {{#content "content"}}
+      <h2 class="mzp-c-card-feature-title">mzp-l-reversed</h2>
+      <p class="mzp-c-card-feature-desc">An inversed block will have the media on the left.</p>
+      <p class="mzp-c-card-feature-desc">If you do not contrtain the width or height of the image be sure to set a horizontal aligment for it or it will overlap the text (like this!).</p>
+    {{/content}}
+  {{/embed}}
+
+  <h1>Pop</h1>
+
+  {{#embed "patterns.organisms.block.block" }}
+    {{#content "content"}}
+      <h2>default</h2>
+      <p>Both the body and media will be inside the block container with no padding between them and the edges.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" block_classes="mzp-l-pop-top" }}
+    {{#content "content"}}
+      <h3 class="mzp-c-billboard-title">mzp-l-pop-top</h3>
+      <p class="mzp-c-billboard-desc">Chaning the fit to "pop" will make the media pop out of the block container. It can be set on all sides with <code>mzp-l-pop</code> or on individual sides with <code>mzp-l-pop-top</code>, <code>mzp-l-pop-bottom</code>, or <code>mzp-l-pop-side</code>. The image can only pop out of the container on the top, bottom, and side away from the body text.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" block_classes="mzp-l-pop" }}
+    {{#content "content"}}
+      <h4 class="mzp-c-billboard-title">mzp-l-pop</h4>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" block_classes="" media_classes="mzp-l-media-constrain-width" }}
+    {{#content "content"}}
+      <h3 class="mzp-c-billboard-title">fit with constraint</h3>
+      <p>In the examples above the image overflows the container. If you want it to stay inside the container one of the contstraint classes will need to be added.</p>
+    {{/content}}
+  {{/embed}}
+
+  <h1>Body alignment</h1>
+
+  {{#embed "patterns.organisms.block.block"}}
+    {{#content "content"}}
+      <h2>default</h2>
+      <p>The body is <strong>top</strong> and <strong>left</strong> aligned by default.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-v-end" }}
+    {{#content "content"}}
+      <h2>mzp-l-v-end</h2>
+      <p>The text can be aligned to the bottom.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-v-center" }}
+    {{#content "content"}}
+      <h2>mzp-l-v-center</h2>
+      <p>Or vertically centered.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-h-center" }}
+    {{#content "content"}}
+      <h2>mzp-l-h-center</h2>
+      <p>Or horizontally centered.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-h-end" }}
+    {{#content "content"}}
+      <h2>mzp-l-h-end</h2>
+      <p>Or horizontally aligned to the other side of the body container.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" body_classes="mzp-l-v-end mzp-l-h-end" }}
+    {{#content "content"}}
+      <h2>Vertical and horizontal aligment can be combined</h2>
+      <p>Here is mzp-l-v-end and mzp-l-h-end.</p>
+    {{/content}}
+  {{/embed}}
+
+  <h1>Media alignment</h1>
+
+  {{#embed "patterns.organisms.block.block" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>default</h2>
+      <p>The media is top aligned by default, on desktop. And center aligned by default on mobile.</p>
+      <div class="spacer">Spacer</div>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" media_classes="mzp-l-v-end" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>mzp-l-v-end</h2>
+      <p>The media can be aligned to the bottom.</p>
+      <div class="spacer">Spacer</div>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" media_classes="mzp-l-v-center" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>v-middle</h2>
+      <p>Or vertically centered.</p>
+      <div class="spacer">Spacer</div>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" media_classes="mzp-l-h-center" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>mzp-l-h-center</h2>
+      <p>Or horizontally centered.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" media_classes="mzp-l-h-end" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>mzp-l-h-end</h2>
+      <p>Or horizontally aligned to the other side of the body container.</p>
+    {{/content}}
+  {{/embed}}
+
+  {{#embed "patterns.organisms.block.block" media_classes="mzp-l-v-end mzp-l-h-end" img_src="add-ons.png" }}
+    {{#content "content"}}
+      <h2>Vertical and horizontal aligment can be combined</h2>
+      <p>Here is mzp-l-v-end and mzp-l-h-end.</p>
+      <div class="spacer">Spacer</div>
+    {{/content}}
+  {{/embed}}
+
+
+  <h1>Source order &amp; Mobile layout</h1>
+
+  <section class="mzp-c-block">
+    <div class="mzp-c-block-container">
+      <div class="mzp-c-block-media mzp-l-media-constrain-mobile">
+          <img class="mzp-c-block-media-img" src="../static/img/block/devices.png" alt="" srcset="../static/img/block/devices-high-res.png 2x">
+      </div>
+      <div class="mzp-c-block-body ">
+        <h3>There is a `constrain-mobile` class that you probably want to use.</h3>
+        <p>It will restrict the size of the media and center it on mobile.</p>
+      </div>
+    </div>
+  </section>
+
+
+  <section class="mzp-c-block">
+    <div class="mzp-c-block-container">
+      <div class="mzp-c-block-media">
+          <img class="mzp-c-block-media-img" src="../static/img/block/devices.png" alt="" srcset="../static/img/block/devices-high-res.png 2x">
+      </div>
+      <div class="mzp-c-block-body ">
+        <h3>Media can be first in the source order</h3>
+        <p>(See above)</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="mzp-c-block">
+    <div class="mzp-c-block-container">
+      <div class="mzp-c-block-body">
+        <h3>Media can be second in the source order</h3>
+        <p>(See below)</p>
+      </div>
+      <div class="mzp-c-block-media">
+          <img class="mzp-c-block-media-img" src="../static/img/block/devices.png" alt="" srcset="../static/img/block/devices-high-res.png 2x">
+      </div>
+    </div>
+  </section>
+
+  <section class="mzp-c-block mzp-has-media-hide">
+    <div class="mzp-c-block-container">
+      <div class="mzp-c-block-media">
+          <img class="mzp-c-block-media-img" src="../static/img/block/devices.png" alt="" srcset="../static/img/block/devices-high-res.png 2x">
+      </div>
+      <div class="mzp-c-block-body ">
+        <h3>Hide media only on mobile with `mzp-has-media-hide`.</h3>
+        <p>Test</p>
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/src/pages/demos/block.hbs b/src/pages/demos/block.hbs
new file mode 100644
index 000000000..7c871d821
--- /dev/null
+++ b/src/pages/demos/block.hbs
@@ -0,0 +1,116 @@
+---
+title: Block Examples
+layout: blank
+styles:
+  - block-demo
+---
+
+
+{{#embed "patterns.organisms.block.block" body_classes="mzp-l-v-center" media_classes="" }}
+  {{#content "content"}}
+    <h1>Replace: Page hero</h1>
+    <p>A description with approximately 140 characters. That means we usually only have room for one or two sentences. This is what that looks like.</p>
+    <p>
+      <a class="mzp-c-button" href="#">Call to action</a>
+    </p>
+  {{/content}}
+{{/embed}}
+
+{{#embed "patterns.organisms.block.block" block_classes="mzp-l-block-body-66" body_classes="mzp-l-v-center" media_classes="mzp-l-media-constrain-width" }}
+  {{#content "content"}}
+    <h3>Replace: feature</h3>
+    <p>A longer description for more detailed copy. Here we have room for several sentences, but try not to make a paragraph too long as this will take up more space on smaller screens. Copy will also be on average 1/3 longer than English when translated to different languages, so try to keep sentences short and concise.</p>
+  {{/content}}
+{{/embed}}
+
+{{#embed "patterns.organisms.block.block" block_classes="mzp-l-block-body-33 mzp-l-reversed" body_classes="mzp-l-v-start" media_classes="mzp-l-v-center mzp-l-media-constrain-width" }}
+  {{#content "content"}}
+    <ul class="mzp-c-card-feature-list">
+      <li>
+        <h2 class="mzp-c-card-feature-title">A headline with 30 characters</h2>
+        <p class="mzp-c-card-feature-desc">A short description with a maximum of about 60 characters.</p>
+      </li>
+      <li>
+        <h2 class="mzp-c-card-feature-title">A headline with 30 characters</h2>
+        <p class="mzp-c-card-feature-desc">A short description with a maximum of about 60 characters.</p>
+      </li>
+      <li>
+        <h2 class="mzp-c-card-feature-title">A headline with 30 characters</h2>
+        <p class="mzp-c-card-feature-desc">A short description with a maximum of about 60 characters.</p>
+      </li>
+    </ul>
+  {{/content}}
+{{/embed}}
+
+{{#embed "patterns.organisms.block.block" block_classes="mzp-l-reversed mzp-l-pop-top mzp-l-pop-bottom mzp-has-bg mzp-t-dark" body_classes="mzp-l-v-center mzp-l-h-center" media_classes="mzp-l-v-center mzp-l-h-center" img_src="billboard-image.png" }}
+  {{#content "content"}}
+    <h3 class="mzp-c-billboard-title">Billboard replacement</h3>
+    <p class="mzp-c-billboard-desc">A description with a maximum of 100 characters. That usually means only one or two sentences.</p>
+    <a class="mzp-c-cta-link" href="#">Learn more about us</a>
+  {{/content}}
+{{/embed}}
+
+  <div class="mzp-c-block mzp-l-reversed mzp-has-media-hide mzp-has-bg">
+    <div class="mzp-c-block-container" style="background-color:#bddefd;">
+      <div class="mzp-c-block-body mzp-l-v-center mzp-l-h-center">
+        <h3 class="mzp-c-billboard-title">Billboard replacement</h3>
+        <p class="mzp-c-billboard-desc">A description with a maximum of 100 characters. That usually means only one or two sentences.</p>
+        <a class="mzp-c-cta-link" href="#">Learn more about us</a>
+      </div>
+      <div class="mzp-c-block-media mzp-l-media-constrain-width mzp-l-v-center mzp-l-h-center">
+          <img class="mzp-c-block-media-img" src="https://www.mozilla.org/media/img/home/2018/banner-fffy.png" height="350" width="720">
+      </div>
+    </div>
+  </div>
+
+  <div class="mzp-c-block mzp-has-bg">
+    <div class="mzp-c-block-container" style="background-color:#bddefd;">
+      <div class="mzp-c-block-body mzp-l-v-center">
+        <h2>Firefox</h2>
+          <h3>Your life is your business. Not ours.</h3>
+          <p>Firefox fights for you.</p>
+          <p><button>Download</button></p>
+      </div>
+      <div class="mzp-c-block-media mzp-l-v-center">
+          <img class="mzp-c-block-media-img" src="https://www.mozilla.org/media/img/home/2018/banner-fffy.png" height="350" width="720">
+      </div>
+    </div>
+  </div>
+
+<div class="mzp-c-block  ">
+  <div class="mzp-c-block-container">
+    <div class="mzp-c-block-media mzp-l-v-center mzp-l-media-constrain-width">
+      <img class="mzp-c-block-media-img" src="https://www.mozilla.org/media/img/firefox/accounts/fxa-lockbox.png" height="590" width="590">
+    </div>
+    <div class="mzp-c-block-body mzp-l-v-center">
+      <h2 class="c-primary-cta-title">Remember your passwords in Lockbox</h2>
+      <p>No more getting locked out of apps and websites. Lockbox secures all the passwords you’ve saved in Firefox and gives you easy access across all your iOS devices.</p>
+      <p><a href="#" class="mzp-c-cta-link">Get the lockbox app</a></p>
+    </div>
+  </div>
+</div>
+
+<div class="mzp-c-block mzp-l-body-pad">
+  <div class="mzp-c-block-container">
+    <div class="mzp-c-block-media mzp-l-media-constrain-height">
+      <img class="mzp-c-block-media-img" src="https://www.mozilla.org/media/img/firefox/accounts/fxa-hero-img.png" height="770" width="1200">
+    </div>
+    <div class="mzp-c-block-body mzp-l-v-center">
+      <p>Firefox</p>
+      <h2 class="c-primary-cta-title">One log-in. Power and privacy everywhere.</h2>
+      <p><a href="#">Create a Firefox Account</a></p>
+    </div>
+  </div>
+</div>
+
+<div class="mzp-c-block mzp-l-reversed mzp-l-pop-top mzp-t-dark mzp-has-bg">
+  <div class="mzp-c-block-container" style="background-color:#0a84ff;">
+    <div class="mzp-c-block-media mzp-l-v-end mzp-l-h-end">
+      <img class="mzp-c-block-media-img" src="https://www.mozilla.org/media/img/firefox/whatsnew_63/wnp63-content-blocking.31a5c46e7f2a.png" height="374" width="649" style="background:transparent;">
+    </div>
+    <div class="mzp-c-block-body mzp-l-v-center">
+      <h2 class="c-primary-cta-title">One log-in. Power and privacy everywhere.</h2>
+      <p><a href="#">Create a Firefox Account</a></p>
+    </div>
+  </div>
+</div>
diff --git a/src/patterns/organisms/block/block.hbs b/src/patterns/organisms/block/block.hbs
new file mode 100644
index 000000000..4697feb6f
--- /dev/null
+++ b/src/patterns/organisms/block/block.hbs
@@ -0,0 +1,35 @@
+---
+name: Block
+order: 1
+description: |
+  Multi-purpose component for putting a group of text and a single image or video beside it.
+notes: |
+  - Highly customizable positioning options.
+  - default
+  - No default typorgraphy styles are applied to the body content, use atoms to achive the desired content and appearnace.
+  - Add the `mzp-t-dark` class to invert text colors for dark backgrounds.
+  - [See the demo page](/demos/block.html) for more examples in a full window context.
+links:
+    More examples: /demos/block.html
+---
+
+<section class="mzp-c-block {{block_classes}}">
+  <div class="mzp-c-block-container">
+    <div class="mzp-c-block-body {{body_classes}}">
+      {{#block "content"}}
+        <h1>A Headline With 30 Characters</h1>
+        <p>A description with a maximum of 140 characters and <a href="#">a link</a>. That means we usually only have room for one or two sentences. Like this.</p>
+        <p>
+          <a class="mzp-c-button" href="#">Call to action</a>
+        </p>
+      {{/block}}
+    </div>
+    <div class="mzp-c-block-media {{media_classes}}">
+      {{#if img_src }}
+        <img class="mzp-c-block-media-img" src="{{@root.baseurl}}/static/img/block/{{img_src}}" alt="">
+      {{ else }}
+        <img class="mzp-c-block-media-img" src="{{@root.baseurl}}/static/img/block/devices.png" alt="" srcset="{{@root.baseurl}}/static/img/block/devices-high-res.png 2x">
+      {{/if}}
+    </div>
+  </div>
+</section>
diff --git a/src/patterns/organisms/block/collection.yml b/src/patterns/organisms/block/collection.yml
new file mode 100644
index 000000000..28bd307ef
--- /dev/null
+++ b/src/patterns/organisms/block/collection.yml
@@ -0,0 +1,2 @@
+name: Block
+title: Block
diff --git a/src/static/img/block/add-ons.png b/src/static/img/block/add-ons.png
new file mode 100644
index 000000000..0e1a05c6d
Binary files /dev/null and b/src/static/img/block/add-ons.png differ
diff --git a/src/static/img/block/billboard-image.png b/src/static/img/block/billboard-image.png
new file mode 100644
index 000000000..6e2e3af12
Binary files /dev/null and b/src/static/img/block/billboard-image.png differ
diff --git a/src/static/img/block/devices-high-res.png b/src/static/img/block/devices-high-res.png
new file mode 100644
index 000000000..b0603c09b
Binary files /dev/null and b/src/static/img/block/devices-high-res.png differ
diff --git a/src/static/img/block/devices.png b/src/static/img/block/devices.png
new file mode 100644
index 000000000..d8235a451
Binary files /dev/null and b/src/static/img/block/devices.png differ
diff --git a/src/static/img/block/image.png b/src/static/img/block/image.png
new file mode 100644
index 000000000..bb444675e
Binary files /dev/null and b/src/static/img/block/image.png differ