diff --git a/src/cf-grid/src/cf-grid.less b/src/cf-grid/src/cf-grid.less
index bbc26b6f..ad3004ee 100644
--- a/src/cf-grid/src/cf-grid.less
+++ b/src/cf-grid/src/cf-grid.less
@@ -12,7 +12,7 @@
 // Less variables
 //
 
-@grid_wrapper-width:            1200px;
+@grid_wrapper-width:            1230px;
 @grid_gutter-width:             30px;
 @grid_total-columns:            12;
 @grid_debug:                    false;
diff --git a/src/cf-layout/src/molecules/heroes.less b/src/cf-layout/src/molecules/heroes.less
index 4e8f72ef..abf4455b 100644
--- a/src/cf-layout/src/molecules/heroes.less
+++ b/src/cf-layout/src/molecules/heroes.less
@@ -5,37 +5,32 @@
 // Sizing variables
 
 @hero-desktop-height: 285px;
-@hero-image-height:   195px;
 
 // Color variables
 // $color- variables are from 18F's U.S. Web Design Standards
 // https://github.com/18F/web-design-standards/blob/master/src/stylesheets/core/_variables.scss
 
 @hero-bg:             #dce4ef; // $color-gray-cool-light
-@hero-overlay-bg:     #5b616b; // $color-gray
-@hero-overlay-text:   white;
+@hero-knockout-bg:    #5b616b; // $color-gray
+@hero-knockout-text:  white;
 
 
 .m-hero {
     background-color: @hero-bg;
 
-    .respond-to-min( @bp-sm-min, {
-        display: table;
-        width: 100%;
-        height: @hero-desktop-height;
-    } );
-
     &_wrapper {
         padding-top: unit( @grid_gutter-width / @base-font-size-px, em );
         padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
 
         .respond-to-min( @bp-sm-min, {
-            display: table-row;
+            display: flex;
+            min-height: @hero-desktop-height - ( @grid_gutter-width * 2 );
         } );
 
-        .respond-to-max( @bp-xs-max, {
-            padding-top: unit( @grid_gutter-width / @base-font-size-px, em );
-            padding-bottom: unit( @grid_gutter-width / @base-font-size-px, em );
+        .respond-to-min( @bp-lg-min, {
+            padding-top: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em );
+            padding-bottom: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em );
+            min-height: @hero-desktop-height - ( 45px * 2 );
         } );
     }
 
@@ -45,12 +40,11 @@
         .respond-to-min( @bp-sm-min, {
             .grid_column( 7, 12 );
 
-            padding: unit( @grid_gutter-width / @base-font-size-px, em )
-                     unit( 15px / @base-font-size-px, em );
+            margin: auto;
 
             // Keep the text vertically centered
-            display: table-cell;
-            vertical-align: middle;
+            //display: table-cell;
+            //vertical-align: middle;
         } );
     }
 
@@ -62,99 +56,85 @@
         } );
     }
 
-    &_subhead,
-    &_cta:not( .btn ) {
+    &_subhead {
         // Not using the `.heading-3()` mixin here because we want the weight
         // to remain Regular on smaller screens.
         .u-webfont-regular();
 
-        font-size: @size-iv;
+        font-size: @size-iii;
         line-height: 1.25;
 
-        .respond-to-min( @bp-med-min, {
-            font-size: @size-iii;
-        } );
-    }
-
-    &_subhead:last-child {
-        margin-bottom: 0;
-    }
-
-    &_cta {
-        &:not( .btn ) {
-            border-bottom-width: 1px;
-        }
-
-        .respond-to-min( @bp-sm-min, {
-            margin-bottom: 0;
+        .respond-to-max( @bp-sm-max, {
+            font-size: @size-iv;
         } );
     }
 
     &_image-wrapper {
         .grid_column( 1, 1 );
 
+        overflow: hidden;
+
         .respond-to-min( @bp-sm-min, {
             .grid_column( 5, 12 );
 
+            margin: auto;
+
             // Keep the image vertically centered
-            display: table-cell;
-            vertical-align: middle;
+            //display: table-cell;
+            //vertical-align: middle;
         } );
 
         .respond-to-max( @bp-xs-max, {
             margin-top: unit( @grid_gutter-width / @base-font-size-px, em );
         } );
+    }
 
-        &__bleed-vertical {
-            position: relative;
+    &_image {
+        .u-flexible-container-mixin( 16, 9 );
 
-            .m-hero_image {
-                display: block;
-                height: auto;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    &__knockout {
+        background-color: @hero-knockout-bg;
+        color: @hero-knockout-text;
+    }
+
+    &__bleeding {
+        .respond-to-min( @bp-sm-min, {
+            .m-hero_image-wrapper {
+                position: relative;
+
+                margin-top: unit( @grid_gutter-width / @base-font-size-px, em ) * -1;
+                margin-bottom: unit( @grid_gutter-width / @base-font-size-px, em ) * -1;
             }
 
-            .m-hero_image__bleeding {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                background-position: center;
-                background-repeat: no-repeat;
-                background-size: cover;
+            .m-hero_image-wrapper {
+                display: flex;
+                align-items: center;
             }
 
-            .respond-to-max( @bp-xs-max, {
-                .m-hero_image__bleeding {
-                    display: none;
-                }
-            } );
-
-            .respond-to-min( @bp-sm-min, {
-                .m-hero_image {
-                    display: none;
-                }
-            } );
-
-            .respond-to-min( @bp-med-min, {
-                .m-hero_image {
-                    display: none;
-                }
-            } );
-        }
-    }
+            .m-hero_image {
+                .u-flexible-container-mixin( 470, 640 );
 
-    &_image {
-        // height is the same as min-height in a table
-        height: unit( @hero-image-height / @base-font-size-px, em );
+                width: 100%;
+                position: absolute;
+            }
+        } );
 
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: contain;
+        .respond-to-min( @bp-lg-min, {
+            .m-hero_image-wrapper {
+                margin-top: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em ) * -1;
+                margin-bottom: unit( ( @grid_gutter-width * 1.5 ) / @base-font-size-px, em ) * -1;
+            }
+        } );
     }
 
     &__overlay {
         background-repeat: no-repeat;
-        background-size: cover;
+        background-position: center;
 
         .respond-to-max( @bp-xs-max, {
             // Overwrite the image that is set in the markup because
@@ -167,28 +147,14 @@
             }
 
             .m-hero_image-wrapper {
+                position: relative;
                 border-width: 0;
             }
-
-            .m-hero_image {
-                background-size: cover;
-            }
         } );
 
         .respond-to-min( @bp-sm-min, {
             .m-hero_image {
-                // Overwrite the image but don't remove the container from
-                // the grid flow. Necessary due to table-cell.
-                background: transparent !important;
-            }
-        } );
-    }
-
-    &__overlay-text {
-        .respond-to-min( @bp-sm-min, {
-            .m-hero_wrapper {
-                background-color: @hero-overlay-bg;
-                color: @hero-overlay-text;
+                display: none;
             }
         } );
     }
diff --git a/src/cf-layout/usage.md b/src/cf-layout/usage.md
index 4a561a9d..1a39d7ed 100644
--- a/src/cf-layout/usage.md
+++ b/src/cf-layout/usage.md
@@ -1473,9 +1473,9 @@ generally remains centered.
 
 ## Heroes
 
-A hero consists of a headline, a small amount of additional text, an optional
-call to action, and an illustration. Its background color is flush with the
-sides of the screen, and the content is centered with wrapper classes.
+A hero consists of a headline, a small amount of additional sub-heading text
+and an image. Its background color or image is flush with the sides of the
+screen, and the content is vertically centered.
 
 The illustration can be customized by setting the `background-image` property
 on the `.m-hero_image` element.
@@ -1494,51 +1494,204 @@ height. The image should be `195px` in height to conform to this standard.
 <section class="m-hero">
     <div class="m-hero_wrapper wrapper">
         <div class="m-hero_text">
-            <h1 class="m-hero_heading">Hero title</h1>
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
             <p class="m-hero_subhead">
-                Hero text goes here. This paragraph has a recommended maximum
-                length of 185 characters. This paragraph has a recommended
-                maximum length of 185 characters.
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
             </p>
-            <a class="m-hero_cta" href="#">
-                Call to action
-            </a>
         </div>
         <div class="m-hero_image-wrapper">
             <div class="m-hero_image"
-                 style="background-image: url('https://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')">
+                 id="ageoi252">
             </div>
         </div>
     </div>
+    <style>
+        #ageoi252 {
+            background-image:
+                url('http://placekitten.com/g/570/236');
+            background-image: -webkit-image-set(
+                url('http://placekitten.com/g/570/236') 1x,
+                url('http://placekitten.com/g/1140/472') 2x
+            );
+            background-image: image-set(
+                url('http://placekitten.com/g/570/236') 1x,
+                url('http://placekitten.com/g/1140/472') 2x
+            );
+            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
+                src='http://placekitten.com/g/570/236',
+                sizingMethod='scale');
+            padding-bottom: 41.4893617%;
+        }
+        @media screen and (min-width: 37.5625em) {
+            #ageoi252 {
+                background-image:
+                    url('http://placekitten.com/g/470/195');
+                background-image: -webkit-image-set(
+                    url('http://placekitten.com/g/470/195') 1x,
+                    url('http://placekitten.com/g/940/390') 2x
+                );
+                background-image: image-set(
+                    url('http://placekitten.com/g/470/195') 1x,
+                    url('http://placekitten.com/g/940/390') 2x
+                );
+                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
+                    src='http://placekitten.com/g/470/195',
+                    sizingMethod='scale');
+                padding-bottom: 41.4893617%;
+            }
+        }
+    </style>
 </section>
 
 ```
 <section class="m-hero">
     <div class="m-hero_wrapper wrapper">
         <div class="m-hero_text">
-            <h1 class="m-hero_heading">Hero title</h1>
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
             <p class="m-hero_subhead">
-                Hero text goes here. This paragraph has a recommended maximum
-                length of 185 characters. This paragraph has a recommended
-                maximum length of 185 characters.
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
             </p>
-            <a class="m-hero_cta" href="#">
-                Call to action
-            </a>
         </div>
         <div class="m-hero_image-wrapper">
             <div class="m-hero_image"
-                 style="background-image: url('https://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')">
+                 id="ageoi252">
             </div>
         </div>
     </div>
+    <style>
+        #ageoi252 {
+            background-image:
+                url('http://placekitten.com/g/570/236');
+            background-image: -webkit-image-set(
+                url('http://placekitten.com/g/570/236') 1x,
+                url('http://placekitten.com/g/1140/472') 2x
+            );
+            background-image: image-set(
+                url('http://placekitten.com/g/570/236') 1x,
+                url('http://placekitten.com/g/1140/472') 2x
+            );
+            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
+                src='http://placekitten.com/g/570/236',
+                sizingMethod='scale');
+            padding-bottom: 41.4893617%;
+        }
+        @media screen and (min-width: 37.5625em) {
+            #ageoi252 {
+                background-image:
+                    url('http://placekitten.com/g/470/195');
+                background-image: -webkit-image-set(
+                    url('http://placekitten.com/g/470/195') 1x,
+                    url('http://placekitten.com/g/940/390') 2x
+                );
+                background-image: image-set(
+                    url('http://placekitten.com/g/470/195') 1x,
+                    url('http://placekitten.com/g/940/390') 2x
+                );
+                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
+                    src='http://placekitten.com/g/470/195',
+                    sizingMethod='scale');
+                padding-bottom: 41.4893617%;
+            }
+        }
+    </style>
 </section>
 ```
 
-### Hero with bleeding illustration
+### Hero with knockout text
 
-_Examples coming when we can hotlink to the images live on our server,
-so they don't have to be included in this repo._
+When using a dark background add the `__knockout` modifier to the hero to
+switch the text to white.
+
+<section class="m-hero m-hero__knockout" style="background-color: #207676;">
+    <div class="m-hero_wrapper wrapper">
+        <div class="m-hero_text">
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
+            <p class="m-hero_subhead">
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
+            </p>
+        </div>
+        <div class="m-hero_image-wrapper">
+            <div class="m-hero_image"
+                 style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/ConsumerMarketTrends-hero.original.png')">
+            </div>
+        </div>
+    </div>
+</section>
+
+```
+<section class="m-hero m-hero__knockout" style="background-color: #207676;">
+    <div class="m-hero_wrapper wrapper">
+        <div class="m-hero_text">
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
+            <p class="m-hero_subhead">
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
+            </p>
+        </div>
+        <div class="m-hero_image-wrapper">
+            <div class="m-hero_image"
+                 style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/ConsumerMarketTrends-hero.original.png')">
+            </div>
+        </div>
+    </div>
+</section>
+```
+
+### Hero with a bleeding illustration
+
+When using an illustration that bleeds top to bottom at larger screen sizes,
+add the `__bleeding` modifier to the hero and add an additional
+`m-hero_bleeding-image` as a sibling to `m-hero_image`
+
+<section class="m-hero m-hero__bleeding">
+    <div class="m-hero_wrapper wrapper">
+        <div class="m-hero_text">
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
+            <p class="m-hero_subhead">
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
+            </p>
+        </div>
+        <div class="m-hero_image-wrapper">
+            <div class="m-hero_image" style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/prepaid_hero_small.original.png'); padding-bottom: 25.1020408%"></div>
+            <div class="m-hero_bleeding-image" style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/prepaid_hero_bleeding.original.png');"></div>
+        </div>
+    </div>
+</section>
+
+```
+<section class="m-hero m-hero__bleeding">
+    <div class="m-hero_wrapper wrapper">
+        <div class="m-hero_text">
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
+            <p class="m-hero_subhead">
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
+            </p>
+        </div>
+        <div class="m-hero_image-wrapper">
+            <div class="m-hero_image" style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/prepaid_hero_small.original.png'); padding-bottom: 25.1020408%"></div>
+            <div class="m-hero_bleeding-image" style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/prepaid_hero_bleeding.original.png');">
+            </div>
+        </div>
+    </div>
+</section>
+```
 
 ### Hero with photograph
 
@@ -1551,11 +1704,12 @@ with a non-white (or light gray) background.
          style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/PC_hero.original.jpg')">
     <div class="m-hero_wrapper wrapper">
         <div class="m-hero_text">
-            <h1 class="m-hero_heading">Hero title</h1>
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
             <p class="m-hero_subhead">
-                Hero text goes here. This paragraph has a recommended maximum
-                length of 185 characters. This example paragraph is 151
-                characters long.
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
             </p>
         </div>
         <div class="m-hero_image-wrapper">
@@ -1571,11 +1725,12 @@ with a non-white (or light gray) background.
          style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/PC_hero.original.jpg')">
     <div class="m-hero_wrapper wrapper">
         <div class="m-hero_text">
-            <h1 class="m-hero_heading">Hero title</h1>
+            <h1 class="m-hero_heading">Max of 41 chars for a one-line heading</h1>
             <p class="m-hero_subhead">
-                Hero text goes here. This paragraph has a recommended maximum
-                length of 185 characters. This example paragraph is 151
-                characters long.
+                This text has a recommended count of 165-186 characters
+                (three lines at 1260px) following a one-line heading
+                and 108-124 characters (two lines at 1260px)
+                following a two-line heading.
             </p>
         </div>
         <div class="m-hero_image-wrapper">