Merged in feature/STDD-2 (pull request #8)

STDD-2: Header Banner: Variation #1

Approved-by: Vladimir Zdravkovic

src/scss/components/hero/_hero.scss

@@ -0,0 +1,68 @@
+@charset "UTF-8";
+
+.su-hero {
+  .su-hero__card {
+    border: none;
+    box-shadow: none;
+    color: $st-color-white;
+
+    a {
+      color: $st-color-white;
+      text-decoration: none;
+
+      &:hover,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .su-card__contents {
+    > h2 {
+      font-size: 1.3333em;
+    }
+
+    > p {
+      font-size: 1.6rem;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-type: none;
+
+      a {
+        position: relative;
+        padding-right: 1.8rem;
+
+        &::after {
+          position: absolute;
+          margin-left: 0.8rem;
+          font-size: 3.2rem;
+          line-height: 1.8rem;
+          content: "\203A";
+        }
+      }
+    }
+  }
+
+  &.color--black .su-hero__card {
+    background-color: $st-color-black;
+  }
+
+  &.color--cardinal-red .su-hero__card {
+    background-color: $st-color-cardinal-red;
+  }
+
+  &.color--sky-blue .su-hero__card {
+    background-color: $st-color-sky-blue;
+  }
+
+  &.color--brick .su-hero__card {
+    background-color: $st-color-brick;
+  }
+
+  &.color--palo-verde .su-hero__card {
+    background-color: $st-color-palo-verde;
+  }
+}

src/scss/components/hero/index.scss

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+
+@import "hero";

src/scss/components/index.scss

@@ -23,3 +23,4 @@
 // @import 'component-name/index';
 
 @import "alert/index";
+@import "hero/index";

src/scss/utilities/variables/_colors.scss

@@ -5,6 +5,7 @@
 
 // define colors here in the format of:
 //$abbreviation-color-pink: #ff0099; // like $saa-color-pink
+$st-color-white: #fff;
 $st-color-black: #2e2d29;
 $st-color-cardinal-red: #8c1515;
 $st-color-sky-blue: #016895;