Standardize blast header component

assets/scss/6-components/_all.scss

@@ -5,6 +5,7 @@
 // Styleguide 6.0.0
 @import 'ad/ad';
 @import 'back-to-top/back-to-top';
+@import 'blast-header/blast-header';
 @import 'button/button';
 @import 'card/card';
 @import 'caption/caption';

assets/scss/6-components/blast-header/_blast-header.scss

@@ -0,0 +1,45 @@
+// Blast Header (c-blast-header)
+//
+// Header for Blast product.
+//
+// Markup: 6-components/blast-header/blast-header.html
+//
+// Styleguide 6.1.1
+$blast-header-height: 18rem;
+
+// Header w/ logos
+.c-blast-header {
+  background-size: cover;
+  height: $blast-header-height;
+
+  &__col {
+    margin-left: auto;
+    margin-right: auto;
+
+    &--logo {
+      max-width: px-to-rem(450px);
+    }
+
+    &--title {
+      max-width: px-to-rem(250px);
+      align-self: center;
+
+      img {
+        height: px-to-rem(20px);
+      }
+    }
+  }
+  @supports (display: grid) {
+    @include mq($from: bp-m) {
+      &__inner {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $size-b;
+      }
+
+      &__col {
+        margin: 0;
+      }
+    }
+  }
+}

assets/scss/6-components/blast-header/blast-header.html

@@ -0,0 +1,11 @@
+<header class="c-blast-header l-align-center-children has-bg-black-off has-text-white has-l-btm-marg" style="background-image: url('/img/blast-header/TT-Blast-landing_photo.jpg')">
+  <div class="c-blast-header__inner l-container l-width-full has-page-padding">
+    <div class="c-blast-header__col c-blast-header__col--logo has-m-btm-marg">
+      <a class="l-display-block" href="/theblast/"><img class="l-width-max" src="/img/blast-header/TT-TheBlast-logo_PSvitek.png" alt="The Blast Logo"></a>
+    </div>
+    <div class="c-blast-header__col c-blast-header__col--title">
+      <h1 class="is-hidden-until-bp-m t-size-m has-s-btm-marg">The best political<br>newsletter in Texas.</h1>
+      <a class="l-display-block" href="/"><img class="l-width-max" src="/img/blast-header/TT-aprojectby-horizontal-white.svg" alt="A project by The Texas Tribune"></a>
+    </div>
+  </div>
+</header>