add first infoBoxes

src/scss/cdb-components/boxes.scss

@@ -10,6 +10,7 @@
 ```
 */
 
+@import '../cdb-utilities/mixins';
 @import '../cdb-variables/sizes';
 @import '../cdb-variables/colors';
 
@@ -19,3 +20,63 @@
   background: $cWhite;
   box-shadow: 0  $baseSize  $baseSize * 2 0 rgba(0, 0, 0, 0.16);
 }
+
+/* SG
+# Boxes/Info Boxes
+
+
+```
+<div class="CDB-InfoBox">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+<br/>
+<br/>
+<br/>
+<div class="CDB-InfoBox is-alert">
+  <h2 class="CDB-Text is-semibold CDB-Size-small u-bSpace--m">ABOUT PREVIEW MODE</h2>
+  <p class="CDB-Text CDB-Size-medium u-bSpace--m">He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear</p>
+  <ul class="CDB-InfoBox-footer">
+    <li class="CDB-InfoBox-footerItem">
+      <p class="CDB-Text is-semibold CDB-Size-small"><a href="#">CLOSE</a></p>
+    </li>
+    <li class="CDB-InfoBox-footerItem is-right">
+      <button class="CDB-Button CDB-Button--secondary CDB-Button--small">
+        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-small">SAVE</span>
+      </button>
+    </li>
+  </ul>
+</div>
+```
+*/
+
+.CDB-InfoBox {
+  padding: 12px 16px;
+  border-radius: 4px;
+  background: $cThirdBackground;
+  &.is-alert {
+    background: rgba($cHighlightYellow, 0.60);
+  }
+}
+
+.CDB-InfoBox-footer {
+  @include display-flex();
+  @include align-items(center);
+}
+
+.CDB-InfoBox-footerItem {
+  @include flex(1);
+  &.is-right {
+    text-align: right;
+  }
+}

src/scss/cdb-components/buttons.scss

@@ -146,7 +146,6 @@ Layout Component:
 
 .CDB-Button--secondary {
   border: 1px solid $cBlue;
-  background: $cWhite;
   color: $cBlue;
 
   &:hover {

src/scss/cdb-utilities/helpers.scss

@@ -27,6 +27,9 @@
 .u-lSpace--xl {
   margin-left: 12px;
 }
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
 .u-iBlock {
   @include inline-block();
 }

src/scss/cdb-variables/_colors.scss

@@ -29,3 +29,4 @@ $cPublic: #9BC63B;
 $cLink: #FEB100;
 $cPassword: #FB7B23;
 $cError: #F15743;
+$cHighlightYellow: #FFFFC0;