Add notification banner styles

src/govuk/components/_all.scss

@@ -19,6 +19,7 @@
 @import "input/index";
 @import "inset-text/index";
 @import "label/index";
+@import "notification-banner/index";
 @import "panel/index";
 @import "phase-banner/index";
 @import "tabs/index";

src/govuk/components/notification-banner/_index.scss

@@ -0,0 +1,70 @@
+@include govuk-exports("govuk/component/notification-banner") {
+  /* stylelint-disable */
+
+  .govuk-notification-banner {
+    @include govuk-font($size: 19);
+    @include govuk-responsive-margin(8, "bottom");
+
+    border: $govuk-border-width solid $govuk-brand-colour;
+
+    &:focus {
+      outline: $govuk-focus-width solid $govuk-focus-colour;
+    }
+  }
+
+  .govuk-notification-banner--success {
+    border-color: $govuk-success-colour;
+  }
+
+  .govuk-notification-banner--error {
+    border-color: $govuk-error-colour;
+  }
+
+  .govuk-notification-banner__header {
+    padding: 0 govuk-spacing(3) govuk-spacing(1);
+    background-color: $govuk-brand-colour;
+
+
+    @include govuk-media-query($from: tablet) {
+      padding: (govuk-spacing(2) - $govuk-border-width) govuk-spacing(4) govuk-spacing(2);
+    }
+  }
+
+  .govuk-notification-banner--success .govuk-notification-banner__header {
+    background-color: $govuk-success-colour;
+  }
+
+  .govuk-notification-banner--error .govuk-notification-banner__header {
+    background-color: $govuk-error-colour;
+  }
+
+  .govuk-notification-banner__title {
+    @include govuk-font($size: 19, $weight: bold);
+    color: govuk-colour("white");
+    margin: 0;
+    padding: 0;
+  }
+
+  .govuk-notification-banner__content {
+    @include govuk-font($size: 24, $weight: bold);
+    padding: govuk-spacing(3);
+
+    @include govuk-media-query($from: tablet) {
+      padding: govuk-spacing(4);
+    }
+  }
+
+  .govuk-notification-banner__link {
+    @include govuk-typography-weight-bold;
+    @include govuk-link-common;
+    @include govuk-link-style-default;
+  }
+
+  .govuk-notification-banner__link--success {
+    @include govuk-link-style-success;
+  }
+
+  .govuk-notification-banner__link--error {
+    @include govuk-link-style-error;
+  }
+}

src/govuk/components/notification-banner/_notification-banner.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";