hero banner component

SU-SWS · Oct 24, 2017 · 7f16174 · 7f16174
1 parent fb045e4
commit 7f16174
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 22 deletions.
diff --git a/css/decanter.css b/css/decanter.css
@@ -1804,7 +1804,7 @@ dfn {
 .decanter-hero-banner {
   padding-top: 3rem;
   padding-bottom: 3rem;
-  background-image: url("../img/hero.png");
+  background-image: url("../img/hero-banner.png");
   background-position: center;
   background-size: cover; }
   /* line 14, ../scss/components/_hero-banner.scss */
@@ -1813,7 +1813,7 @@ dfn {
 
 /* line 19, ../scss/components/_hero-banner.scss */
 .decanter-hero-banner-callout {
-  background-color: #b1040e;
+  background-color: #ffffff;
   padding: 3rem; }
   @media screen and (min-width: 481px) {
     /* line 19, ../scss/components/_hero-banner.scss */
@@ -1825,15 +1825,9 @@ dfn {
     margin-bottom: 3rem; }
   /* line 32, ../scss/components/_hero-banner.scss */
   .decanter-hero-banner-callout .decanter-button {
-    font-size: 1.4rem;
-    margin-top: 7rem;
+    margin-top: 3rem;
     width: 100%; }
 
-/* line 39, ../scss/components/_hero-banner.scss */
-.decanter-hero-banner-callout-alt {
-  color: #ffffff;
-  display: block; }
-
 /* line 9, ../scss/components/_layout.scss */
 .decanter-layout-docs {
   display: flex;

diff --git a/css/decanter.min.css b/css/decanter.min.css
diff --git a/examples/components/hero-banner.html b/examples/components/hero-banner.html
@@ -25,14 +25,29 @@
   <div class="grid-example">
     <div class="decanter-grid">
       <h1>Hero Banner</h1>
+      <h2>Full Width</h2>
     </div>
     <div class="decanter-grid-full">
       <div class="decanter-hero-banner">
         <div class="decanter-grid">
           <div class="decanter-hero-banner-callout">
-            <h2><span class="decanter-hero-banner-callout-alt">Hero callout:</span> Call attention to a current priority</h2>
-            <a class="decanter-hero-banner-link" href="#">Link to more about that priority</a>
-            <a class="decanter-button decanter-button-big decanter-button-secondary" href="#">Learn about what we do</a>
+            <h2>Header lorem ipsum dolor</h2>
+            <a class="decanter-hero-banner-link" href="#">Link sed ut perspiciatis unde omnis iste</a>
+            <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
+            <a class="decanter-button" href="#">Button link vero eos et</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="decanter-grid">
+      <h2>12 Column</h2>
+      <div class="decanter-hero-banner">
+        <div class="decanter-grid">
+          <div class="decanter-hero-banner-callout">
+            <h2>Header lorem ipsum dolor</h2>
+            <a class="decanter-hero-banner-link" href="#">Link sed ut perspiciatis unde omnis iste</a>
+            <p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
+            <a class="decanter-button" href="#">Button link vero eos et</a>
           </div>
         </div>
       </div>

diff --git a/img/hero-banner.png b/img/hero-banner.png
diff --git a/img/hero.png b/img/hero.png
diff --git a/scss/components/_hero-banner.scss b/scss/components/_hero-banner.scss
@@ -7,7 +7,7 @@
 .decanter-hero-banner {
   @include padding($site-margins null);
 
-  background-image: url("#{$image-path}/hero.png");
+  background-image: url("#{$image-path}/hero-banner.png");
   background-position: center;
   background-size: cover;
 
@@ -17,7 +17,7 @@
 }
 
 .decanter-hero-banner-callout {
-  background-color: $color-bright-red;
+  background-color: $color-white;
   padding: 3rem;
 
   @include media($small-screen) {
@@ -30,13 +30,7 @@
   }
 
   .decanter-button {
-    font-size: $small-font-size;
-    margin-top: 7rem;
+    margin-top: 3rem;
     width: 100%;
   }
 }
-
-.decanter-hero-banner-callout-alt {
-  color: $color-white;
-  display: block;
-}