Fixing page header

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

@@ -1,6 +1,9 @@
 .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/styles/global.css

@@ -67,6 +67,10 @@ h6 {
 .dark {
   background-color: var(--color-dark);
   color: var(--color-light);
+
+  & a {
+    color: var(--color-light);
+  }
 }
 
 .bg-muted {

addon/styles/helpers.css

@@ -5,3 +5,7 @@
 .margin-bottom-small {
   margin-bottom: 2rem;
 }
+
+.margin-left-small {
+  margin-left: 2rem;
+}

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

@@ -1,8 +1,8 @@
 <div class="es-page-header" ...attributes>
   <div class="container">
-    <h1 class="xlarge">{{@headline}}</h1>
+    <h1 class="large">{{@headline}}</h1>
 
-    <p>{{@detail}}</p>
+    <p class="{{if hasBlock 'margin-bottom-small'}}">{{@detail}}</p>
 
     {{yield}}
   </div>

docs/css/helpers.md

@@ -9,3 +9,21 @@ if you would like a section or a div to use the dark style then you need to add
   hello there
 </div>
 ```
+
+## margins
+
+If you would like to add a bit of margin to the bottom or left of something (for example in a vertical or horizontal list) there are two simple helpers to add a small amount of margin: `margin-bottom-small` and `margin-left-small`.
+
+```html
+<ul>
+  <li class="margin-bottom-small">One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+```
+
+```html
+<button>One</button>
+<button class="margin-left-small">Two</button>
+<button>Three</button>
+```

tests/dummy/app/styles/app.css

@@ -1 +1,5 @@
 @import "color-pallet";
+
+.self-executing-code-block {
+  margin-bottom: 2rem;
+}