Page Title - Manager - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="page-title-manager">
    <div class="page-title-manager__inner">
        <img src="/images/page-title-manager-v2.png" alt="" class="img-responsive page-title-manager__media" />
        <h1 class="page-title-manager__title">Manager Center</h1>
        <div class="page-title-manager__intro">Welcome to the Manager Center! The central location for the support you need to stay up to date on milestones and team activity, find the latest manager guidance, and help your team succeed.</div>
    </div>
</div>

.page-title-manager {
  background-color: $color-base-blue;
  color: $color-base-white;
}

.page-title-manager__inner {
  position: relative;
  z-index: 1;
  max-width: 1170px;
  margin: 0 auto;

  @media (min-width: $breakpoint-desktop) {
    min-height: 18rem;
    background: url("/images/page-title-manager-v2.png") no-repeat center;
    background-size: cover;

    &::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to right, $color-base-blue, transparent 50%);
    }
  }
}

.page-title-manager__media {
  margin-bottom: 1.6rem;

  @media (min-width: $breakpoint-desktop) {
    display: none;
  }
}

.page-title-manager__title {
  @include typeDisplay(true);
  position: relative;
  text-transform: uppercase;
  padding: 0 1.6rem;
  margin: 0 0 1.6rem;

  @media (min-width: $breakpoint-desktop) {
    @include typeDisplayLarge(true);
    width: 50%;
    padding-top: 2.4rem;
    margin-bottom: 2.4rem;
  }
}

.page-title-manager__intro {
  @include typeCaption(true);
  position: relative;
  padding: 0 1.6rem 1.6rem;

  @media (min-width: $breakpoint-desktop) {
    @include typeBody(true);
    width: 50%;
  }
}