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

%banner,
.banner,
.banner-default {

  @include core-19;
  background: $turquoise;
  color: $white;
  display: block;
  padding: $gutter-half;
  margin: $gutter-half 0 $gutter 0;
  text-align: left;
  position: relative;
  clear: both;

}

.banner-with-tick,
.banner-default-with-tick {
  @extend %banner;
  padding: $gutter-half ($gutter + $gutter-half);
  background-image: file-url('tick-white.png');
  background-size: 19px;
  background-repeat: no-repeat;
  background-position: $gutter-half $gutter-half;
  font-weight: bold;
}

.banner-dangerous {

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

  .button {
    @include button($error-colour);
    margin-top: 10px;
  }

}

.banner-tip {

  @extend %banner;
  background: $yellow;
  color: $text-colour;
  text-align: left;
  font-weight: bold;

  a {
    &:link,
    &:visited {
      color: $text-colour;
      text-decoration: underline;
    }
  }

  ol {
    list-style-type: decimal;
  }

}

.banner-info,
.banner-important {
  @extend %banner;
  background: $white;
  color: $text-colour;
  background-image: file-url('icon-important-2x.png');
  background-size: 34px 34px;
  background-position: 0 0;
  background-repeat: no-repeat;
  padding: 7px 0 5px 50px;
}

.banner-info {
  background-image: file-url('icon-information-2x.png');
}