notifications-admin/app/assets/stylesheets/components/banner.scss

%banner,
.banner,
.banner-default {

  @include bold-19;
  color: $button-colour;
  display: block;
  padding: govuk-spacing(3);
  margin: govuk-spacing(3) 0 govuk-spacing(6) 0;
  text-align: left;
  position: relative;
  clear: both;
  border: 5px solid $button-colour;

  &-title {
    @include bold-24;
  }

  p {
    margin: 10px 0 5px 0;
  }

  .list-bullet {
    @include copy-19;
  }

  .page-footer {
    margin-bottom: govuk-spacing(1);
  }

}

%banner-with-tick,
.banner-with-tick {
  padding: govuk-spacing(3) (govuk-spacing(6) + govuk-spacing(3));
  background-image: file-url('tick.png');
  background-size: 19px;
  background-repeat: no-repeat;
  background-position: govuk-spacing(3) govuk-spacing(3);

}

.banner-default-with-tick {
  @extend %banner;
  @extend %banner-with-tick;
}

.banner-dangerous {

  @extend %banner;
  @include bold-19;
  background: $white;
  color: $text-colour;
  border: 5px solid $error-colour;
  margin: 15px 0;
  text-align: left;

  &:focus {
    outline: 3px solid $govuk-focus-colour;
  }

  .list {
    margin-bottom: 0;
  }

}

.banner-tour {

  @extend %banner;
  background: $govuk-blue;
  color: $white;
  margin-top: 10px;
  margin-bottom: 0;
  padding: govuk-spacing(6);
  height: 425px;
  overflow: hidden;
  box-shadow: inset 0 -1em 1.6em 0 rgba(0, 0, 0, 0.05);
  border: 0;

  &-no-fixed-height {
    height: auto;
    padding-top: govuk-spacing(8);
    min-height: 425px;
  }

  &-with-service-name {
    margin-top: -10px;
    padding-top: 0;
    box-shadow: 0 -1px 0 0 darken($govuk-blue, 10%);
  }

  .heading-medium {
    @include core-24;
  }

  p {

    margin-top: 0;
    margin-bottom: govuk-spacing(6);
    color: $white;

    &:last-child {
      margin-bottom: 0;
    }

    & + p {
      margin-top: -1 * govuk-spacing(3);
    }

  }

  ul {
    @include core-24;
    color: $white;
    margin-bottom: govuk-spacing(5);
  }

  li {
    margin-bottom: govuk-spacing(3);
    list-style-type: disc;
    margin-left: govuk-spacing(6);
  }

  a {

    font-weight: bold;
    display: block;
    padding: 0 ;
    margin: 0 0 govuk-spacing(6) 0;

    &:link,
    &:visited {
      color: $white;
    }

    &:hover {
      color: $white;
      background-color: $link-hover-colour;
      box-shadow: 0 0 0 10px $link-hover-colour;
    }

    &:focus,
    &:active {
      color: $govuk-focus-text-colour;
      background-color: $govuk-focus-colour;
      box-shadow: 0 0 0 10px $govuk-focus-colour, 0 4px 0 10px $govuk-focus-text-colour;
    }

  }
  img {
    width: 100%;
    height: auto;
    position: relative;
    top: -1 * govuk-spacing(2);
  }

  .greyed-out-step {
    opacity: 0.6;
  }

}

.banner-dashboard {

  $baseline-shift: 5px;

  display: block; // for browsers that don't support flexbox
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  padding: (govuk-spacing(3) - 1px) 0 (govuk-spacing(3) + 1px) 0;
  border-top: 1px solid $border-colour;
  border-bottom: 1px solid $border-colour;
  margin-bottom: govuk-spacing(6);
  text-decoration: none;

  &:focus {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
  }

  &-count,
  &-meta {
    float: left; // for browsers that don't support flexbox
  }

  &-count {
    @include govuk-font(36, $weight: bold, $tabular: true);
    padding-right: 8px;
    position: relative;
    // remove the top of the extra line-height this introduces
    top: $baseline-shift;
    margin-top: -$baseline-shift;
    flex: 0 1 0.85ch;
  }

  &-count-label {
    @include govuk-font(24, $weight: bold);
    text-decoration: underline;
    padding-right: govuk-spacing(6);
    margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
    flex: 2 1 auto;
  }

  &-meta {
    @include govuk-font(19);
    float: right;
    text-align: right;
    flex: initial;
  }

  & + .banner-dashboard {
    margin-top: -1 * govuk-spacing(6);
    border-top: none;
  }
}