cf-layout - npm Package Compare versions

Comparing version 4.0.1 to 4.1.0

package.json

 {
   "name": "cf-layout",
-  "version": "4.0.1",
+  "version": "4.1.0",
   "description": "Capital Framework layouts",
@@ -5,0 +5,0 @@ "main": "src/capital-framework.js",

usage.md

@@ -67,4 +67,4 @@ A set of HTML and CSS layout helpers.
 
-`$color-` variables are from 18F's
-[US Web Design Standards](https://github.com/18F/web-design-standards/blob/18f-pages/assets/_scss/core/_variables.scss)
+`$color-` variables referenced in comments are from 18F's
+[U.S. Web Design Standards](https://github.com/18F/web-design-standards/blob/staging/src/stylesheets/core/_variables.scss)
 
@@ -335,11 +335,12 @@ ```
 specific needs depending on which column element variant they are attached to.
-For example `.content-l_col-1-2` has different divider needs than `.content-l_col-1-3`
-because they may break to single columns at different breakpoints.
+For example `.content-l_col-1-2` has different divider needs than
+`.content-l_col-1-3` because they may break to single columns at different
+breakpoints.
 
-Dividers use absolute positioning relative to the .content-l element and depend
-on `.content-l` using `position: relative;`.
+Dividers use absolute positioning relative to the `.content-l` element
+and depend on `.content-l` using `position: relative;`.
 This allows vertical dividers to span the height of the tallest column.
 Just be aware that if you have more than one row of columns,
 and each row has columns of different widths, the borders will cause unwanted
-overlapping since they will span the height of the entire .content-l element.
+overlapping since they will span the height of the entire `.content-l` element.
 
@@ -419,7 +420,11 @@ <div class="content-l content-l__large-gutters">
 When using the modifiers described below to create columns,
-the columns will remain stacked for smaller screens and then convert to to columns at 801px.
+the columns will remain stacked for smaller screens and then convert to to
+columns at `801px`.
 
-`.content_bar` must come after `.content_hero` (if it exists) but before `.content_wrapper`.
-Inline styling is for demonstration purposes only; do not include it in your markup.
+`.content_bar` must come after `.content_hero` (if it exists) but before
+`.content_wrapper`.
 
+_Inline styling is for demonstration purposes only; do not include it in your
+markup._
+
 <main class="content" role="main">
@@ -460,6 +465,7 @@ <section class="content_hero" style="background: #E3E4E5">
 
-Add a class of `.content__L-R` to `main.content` to determine the width ratio of `.content_main` and `.content_sidebar`,
-where 'L' is the left-hand item and 'R' is the right-hand item.
-The two common configurations are 1-3 (sidebar on the left, content on the right, in a ratio of 1:3)
-and 2-1 (content on the left, sidebar on the right, in a ratio of 2:1).
+Add a class of `.content__L-R` to `main.content` to determine the width ratio
+of `.content_main` and `.content_sidebar`, where 'L' is the left-hand item and
+'R' is the right-hand item. The two common configurations are `1-3` (sidebar on
+the left, content on the right, in a ratio of 1:3) and `2-1` (content on the
+left, sidebar on the right, in a ratio of 2:1).
 
@@ -519,9 +525,12 @@ It is assumed that the content is wider than the sidebar.
 
-Add a class of `.content__L-R` to `main.content` to determine the width ratio of `.content_main` and `.content_sidebar`,
-where 'L' is the left-hand item and 'R' is the right-hand item.
-The two common configurations are 1-3 (sidebar on the left, content on the right, in a ratio of 1:3)
-and 2-1 (content on the left, sidebar on the right, in a ratio of 2:1).
+Add a class of `.content__L-R` to `main.content` to determine the width ratio
+of `.content_main` and `.content_sidebar`, where 'L' is the left-hand item and
+'R' is the right-hand item. The two common configurations are `1-3` (sidebar
+on the left, content on the right, in a ratio of 1:3) and `2-1` (content on the
+left, sidebar on the right, in a ratio of 2:1).
+
 It is assumed that the content is wider than the sidebar.
 
-Inline styling is for demonstration purposes only; do not include it in your markup.
+_Inline styling is for demonstration purposes only; do not include it in your
+markup._
 
@@ -582,3 +591,4 @@ <main class="content content__2-1" role="main">
 
-Inline styling is for demonstration purposes only; do not include it in your markup.
+_Inline styling is for demonstration purposes only; do not include it in your
+markup._
 
@@ -636,3 +646,4 @@ <main class="content content__2-1" role="main">
 
-Add a class of `.content__flush-bottom` to `.content_main` or content_sidebar to remove bottom padding.
+Add a class of `.content__flush-bottom` to `.content_main` or
+`.content_sidebar` to remove bottom padding.
 
@@ -694,5 +705,5 @@ <main class="content content__1-3" role="main">
 
-Add a class of `.content__flush-top-on-small` to `.content_main` or `.content_sidebar`
-to remove top padding on small screens only.
-'Small' screens in this case refers to the breakpoint where `.content_main` and
+Add a class of `.content__flush-top-on-small` to `.content_main` or
+`.content_sidebar` to remove top `padding` on small screens only. 'Small'
+screens in this case refers to the breakpoint where `.content_main` and
 `.content_sidebar` single column layout.
@@ -739,5 +750,6 @@
 
-Add a class of `.content__flush-all-on-small` to `.content_main` or `.content_sidebar`
-to remove all padding and border-based gutters on small screens only.
-'Small' screens in this case refers to the breakpoint where `.content_main` and `.content_sidebar` single column layout.
+Add a class of `.content__flush-all-on-small` to `.content_main` or
+`.content_sidebar` to remove all `padding` and border-based gutters on small
+screens only. 'Small' screens in this case refers to the breakpoint where
+`.content_main` and `.content_sidebar` single column layout.
 
@@ -783,8 +795,9 @@ <main class="content content__1-3" role="main">
 
-`.block` is a base class with several modifiers that help you separate chunks of
-content via margins, padding, borders, and backgrounds.
+`.block` is a base class with several modifiers that help you separate chunks
+of content via `margin`, `padding`, `border`, and `background`.
 
 ### Standard block example
 
-The standard `.block` class by itself simply adds a margin of twice the gutter width to the top and bottom.
+The standard `.block` class by itself simply adds a `margin` of twice the
+gutter width to the top and bottom.
 
@@ -817,3 +830,3 @@ Main content...
 
-Adds top border to `.block`.
+Adds top `border` to `.block`.
 
@@ -834,3 +847,3 @@ Main content...
 
-Adds right border to `.block`.
+Adds right `border` to `.block`.
 
@@ -851,3 +864,3 @@ Main content...
 
-Adds bottom border to `.block`.
+Adds bottom `border` to `.block`.
 
@@ -868,3 +881,3 @@ Main content...
 
-Adds left border to `.block`.
+Adds left `border` to `.block`.
 
@@ -885,3 +898,3 @@ Main content...
 
-Adds border on all sides to `.block`.
+Adds `border` on all sides to `.block`.
 
@@ -902,3 +915,3 @@ Main content...
 
-Removes the top margin from `.block`.
+Removes the top `margin` from `.block`.
 
@@ -925,3 +938,3 @@ Main content...
 
-Removes the bottom margin from `.block`.
+Removes the bottom `margin` from `.block`.
 
@@ -948,5 +961,5 @@ Main content...
 
-Removes the side margin from `.block`.
+Removes the side `margin` from `.block`.
 Typically used in conjunction with `.block__bg` to create a 'well' whose
-background extends into the left and right gutters. (See below.)
+`background` extends into the left and right gutters. (See below.)
 
@@ -985,3 +998,3 @@ <main class="content content__1-3" role="main">
 
-Removes the side, top, and bottom margin from `.block`.
+Removes the side, top, and bottom `margin` from `.block`.
 
@@ -1020,4 +1033,4 @@ <main class="content content__1-3" role="main">
 
-Adds a background color and padding to `.block`.
-Setup for (ems-equivalent) 30px padding on top and 60px on bottom.
+Adds a `background` color and padding to `.block`.
+Setup for (ems-equivalent) `30px` `padding` on top and `60px` on bottom.
 
@@ -1038,3 +1051,4 @@ Main content...
 
-This is an example of combining modifiers to get a flush padded bg with a `.block`.
+This is an example of combining modifiers to get a flush `padding` and
+`background` with a `.block`.
 
@@ -1073,4 +1087,4 @@ <main class="content content__1-3" role="main">
 
-Breaks top margin into margin & padding. Useful in combination with
-`block__border-top` to add padding between block contents & border.
+Breaks top `margin` into `margin` & `padding`. Useful in combination with
+`block__border-top` to add `padding` between `.block` contents and `border`.
 
@@ -1093,4 +1107,4 @@ Main content...
 
-Breaks bottom margin into margin & padding. Useful in combination with
-`block__border-bottom` to add padding between block contents & border.
+Breaks bottom `margin` into `margin` & `padding`. Useful in combination with
+`block__border-bottom` to add `padding` between `.block` contents and `border`.
 
@@ -1113,5 +1127,8 @@ Main content...
 
-Useful for when you need some consistent margins between blocks that are nested within other blocks.
-Note that the divs with inline styles are for demonstration purposes only and should not be used in production.
+Useful for when you need some consistent `margin` between `.blocks` that are
+nested within other `.blocks`.
 
+_Note that the `div`s with inline styles are for demonstration purposes only
+and should not be used in production._
+
 <div class="block block__sub">
@@ -1154,5 +1171,8 @@ <div style="background: #F1F2F2; padding: 8px;">
 You can safely combine `.block` with `.content-l_col` to achieve a column-based
-layout at larger screens with no top margins and a vertical layout at smaller screens that do have margins.
-Note that the divs with inline styles are for demonstration purposes only and should not be used in production.
+layout at larger screens with no top `margin` and a vertical layout at smaller
+screens that do have `margins`.
 
+_Note that the `div`s with inline styles are for demonstration purposes only
+and should not be used in production._
+
 <div class="content-l">
@@ -1197,6 +1217,8 @@ <div class="block content-l_col content-l_col-1-2">
 
-Simply add class `.content__bleedbar` to `main.content`.
-Only supports sidebars on the right, for now.
-Inline styling is for demonstration purposes only; do not include it in your markup.
+Simply add class `.content__bleedbar` to `main.content`. Only supports
+sidebars on the right, for now.
 
+_Note that inline styling is for demonstration purposes only; do not include
+it in your markup._
+
 <main class="content content__2-1 content__bleedbar" role="main">
@@ -1239,4 +1261,5 @@ <section class="content_hero" style="background: #E3E4E5">
 
-Turns an element into a cf-grid wrapper at 801px and above.
-Includes some explicit declarations for IE8 due to the fact that it doesn't support media queries.
+Turns an element into a cf-grid wrapper at `801px` and above. Includes some
+explicit declarations for Internet Explorer 8 due to the fact that it doesn't
+support media queries.
 
@@ -1255,8 +1278,8 @@ <div class="wrapper">
 
-cf-grid columns use left and right borders for fixed margins which means it's
+cf-grid columns use left and right `border` for fixed `margin` which means it's
 not possible to set visual left and right borders directly on them.
-Instead we can use the :before pseudo element and position it absolutely.
-The added benefit of doing it this way is that the border spans the entire
-height of the next parent using `position: relative;`.
-This means that the border will always match the height of the tallest column in the row.
+Instead we can use the `:before` pseudo element and position it absolutely.
+The added benefit of doing it this way is that the `border` spans the entire
+height of the next parent using `position: relative;`. This means that the
+`border` will always match the height of the tallest column in the row.
 
@@ -1285,8 +1308,13 @@ ```less
 
-Featured content module, like a hero, consists of headline/text/optional call to action along with a visual. It is intended to be used in a main content column next to a sidebar.
+Featured content module, like a hero, consists of headline/text/optional call
+to action along with a visual. It is intended to be used in a main content
+column next to a sidebar.
 
 Text is full width & displayed above the visual in the default/mobile view.
-At larger screen sizes, the text occupies a fixed portion of the screen (equal to the width of 5 of 12 columns at 701px & 3 of 12 columns at 901px for desktop).
-The visual occupies the remaining space.
-The visual should be 640x360 (16x9 ratio) and resize to fit the height of the FCM with a static width and is anchored left when it becomes too wide for the available space.
+At larger screen sizes, the text occupies a fixed portion of the screen (equal
+to the width of 5 of 12 columns at `701px` & 3 of 12 columns at `901px` for
+desktop). The visual occupies the remaining space. The visual should be
+`640x360` (16x9 ratio) and resize to fit the height of the Featured Content
+Module with a static width and is anchored left when it becomes too wide for
+the available space.
 
@@ -1296,9 +1324,21 @@ <section class="block block__border block__flush o-featured-content-module">
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured </div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
@@ -1310,9 +1350,21 @@
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured </div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
@@ -1323,27 +1375,62 @@ ```
 
-When the featured content module image is a map (or other right-aligned content), the `o-featured-content-module__right` modifier class is added to the `o-featured-content-module` organism. This anchors the image to the right side so that the copyright information is displayed.
+When the featured content module image is a map (or other right-aligned
+content), the `o-featured-content-module__right` modifier class is added to
+the `o-featured-content-module` organism. This anchors the image to the right
+side so that the copyright information is displayed.
 
-<section class="block block__border block__flush o-featured-content-module o-featured-content-module__right">
+<section class="block
+                block__border
+                block__flush
+                o-featured-content-module
+                o-featured-content-module__right">
     <div class="o-featured-content-module_text">
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured (Map)</div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured (Map)
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
 
 ```
-<section class="block block__border block__flush o-featured-content-module o-featured-content-module__right">
+<section class="block
+                block__border
+                block__flush
+                o-featured-content-module
+                o-featured-content-module__right">
     <div class="o-featured-content-module_text">
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured (Map)</div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured (Map)
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
@@ -1354,27 +1441,63 @@ ```
 
-When the featured content module image is a video (or other centered content), the `o-featured-content-module__center` modifier class is added to the `o-featured-content-module` organism. This anchors the center of the image to the center of the available space so that the focal point of the video generally remains centered.
+When the featured content module image is a video (or other centered content),
+the `o-featured-content-module__center` modifier class is added to the
+`o-featured-content-module` organism. This anchors the center of the image to
+the center of the available space so that the focal point of the video
+generally remains centered.
 
-<section class="block block__border block__flush o-featured-content-module o-featured-content-module__center">
+<section class="block
+                block__border
+                block__flush
+                o-featured-content-module
+                o-featured-content-module__center">
     <div class="o-featured-content-module_text">
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured (Video) </div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured (Video)
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
 
 ```
-<section class="block block__border block__flush o-featured-content-module o-featured-content-module__center">
+<section class="block
+                block__border
+                block__flush
+                o-featured-content-module
+                o-featured-content-module__center">
     <div class="o-featured-content-module_text">
         <div class="category-slug">
-            <span class="o-featured-content-module_icon cf-icon cf-icon-speech-bubble">
-</span> Featured (Video) </div>
+            <span class="o-featured-content-module_icon
+                         cf-icon
+                         cf-icon-speech-bubble"></span>
+            Featured (Video)
+        </div>
         <h2>Feature title</h2>
-        <p>Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur instructior ex pri. Cu pri inani constituto, cum aeque noster commodo cu.</p>
-        <a class="jump-link jump-link__underline"> <span class="jump-link_text">Read more about the feature</span> </a>
+        <p>
+            Lorem ipsum dolor sit amet, ei ius adhuc inani iudico, labitur
+            instructior ex pri. Cu pri inani constituto, cum aeque noster
+            commodo cu.
+        </p>
+        <a class="jump-link jump-link__underline">
+            <span class="jump-link_text">Read more about the feature</span>
+        </a>
     </div>
-    <div class="o-featured-content-module_visual"> <img class="o-featured-content-module_img" src="http://placekitten.com/g/540/270"> </div>
+    <div class="o-featured-content-module_visual">
+        <img class="o-featured-content-module_img"
+             src="http://placekitten.com/g/540/270">
+    </div>
 </section>
@@ -1386,15 +1509,17 @@ ```
 
-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 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.
 
-The illustration can be customized by setting the `background-image` property on the `.m-hero_image` element.
+The illustration can be customized by setting the `background-image` property
+on the `.m-hero_image` element.
 
-On small screens (or where media queries are not supported),
-the text spans the full width of the `.m-hero_wrapper` and the illustration is displayed underneath.
+On small screens (or where media queries are not supported), the text spans the
+full width of the `.m-hero_wrapper` and the illustration is displayed underneath.
 
-For larger screen sizes, media queries are used to position the illustration to the right of the text.
+For larger screen sizes, media queries are used to position the illustration to
+the right of the text.
 
-At the grid's maximum width and above, the hero should not exceed 285px in height.
-The image should be 195px in height to conform to this standard.
+At the grid's maximum width and above, the hero should not exceed `285px` in
+height. The image should be `195px` in height to conform to this standard.
 
@@ -1408,4 +1533,5 @@ ### Standard hero with illustration
             <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.
+                Hero text goes here. This paragraph has a recommended maximum
+                length of 185 characters. This paragraph has a recommended
+                maximum length of 185 characters.
             </p>
@@ -1417,3 +1543,5 @@ <a class="m-hero_cta" href="#">
         <div class="m-hero_image-wrapper">
-            <div class="m-hero_image" style="background-image: url('http://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')"></div>
+            <div class="m-hero_image"
+                 style="background-image: url('https://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')">
+            </div>
         </div>
@@ -1429,4 +1557,5 @@ </div>
             <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.
+                Hero text goes here. This paragraph has a recommended maximum
+                length of 185 characters. This paragraph has a recommended
+                maximum length of 185 characters.
             </p>
@@ -1438,3 +1567,5 @@ <a class="m-hero_cta" href="#">
         <div class="m-hero_image-wrapper">
-            <div class="m-hero_image" style="background-image: url('http://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')"></div>
+            <div class="m-hero_image"
+                 style="background-image: url('https://www.consumerfinance.gov/static/fin-ed-resources/static/img/parents_hero_760x390.png')">
+            </div>
         </div>
@@ -1446,3 +1577,2 @@ </div>
 ### Hero with bleeding illustration
-{: class="u-mt30"}
 
@@ -1453,11 +1583,10 @@ _Examples coming when we can hotlink to the images live on our server,
 ### Hero with photograph
-{: class="u-mt30"}
 
 The text overlays the photograph at larger screen sizes.
 It's best to avoid a non-button call to action in these,
-as it's unlikely that the Pacific Blue will have accessible contrast with a
-non-white (or light gray) background.
+as it's unlikely that the Pacific Blue will have accessible contrast
+with a non-white (or light gray) background.
 
 <section class="m-hero m-hero__overlay"
-         style="background-image: url('http://files.consumerfinance.gov/f/images/PC_hero.original.jpg')">
+         style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/PC_hero.original.jpg')">
     <div class="m-hero_wrapper wrapper">
@@ -1467,10 +1596,34 @@ <div class="m-hero_text">
             <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.
+                Hero text goes here. This paragraph has a recommended maximum
+                length of 185 characters. This example paragraph is 151
+                characters long.
             </p>
         </div>
         <div class="m-hero_image-wrapper">
-            <div class="m-hero_image" style="background-image: url('http://files.consumerfinance.gov/f/images/pc_mobile_1.original.jpg')"></div>
+            <div class="m-hero_image"
+                 style="background-image: url('https://s3.amazonaws.com/files.consumerfinance.gov/f/images/pc_mobile_1.original.jpg')">
+            </div>
         </div>
     </div>
 </section>
+
+```
+<section class="m-hero m-hero__overlay"
+         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>
+            <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.
+            </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/pc_mobile_1.original.jpg')">
+            </div>
+        </div>
+    </div>
+</section>
+```

No alert changes

Improved metrics

Total package byte prevSize

1075720

increased by0.4%

Worsened metrics

Lines of code

2933

decreased by-1.15%

No dependency changes