Employee Dashboard - ViacomCBS UI Kit

PREVIEW

HTML
SCSS

<div class="employee-dashboard">
    <div class="employee-dashboard-item employee-dashboard-item--data">
        <div class="employee-dashboard-item__header">
            <div class="employee-dashboard-item__prefix">Prefix Text</div>
            <div class="employee-dashboard-item__data">DATA</div>
            <div class="employee-dashboard-item__suffix">Suffix Text</div>
        </div>
        <div class="employee-dashboard-item__content">
            <ul class="employee-dashboard__list">
                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="employee-dashboard-item employee-dashboard-item--data">
        <div class="employee-dashboard-item__header">
            <div class="employee-dashboard-item__prefix">Prefix Text</div>
            <div class="employee-dashboard-item__data">DATA</div>
            <div class="employee-dashboard-item__suffix">Suffix Text</div>
        </div>
        <div class="employee-dashboard-item__content">
            <ul class="employee-dashboard__list">
                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="employee-dashboard-item employee-dashboard-item--data">
        <div class="employee-dashboard-item__header">
            <div class="employee-dashboard-item__prefix">Prefix Text</div>
            <div class="employee-dashboard-item__data">DATA</div>
            <div class="employee-dashboard-item__suffix">Suffix Text</div>
        </div>
        <div class="employee-dashboard-item__content">
            <ul class="employee-dashboard__list">
                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>

                <li class="employee-dashboard__list-item">
                    <a href="" class="employee-dashboard__link">Lorem Ipsum</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="employee-dashboard-item">
        <div class="employee-dashboard-item__header">
            <div class="employee-dashboard-item__title">Title</div>
        </div>
        <div class="employee-dashboard__activity">
            <div class="employee-dashboard__activity-scroll">
                <ul class="employee-dashboard__activity-list">
                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge">pending</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--primary">Approved</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--alert">Alert</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge">pending</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--primary">Approved</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--alert">Alert</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge">pending</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--primary">Approved</div>
                    </li>

                    <li class="employee-dashboard__activity-item">
                        <div>
                            <a href="" class="employee-dashboard__activity-title">Status Item</a>
                        </div>
                        <div class="badge badge--alert">Alert</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

.employee-dashboard {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;

  @media (min-width: $breakpoint-tablet) {
    // Minmax used to prevent content from breaking grid
    grid-template-columns: repeat(2, minmax(0, 1fr));
    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;
  }

  @media (min-width: $breakpoint-desktop) {
    // Minmax used to prevent content from breaking grid
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.employee-dashboard-item {
  background-color: $color-base-white;
  display: flex;
  flex-direction: column;
}

.employee-dashboard-item__header {
  padding: 1.6rem 1.6rem 1.6rem 3.2rem;
}

.employee-dashboard-item--data {
  flex: 1;

  .employee-dashboard-item__header {
    flex: 1;
  }
}

.employee-dashboard-item__prefix {
  @include typeBody;
}

.employee-dashboard-item__data {
  @include typeDisplayMedium(true);
  color: $color-blue-medium;
  margin-bottom: 0.4rem;
}

.employee-dashboard-item__suffix {
  @include typeBody;
  margin-bottom: 0.4rem;
}

.employee-dashboard-item__content {
  flex: 1;
  margin-right: 1.6rem;
  background-color: $color-base-grey;
  padding: 1.6rem 1.6rem 0 3.2rem;
}

.employee-dashboard__list {
  padding-left: 0;
  list-style: none;
}

.employee-dashboard__list-item {
  margin-bottom: 0.8rem;
}

.employee-dashboard__link {
  @include typeBody(true);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;

  &::after {
    font-family: "FontAwesome";
    content: "\00a0\f178";
    display: inline;
  }
}

.employee-dashboard__activity {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  padding-left: 3.2rem;
  min-height: 20rem;
}

.employee-dashboard__activity-list {
  list-style: none;
  padding-left: 0;
}

.employee-dashboard__activity-item {
  margin-bottom: 1.2rem;
}

.employee-dashboard__activity-title {
  @include typeTitle(true);
  color: $color-base-blue;
}

.employee-dashboard__activity-scroll {
  position: absolute;
}