Banner - New Hire - ViacomCBS UI Kit

PREVIEW

<div class="new-hire js-new-hire">
    <a href="#" class="new-hire__close js-new-hire-close">
        <i class="fa fa-close"></i>
    </a>
    <div class="new-hire__count">
        <span>IT'S DAY</span>
        <span class="new-hire__day">5</span>
    </div>
    <div class="new-hire__body">
        <div class="new-hire__title">Welcome, Riley!</div>
        <div class="new-hire__content">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
        <div class="new-hire__actions">
            <a href="#" class="btn btn-light"
                >Onboarding
                <i class="fa fa-long-arrow-right"></i>
            </a>
        </div>
    </div>
</div>

.new-hire {
  position: relative;
  color: $color-base-white;
  background-color: $color-blue-medium;
  display: flex;
  float: right;
  margin-bottom: 4rem;
  width: 100%;

  @media (min-width: $breakpoint-desktop) {
    max-width: 64rem;
  }
}

.new-hire__count {
  @include typeHeadline(true);
  width: 16rem;
  background-color: $color-blue-dark;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.new-hire__body {
  flex: 1;
  padding: 1.2rem 3.2rem 1.2rem 1.2rem;
  word-break: break-word;

  @media (min-width: $breakpoint-desktop) {
    padding: 1.2rem 3.2rem;
  }
}

.new-hire__title {
  @include typeHeadline(true);
  margin-bottom: 1.6rem;
}

.new-hire__content {
  margin-bottom: 1.6rem;
}

.new-hire__actions {
  text-align: right;

  .btn {
    text-align: left;
    white-space: normal;
  }
}

.new-hire__day {
  @include typeDisplayXL(true);
  line-height: 0.8;
}

.new-hire__close {
  position: absolute;
  top: 0;
  font-size: 2.4rem;
  color: $color-base-white;
  right: 1.2rem;
}

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