Banner - Day in History - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="banner-day">
    <h3 class="banner-day__title">Banner Title</h3>
    <span class="banner-day__date"> MMM DD </span>
    <p class="banner-day__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, eum consequuntur aliquid perspiciatis fugiat adipisci, ipsum, aliquam non quis ipsam alias.</p>
</div>

.banner-day {
  @include typeBody(true);
  color: $color-base-blue;
  background-color: $color-base-white;
  display: grid;

  @media (min-width: $breakpoint-tablet) {
    grid-template-columns: 1fr 1fr 2fr;
  }

  > * {
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding: 1.2rem;
  }
}

.banner-day__title {
  @include typeBody(true);
  margin: 0;

  @media (min-width: $breakpoint-tablet) {
    justify-self: flex-end;
  }
}

.banner-day__date {
  @include typeDisplay(true);
  background-color: $color-yellow-light;
  background-image: linear-gradient(to left, rgba($color-yellow-medium, 0.6), rgba($color-yellow-medium, 0.6) 3.2rem);
  background-repeat: no-repeat;
  background-size: 3.2rem 100%;
  background-position: right;
  padding-left: 2.4rem;
  padding-right: 3.2rem;
}

.banner-day__content {
  background-color: $color-yellow-medium;
  background-image: linear-gradient(
    to right,
    rgba($color-yellow-dark, 0.3),
    rgba($color-yellow-dark, 0.3) 3.2rem,
    rgba($color-yellow-dark, 0.6) 3.2rem,
    rgba($color-yellow-dark, 0.6) 6.4rem
  );
  background-repeat: no-repeat;
  background-size: 6.4rem 100%;
  padding-left: 9.6rem;
}