implementing basic background shapes

addon/styles/addon.css

@@ -6,6 +6,7 @@
 @import "helpers.css";
 @import "layout.css";
 @import "icon.css";
+@import "background-shapes.css";
 
 @import "components/es-navbar.css";
 @import "components/es-header.css";

addon/styles/background-shapes.css

@@ -0,0 +1,32 @@
+.bg-shape-boxes {
+  background-image: url('/images/boxes-top.svg');
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+
+.bg-shape-boxes-bottom {
+  background-image: url('/images/boxes-bottom-light.svg');
+  background-repeat: no-repeat;
+  background-position: bottom right;
+}
+
+.dark .bg-shape-boxes-bottom {
+  background-image: url('/images/boxes-bottom.svg');
+}
+
+.bg-shape-boxes-bottom + * {
+  background-image: url('/images/boxes-bottom-continued.svg');
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+
+.bg-shape-swipe-top {
+  background: url(/images/swipe-top.svg) no-repeat top center;
+  background-size: contain;
+}
+
+.bg-shape-swipe-bottom {
+  background-image: url('/images/swipe-bottom.svg');
+  background-repeat: no-repeat;
+  background-position: bottom left;
+}

addon/styles/components/es-page-header.css

@@ -1,9 +1,6 @@
 .es-page-header {
   padding-top: 4.5rem;
   padding-bottom: 4.5rem;
-  background-image: url('/images/pattern-1.svg');
-  background-repeat: no-repeat;
-  background-position: bottom right;
 }
 
 .es-page-header__title {

addon/templates/components/es-page-header.hbs

@@ -1,4 +1,4 @@
-<div class="es-page-header" ...attributes>
+<div class="es-page-header bg-shape-boxes-bottom" ...attributes>
   <div class="container">
     <h1 class="large">{{@headline}}</h1>
 

docs/concepts/background-shapes.md

@@ -0,0 +1,90 @@
+# Background Shapes
+
+In the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary.
+
+## Background boxes
+
+To use the "background boxes" shape then you need to use the `bg-shape-boxes` css helper as follows
+
+```html
+<div class="layout-grid bg-shape-boxes dark padding-vertical-large">
+  <div class="col-4-large offset-1-large text-center">
+    <h2>Build with the teams that never stop shipping.</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+  <div class="col-4-large offset-1-large text-center">
+    <h2>More stuff to show location of boxes</h2>
+  </div>
+</div>
+```
+
+There is an alternative "background boxes" shape that you can use with `bg-shape-boxes-bottom` that will automatically continue into the following dom node (e.g. the next div)
+
+```html
+<div class="layout-grid bg-shape-boxes-bottom dark padding-vertical-large">
+  <div class="col-4-large offset-1-large text-center">
+    <h2>Build with the teams that never stop shipping.</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+</div>
+<div class="layout-grid padding-vertical-medium">
+  <div class="col-4-large offset-1-large text-center">
+    <h2>More content to show off the shapes</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+</div>
+```
+
+If you are using the [PageHeader component](/components/page-header/) then you will automatically have `bg-shape-boxes-bottom` set and it will automatically continue into the next dom node:
+
+```html
+<EsPageHeader
+  @headline="Demo for background shapes"
+  @detail="This section is using boxes-bottom and continues in the the next section"
+  class="dark"
+>
+  <EsButton>Go</EsButton>
+</EsPageHeader>
+<div class="layout-grid">
+  <div class="col-4-large offset-1-large text-center">
+    <h2>Build with the teams that never stop shipping.</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+</div>
+```
+
+## Swipes
+
+The other type of background shape is a "swipe" that can either be a swipe across the top of the section using `bg-shape-swipe-top` or a rectangle from the bottom of the section using `bg-shape-swipe-bottom`.
+
+```html
+<div class="layout-grid bg-shape-swipe-top">
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>Build with the teams that never stop shipping.</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>More stuff to show location of swipe</h2>
+  </div>
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>yes this needs quite a large section</h2>
+  </div>
+</div>
+```
+
+and then using the `bg-shape-swipe-bottom` we can get a shape for the bottom of a section:
+
+```html
+<div class="layout-grid dark bg-shape-swipe-bottom">
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>Build with the teams that never stop shipping.</h2>
+    <p>Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.</p>
+  </div>
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>More stuff to show location of swipe</h2>
+  </div>
+  <div class="col-4-large offset-1-large text-center margin-vertical-large">
+    <h2>yes this needs quite a large section</h2>
+  </div>
+</div>
+```