Banner Notifications - ViacomCBS UI Kit

PREVIEW

<!-- Announcement Banner -->
<div class="banner-notification js-banner">
    <div class="banner-notification__inner">
        <div class="banner-notification__body">
            <span class="banner-notification__type-title">
                <i class="fa fa-info-circle"></i>
                Important Announcement
            </span>

            <span class="banner-notification__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, quo!</span>
            <a href="#" class="banner-notification__link">Link Text</a>
        </div>
        <div class="banner-notification__actions">
            <a href="#" class="banner-notification__close js-banner-close">
                <i class="fa fa-close"></i>
            </a>
        </div>
    </div>
</div>
<!-- /Announcement Banner -->

<!-- Emergency Banner -->
<div class="banner-notification banner-notification--alert js-banner">
    <div class="banner-notification__inner">
        <div class="banner-notification__body">
            <span class="banner-notification__type-title">
                <i class="fa fa-exclamation-circle"></i>
                Emergency Announcement
            </span>
            <span class="banner-notification__content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, quo!</span>
            <a href="#" class="banner-notification__link">Link Text</a>
        </div>
    </div>
</div>
<!-- /Emergency Banner -->

.banner-notification {
  display: none;
  color: $color-base-white;
  background-color: $color-blue-dark;
  border-bottom: 1px solid $color-base-white;

  &.banner-notification--alert {
    background-color: $color-magenta-medium;
    border-bottom: 0;
  }

  &.is-active {
    display: block;
  }
}

.banner-notification__inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0.8rem;
  display: flex;
  justify-content: space-between;
}

.banner-notification__type-title {
  @include typeSubheader(true);
  margin-right: 0.8rem;
}

.banner-notification__content {
  @include typeBody;
  margin-right: 0.8rem;
  display: inline-flex;
}

.banner-notification__link {
  @include typeBody(true);
  color: $color-base-white;

  &:hover {
    color: $color-base-white;
  }
}

.banner-notification__actions {
  padding: 0 0.4em;
}

.banner-notification__close {
  @include typeSubheader(true);
  color: $color-base-white;

  &:hover {
    color: $color-blue-light;
  }
}

$(function () {
  $(".js-banner").slideDown();
  $(".js-banner-close").on("click", function (e) {
    e.preventDefault();
    $(this).closest(".js-banner").slideUp();
  });
});