diff --git a/website/source/assets/stylesheets/_announcement-bnr.scss b/website/source/assets/stylesheets/_announcement-bnr.scss
new file mode 100755
index 000000000..6e3253039
--- /dev/null
+++ b/website/source/assets/stylesheets/_announcement-bnr.scss
@@ -0,0 +1,142 @@
+//
+// announcement bnr
+// --------------------------------------------------
+
+$enterprise-bnr-font-weight: 300;
+$enterprise-bnr-consul-color: #B52A55;
+$enterprise-color-dark-white: #A9B1B5;
+
+body{
+  // when _announcment-bnr.erb (ie. Consul Enterprise Announcment) is being used in layout we need to push down content to accommodate
+  // add this class to body
+  &.-displaying-bnr{
+    #header{
+      > .container{
+        padding-top: 8px;
+        -webkit-transform: translateY(32px);
+            -ms-transform: translateY(32px);
+                transform: translateY(32px);
+      }
+    }
+
+    #jumbotron {
+      .container{
+        .jumbo-logo-wrap{
+          margin-top: 160px;
+        }
+      }
+    }
+
+    &.page-sub{
+      #header{
+        > .container{
+          padding-bottom: 32px;
+        }
+      }
+    }
+  }
+}
+
+
+#announcement-bnr {
+  height: 40px;
+  flex-shrink: 0;
+  background-color: #000;
+
+  &.-absolute{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+  }
+
+  a,p{
+    font-size: 14px;
+    color: $enterprise-color-dark-white;
+    font-family: $header-font-family;
+    font-weight: $enterprise-bnr-font-weight;
+    font-size: 13px;
+    line-height: 40px;
+    margin-bottom: 0;
+  }
+
+  .link-highlight{
+    display: inline-block;
+    margin-left: 3px;
+    color: lighten($purple, 10%);
+    font-weight: 400;
+    -webkit-transform: translateY(1px);
+        -ms-transform: translateY(1px);
+            transform: translateY(1px);
+  }
+
+  .enterprise-logo{
+    position: relative;
+    top: 4px;
+
+    &:hover{
+      text-decoration: none;
+
+      svg{
+        rect{
+          fill: $enterprise-color-dark-white;
+        }
+      }
+    }
+
+    svg{
+      width: 156px;
+      height: 18px;
+      fill: $white;
+      margin-right: 4px;
+      margin-left: 3px;
+
+      rect{
+        @include transition(all .1s ease-in);
+      }
+    }
+  }
+}
+
+.hcaret{
+  display: inline-block;
+  -moz-transform: translate(0, -1px) rotate(135deg);
+  -webkit-transform: translate(0, -1px) rotate(135deg);
+  transform: translate(0, -1px) rotate(135deg);
+  width: 7px;
+  height: 7px;
+  border-top: 1px solid lighten($purple, 10%);
+  border-left: 1px solid lighten($purple, 10%);
+  @include transition(all .1s ease-in);
+}
+
+@media (max-width: 768px) {
+  #announcement-bnr {
+    .tagline{
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 320px) {
+  #announcement-bnr {
+    a,p{
+      font-size: 12px;
+    }
+
+    .link-highlight{
+      display: inline-block;
+      margin-left: 1px;
+    }
+
+    .enterprise-logo svg{
+      width: 128px;
+      margin-left: 2px;
+    }
+
+    .hcaret{
+      display: none;
+    }
+  }
+}
diff --git a/website/source/assets/stylesheets/_variables.scss b/website/source/assets/stylesheets/_variables.scss
index 1a1b0ff07..768ff74ab 100755
--- a/website/source/assets/stylesheets/_variables.scss
+++ b/website/source/assets/stylesheets/_variables.scss
@@ -11,7 +11,7 @@ $header-height:  		   	    90px;
 $jumbotron-color:  			    #fff;
 $btn-border-radius:   		  4px;
 $el-border-radius:   		    6px;
-$negative-hero-margin: 		  -80px;
+$negative-hero-margin: 		  -70px;
 // colors
 // -------------------------
 
diff --git a/website/source/assets/stylesheets/application.scss b/website/source/assets/stylesheets/application.scss
index 165f2a01f..1a039a39c 100755
--- a/website/source/assets/stylesheets/application.scss
+++ b/website/source/assets/stylesheets/application.scss
@@ -22,6 +22,7 @@
 @import 'hashicorp-shared/_hashicorp-sidebar';
 
 // Components
+@import '_announcement-bnr';
 @import '_header';
 @import '_footer';
 @import '_jumbotron';
diff --git a/website/source/layouts/_meta.erb b/website/source/layouts/_meta.erb
index 191e585b1..6acbdaa51 100644
--- a/website/source/layouts/_meta.erb
+++ b/website/source/layouts/_meta.erb
@@ -30,7 +30,7 @@
     <%= yield_content :head %>
   </head>
 
-  <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %>">
+  <body id="page-<%= current_page.data.page_title ? "#{current_page.data.page_title}" : "home" %>" class="page-<%= current_page.data.page_title ? "#{current_page.data.page_title} layout-#{current_page.data.layout} page-sub" : "home layout-#{current_page.data.layout}" %> -displaying-bnr">
     <!-- Google Tag Manager (noscript) -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NR2SD7C"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>