My Org - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="my-org">
    <h2 class="my-org__title">COMPONENT TITLE</h2>
    <div class="my-org__container">
        <div>[ Manager Banner ]</div>
        <div>[ Banner-Day ]</div>
        <div>[ Multipart ]</div>
    </div>
</div>

.my-org {
  color: $color-base-white;
}

.my-org__title {
  @include typeDisplayMedium(true);

  @media (min-width: $breakpoint-tablet) {
    margin-left: 6.4rem;
  }
}

.my-org__container {
  @media (min-width: $breakpoint-tablet) {
    background-image: linear-gradient(
      to right,
      rgba($color-base-white, 0.6),
      rgba($color-base-white, 0.6) 3.2rem,
      rgba($color-base-white, 0.3) 3.2rem,
      rgba($color-base-white, 0.3) 6.4rem
    );
    background-repeat: no-repeat;
    background-size: 6.4rem 100%;
    padding-left: 6.4rem;
  }
}