changes in the cards

projects/common-consumption/src/lib/card/card.module.ts

@@ -15,6 +15,7 @@ import { NotificationCardComponent } from './notification-card/notification-card
 import {BannerCardComponent} from './banner-card/banner-card.component';
 import { TruncatedEllipsisComponent } from './truncated-ellipsis/truncated-ellipsis.component';
 import { CqubeCardComponent } from './cqube-card/cqube-card.component';
+import { LibraryCardV5Component } from './library-card-v5/library-card-v5.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { CqubeCardComponent } from './cqube-card/cqube-card.component';
     NotificationCardComponent,
     BannerCardComponent,
     TruncatedEllipsisComponent,
-    CqubeCardComponent
+    CqubeCardComponent,
+    LibraryCardV5Component
   ],
   imports: [
     CommonModule

projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.html

+<div class="sb--card"
+  [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
+  (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button">
+  <div class="sb-card-label">{{content?.primaryCategory}}</div>
+  <div class="sb--card__main-area mt-16">
+    <!-- card img -->
+    <!-- <div class="sb--card__img">
+      <div class="img-container">
+        <img [src]="cardImg" alt="">
+      </div>
+    </div> -->
+    
+    <!-- card mobile view details -->
+    <div class="sb--card__info">
+        <div class="sb--card__meta1">
+          <h4 class="sb--card__title sb__ellipsis sb__ellipsis--two text-left flex-basis-1" title="{{content?.name}}"><bdi>{{content?.name}}</bdi></h4>
+          <a *ngIf="isMenu" role="button" aria-label="View more actions menu" class="menu" (click)="onMenuClick($event);$event.stopPropagation()" tabindex="0"></a>
+        </div>
+      
+      <div class="sb--card__meta1 text-left mb-4" *ngIf="content?.se_mediums?.length">
+        <span class="data_2 ellipsis" title="{{content?.se_mediums}}">Role: {{content?.se_mediums}}</span>
+      </div>
+      <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length">
+        <span class="data_1 ellipsis" title="{{content?.subject}}">Competency: {{content?.subject}}</span>
+      </div>
+      
+    </div>
+  </div>
+
+  <!-- content for only desktop -->
+  <!-- <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+    <div class="sb--card__moreinfo"> -->
+      <!-- other meta info Medium, Organization etc -->
+      <!-- <div class="sb--card__meta2 text-left">
+        <div class="sb--card__meta2_data" *ngIf="content?.medium"><span class="">{{moreInfoLabel}}:
+            {{content?.medium}}</span></div>
+        <div class="sb--card__org sb__ellipsis" *ngIf="content?.organisation"><bdi>{{content?.organisation}}</bdi></div>
+      </div> -->
+      <!-- other meta info Badge and card category Book, learn, practice -->
+      <!-- <div class="sb--card__tags">
+      <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
+          [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
+      <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
+      </div>
+    </div>
+    <div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+        <div>
+          <button class="sb-btn sb-btn-primary sb-btn-normal w-100 border-top-r-left-right">
+            <i class="icon-svg icon-svg--xxs icon-videos mr-4">
+              <svg class="icon icon-svg--white">
+                <use xlink:href="assets/common-consumption/images/sprite.svg#play"></use>
+              </svg>
+            </i> {{btnlabel}} </button>
+        </div>
+    </div>
+  </div> -->
+
+  <!-- Qr code card -->
+  <div *ngIf="type === LibraryCardTypes.QRCODE_RESULT">
+    <!-- Section area if not available it will be hidden -->
+    <div class="sb--card__moreinfo" *ngIf="section !== null">
+      <div class="sb--card__meta2 text-left">
+        <div class="sb--card__meta2_data sb__ellipsis sb__ellipsis--two" *ngIf="section">
+          <span class="label">{{moreInfoLabel}}: </span>
+          <span class="value">{{section}}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- <ng-content select=".card-hover">
+    
+  </ng-content> -->
+  <ng-container
+    *ngTemplateOutlet="gridTemplate; context: {$implicit: content?.hoverData, hoverData: content?.hoverData, content:content}"
+    class="card-hover">
+
+  </ng-container>
+</div>
+
+  <div class="sb--card" *ngIf="isLoading" tabindex="0" role="button">
+      <div class="sb--card__main-area">
+          <!-- card img -->
+          <div class="sb--card__img">
+            <div class="img-container loading-animation">
+              
+            </div>
+          </div>
+          <!-- card mobile view details -->
+          <div class="sb--card__info">
+            <h4 class="sb--card__title loading-animation sb--card--highlighter"></h4>
+            <div class="sb--card__meta1 text-left">
+              <span class="data_1 ellipsis loading-animation sb--card--highlighter"></span>
+            </div>
+          </div>
+        </div>
+        <div class="sb--card__moreinfo" style="display:block;" *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.QRCODE_RESULT || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+              <div class="sb--card__meta2 text-left" style="float:left;width:60%">
+                <div class="label loading-animation sb--card--highlighter" style="width:80%;"></div>
+                <div class="value loading-animation sb--card--highlighter" style="width:60%;"></div>
+              </div>
+              <div class="sb--card__tags" style="float:right;width:30%;margin-top: 15px;">
+                <div class="label loading-animation sb--card--highlighter" style="width:80%;"></div>
+              </div>
+              <div style="clear:both;"></div>
+        </div>
+        <div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+          <div>
+            <div class="label loading-animation sb--card--highlighter" style="width:100%;"></div>
+          </div>
+      </div>
+
+  </div>
\ No newline at end of file

projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.scss

+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+@use "~@project-sunbird/sb-styles/assets/loadingshadows" as *;
+
+::ng-deep :root {
+  --cc-sbcard-bg: var(--white);
+  --cc-sbcard-img-container-bg: var(--gray-100);
+  --cc-sbcard-title: var(--primary-color);
+  --cc-sbcard-meta-text: var(--gray-800);
+  --cc-sbcard-dot-divider: var(--gray-200);
+  --cc-sbcard-moreinfo-bg: none; //var(--rc-FAFAFA);
+  --cc-sbcard-moreinfo-bordertop: #cacbce;
+  --cc-sbcard-meta2-text: var(--gray-800);
+  --cc-sbcard-org-text: var(--gray-200);
+  --cc-sbcard-type-bg: var(--gray-200);
+  --cc-sbcard-type-text: var(--white);
+  --cc-sbcard-rv-img-container-bg: var(--gray-100);
+  --cc-sbcard-selected-border: var(--primary-color);
+  --cc-sbcard-selected-bg:rgba(2, 79, 157, 0.2);
+  --cc-sbcard-offline-bg: var(--tertiary-color);
+  --cc-sbcard-offline-img-text: var(--white);
+  --cc-sbcard-card__progressbar-bg: var(--gray-100);
+  --cc-sbcard-card__progressbar-span-bg: var(--secondary-200);
+  --cc-sbcard-type-br:var(--gray-200);
+}
+
+/* sb card component css */
+:host {
+  .sb--card {
+    width: 100%;
+    background-color: var(--cc-sbcard-bg);
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    position: relative;
+    margin-top: 0px;
+    border: 0px;
+    contain: content;
+    border-radius: calculateRem(2px) !important;
+    padding: 24px 16px;
+    border: 1px solid rgba(0,0,0, 0.1) !important;
+    box-shadow: 0px 2px 4px rgba(0,0,0, 0.08);
+    opacity: 1;
+    background-color: rgba(255,255,255, 1) !important;
+    height: 162px;
+    &:hover {
+      transform: translate(0, 0px);
+      box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
+    }
+
+    @include respond-below(sm) {
+      box-shadow: 0 calculateRem(2px) calculateRem(7px) rgba(var(--rc-rgba-black), 0.16);
+    }
+
+    &__main-area {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: unset !important;
+    }
+
+    &__img {
+      height: calculateRem(72px);
+      width: calculateRem(72px);
+      overflow: hidden;
+      flex: 0 0 calculateRem(72px);
+      margin: calculateRem(8px);
+
+      .img-container {
+
+        display: flex;
+        align-items: center;
+        background-color: var(--cc-sbcard-img-container-bg);
+        height: calculateRem(72px);
+        width: calculateRem(72px);
+        justify-content: center;
+
+        img {
+          max-width: 100%;
+          // backdrop-filter: brightness(93%) opacity(85%) blur(3px) contrast(110%);
+        }
+      }
+    }
+
+    &__info {
+      @include padding(null, calculateRem(8px), null, null);
+      flex: 1;
+      overflow: hidden;
+    }
+
+    &__title {
+      opacity: 1;
+      font-weight: 700;
+      font-style: normal;
+      letter-spacing: 0px;
+      text-align: left;
+      color: rgba(0,0,0,0.8);
+      font-size: calculateRem(16px);
+      margin: 0px;
+      line-height: normal;
+      line-height: calculateRem(20px);
+      padding-bottom: calculateRem(12px);
+    }
+
+    &__meta1 {
+      color: rgba(0, 0, 0, 0.6);
+      background: white !important;
+      font-size: calculateRem(12px);
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      flex: 1;
+      line-height: calculateRem(20px);
+    }
+
+    .data_1 {
+      max-width: 100%;
+    }
+
+    .data_2 {
+      flex: 1;
+    }
+
+    .dot-divider {
+
+      width: calculateRem(4px);
+      height: calculateRem(4px);
+      min-width: calculateRem(4px);
+      max-width: calculateRem(4px);
+      min-height: calculateRem(4px);
+      max-height: calculateRem(4px);
+      border-radius: 100%;
+      background-color: var(--cc-sbcard-dot-divider);
+      display: inline-block;
+      margin: 0px calculateRem(8px);
+    }
+
+    &__moreinfo {
+
+      border-radius: 0 0 calculateRem(2px) calculateRem(2px);
+      background-color: var(--cc-sbcard-moreinfo-bg);
+      display: flex;
+      flex-direction: row;
+      align-items: stretch;
+      justify-content: space-between;
+      min-height: calculateRem(56px);
+      border-top: 0px solid var(--cc-sbcard-moreinfo-bordertop);
+    }
+
+    &__meta2 {
+
+      color: var(--cc-sbcard-meta2-text);
+      font-size: calculateRem(12px);
+      line-height: calculateRem(14px);
+      display: flex;
+      flex-direction: column;
+      flex-wrap: wrap;
+      justify-content: space-around;
+      padding: calculateRem(8px);
+    }
+
+    &__meta2_data {
+      .label {
+        font-weight: normal;
+      }
+
+      .value {
+        font-weight: bold;
+      }
+    }
+
+    &__org {
+
+      color: var(--cc-sbcard-org-text);
+    }
+
+    &__tags {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+      flex: 1;
+    }
+
+    &__badge {
+      display: flex;
+
+      img {
+        width: calculateRem(20px);
+        height: calculateRem(20px);
+      }
+    }
+
+    &__type {
+
+      background: var(--cc-sbcard-type-bg);
+      position: relative;
+      height: calculateRem(20px);
+      @include padding(null, calculateRem(8px), null, calculateRem(4px));
+      @include margin(null, null, null, calculateRem(16px));
+      color: var(--cc-sbcard-type-text);
+      font-size: calculateRem(11px);
+      display: flex;
+      align-items: center;
+
+      &:before {
+        content: "";
+        width: 0;
+        height: 0;
+        border-width: calculateRem(10px) calculateRem(5px);
+        border-style: solid;
+        border-color: var(--cc-sbcard-type-br) var(--cc-sbcard-type-br) var(--cc-sbcard-type-br) transparent;
+        position: absolute;
+        left: -10px;
+
+        html[dir="rtl"] & {
+          right: calculateRem(-10px);
+          left: inherit;
+          border-color: var(--cc-sbcard-type-br) transparent var(--cc-sbcard-type-br) var(--cc-sbcard-type-br);
+        }
+      }
+    }
+
+    /* recently viewed card css */
+    &--recently-viewed {
+      .sb--card__img {
+        height: calculateRem(88px);
+        width: calculateRem(88px);
+        flex: 0 0 calculateRem(88px);
+        margin: 0;
+
+        .img-container {
+
+          display: flex;
+          align-items: center;
+          background-color: var(--cc-sbcard-rv-img-container-bg);
+          height: calculateRem(88px);
+          width: calculateRem(88px);
+        }
+      }
+
+      .sb--card__info {
+        padding: calculateRem(8px);
+        flex: 1;
+      }
+    }
+
+    &.selected {
+      border: 1px solid var(--cc-sbcard-selected-border);
+      border-radius: 4px;
+      background-color:var(--cc-sbcard-selected-bg);
+    }
+
+    /* offline card css */
+    &.offline {
+      .sb--card__img {
+        .img-container {
+
+          display: flex;
+          align-items: center;
+          background-color: var(--cc-sbcard-offline-bg);
+          opacity: 0.5;
+
+          img {
+
+            margin: auto;
+            font-size: calculateRem(24px);
+            color: var(--cc-sbcard-offline-img-text);
+          }
+        }
+      }
+
+      .sb--card__info,
+      .sb--card__moreinfo {
+        opacity: 0.5;
+      }
+    }
+  }
+
+  .sb--card__progressbar {
+
+    height: calculateRem(4px);
+    margin: 0px 0 0px;
+    border-radius: 0px;
+    box-shadow: inset 0 calculateRem(-1px) calculateRem(1px) rgba(var(--rc-rgba-white), 0.3);
+    width: 100%;
+    background: var(--cc-sbcard-card__progressbar-bg);
+
+    &>span {
+
+      display: block;
+      height: 100%;
+      background-color: var(--cc-sbcard-card__progressbar-span-bg);
+      background-image: -webkit-gradient(center bottom, var(--secondary-400), var(--secondary-200));
+      box-shadow: inset 0 calculateRem(2px) calculateRem(9px) var(--gray-100),
+        inset 0 calculateRem(-2px) calculateRem(6px) rgba(var(--rc-rgba-black), 0.4);
+      position: relative;
+      overflow: hidden;
+    }
+  }
+
+  .animate>span:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-image: -webkit-gradient(linear,
+        0 0, 100% 100%, color-stop(0.25, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.25, transparent),
+        color-stop(0.5, transparent),
+        color-stop(0.5, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.75, rgba(var(--rc-rgba-white), 0.2)), color-stop(0.75, transparent), to(transparent));
+    z-index: 1;
+    background-size: calculateRem(50px) calculateRem(50px);
+    border-top-right-radius: calculateRem(8px);
+    border-bottom-right-radius: calculateRem(8px);
+    border-top-left-radius: calculateRem(20px);
+    border-bottom-left-radius: calculateRem(20px);
+    overflow: hidden;
+    -webkit-animation: move 2s linear infinite;
+  }
+
+  @-webkit-keyframes move {
+    0% {
+      background-position: 0 0;
+    }
+
+    100% {
+      background-position: calculateRem(50px) calculateRem(50px);
+    }
+  }
+
+  .completed>span {
+    background-color: var(--secondary-color);
+    background-image: -webkit-gradient(linear,
+        left top,
+        left bottom,
+        color-stop(0, var(--secondary-100)),
+        color-stop(1, var(--secondary-400)));
+    background-image: -webkit-linear-gradient(var(--secondary-100), var(--secondary-400));
+  }
+
+  .inprogress>span {
+    background-color: var(--tertiary-color);
+    background-image: -webkit-gradient(linear,
+        left top,
+        left bottom,
+        color-stop(0, var(--tertiary-100)),
+        color-stop(1, var(--tertiary-400)));
+    background-image: -webkit-linear-gradient(var(--tertiary-100), var(--tertiary-400));
+  }
+
+  .notcompleted>span {
+    background-color: var(--red-100);
+    background-image: -webkit-gradient(linear,
+        left top,
+        left bottom,
+        color-stop(0, var(--red-100)),
+        color-stop(1, var(--red-400)));
+    background-image: -webkit-linear-gradient(var(--red-100), var(--red-400));
+  }
+
+  .nostripes>span,
+  .nostripes>span:after {
+    -webkit-animation: none;
+    -moz-animation: none;
+    background-image: none;
+  }
+
+
+
+  .border-top-r-left-right {
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+  }
+}
+
+::ng-deep {
+
+  .card-hover {
+    opacity: 0;
+    transition: all 0.2s ease-in;
+    display: none;
+  }
+
+  .sb--card:hover, .sb--card:focus-within {
+    .card-hover {
+      opacity: 1;
+      z-index: 1001;
+      display: block;
+
+      .child-content {
+        --cc-sbcard-hover-text: var(--white);
+        --cc-sbcard-hover-bg: var(--primary-color);
+        color: var(--cc-sbcard-hover-text);
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        opacity: 0.95;
+        border-radius: calculateRem(2px);
+        background-color: var(--cc-sbcard-hover-bg);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        transition: 0.2s ease-in;
+        flex-direction: column;
+        justify-content: space-evenly;
+      }
+
+      .action-container {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-self: center;
+        justify-self: center;
+        flex: 1;
+        align-items: center;
+      }
+
+      .action-item {
+        padding: 0 calculateRem(16px);
+        flex: 1;
+        text-align: center;
+
+        .sb-btn.sb-btn-primary[disabled] {
+          background-color: transparent;
+          opacity: 0.5;
+          border: 0;
+          color: var(--white);
+        }
+      }
+
+      .action-item:not(:last-child) {
+        border-right: calculateRem(1px) solid rgba(var(--rc-rgba-white), 0.5);
+      }
+
+      .hover-meta-info {
+        font-size: calculateRem(10px);
+        opacity: 0.8;
+        color: var(--white);
+        line-height: calculateRem(12px);
+        flex: 0 0 25%;
+      }
+    }
+  }
+
+}
+
+
+.menu::after {
+  content: '\2807';
+  font-size: calculateRem(24px);
+  color: var(--gray-200);
+  text-align: center;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  border-radius: 50%;
+  padding-left: calculateRem(6px);
+  cursor: pointer;
+  width: calculateRem(32px);
+  height: calculateRem(32px);
+}
+
+.menu:hover::after {
+  background: var(--gray-0);
+}
+.sb-card-label{
+    color: var(--primary-theme);
+    font-size: 0.6875rem;
+    border: 0.0625rem solid var(--primary-theme);
+    border-radius: 0.125rem;
+    padding: 0.25rem 0.5rem;
+    height: 1.5rem;
+    text-transform: uppercase;
+    width: fit-content;
+}
\ No newline at end of file

projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LibraryCardV5Component } from './library-card-v5.component';
+
+describe('LibraryCardV5Component', () => {
+  let component: LibraryCardV5Component;
+  let fixture: ComponentFixture<LibraryCardV5Component>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LibraryCardV5Component ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LibraryCardV5Component);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/common-consumption/src/lib/card/library-card-v5/library-card-v5.component.ts

+import { IContent, LibraryCardTypes, ICardClick, IEnterKeyPress } from './../models';
+import { Component, Input, OnInit, EventEmitter, Output, TemplateRef, AfterViewInit } from '@angular/core';
+import { staticContent } from '../library-card/library-card.data';
+
+@Component({
+  selector: 'sb-library-card-v5',
+  templateUrl: './library-card-v5.component.html',
+  styleUrls: ['./library-card-v5.component.scss']
+})
+export class LibraryCardV5Component implements OnInit {
+
+  @Input() content: IContent|any = staticContent;
+    @Input() isMobile = false;
+    @Input() isOffline = false;
+    @Input() cardImg = '';
+    @Input() type: LibraryCardTypes = LibraryCardTypes.DESKTOP_TEXTBOOK;
+    @Input() moreInfoLabel = 'Medium';
+    @Input() section = '';
+    @Input() isLoading:boolean;
+    @Input('hover-template') gridTemplate: TemplateRef<any>;
+    @Input() btnlabel = '';
+    @Input() btnicon = '';
+    @Input() isMenu: boolean = false;
+    @Input() layoutConfig:any;
+    @Input() indexToDisplay:number;
+    @Input() isSelected = false;
+
+    @Output() cardClick: EventEmitter<ICardClick> = new EventEmitter();
+    @Output() menuClick: EventEmitter<ICardClick> = new EventEmitter();
+    @Output() enterKey: EventEmitter<IEnterKeyPress> = new EventEmitter();
+
+    get LibraryCardTypes() { return LibraryCardTypes; }
+
+    ngOnInit() {
+    }
+
+    ngAfterViewInit(): void {
+    }
+
+    onClick(event: MouseEvent) {
+        this.cardClick.emit({ event: event, data: this.content });
+    }
+    onMenuClick(event: MouseEvent) {
+        this.menuClick.emit({ event: event, data: this.content });
+    }
+    onEnterKeyPress(event: KeyboardEvent) {
+        this.enterKey.emit({ event, data: this.content });
+    }
+
+    test() {
+
+    }
+
+}

projects/common-consumption/src/lib/card/library-card/library-card.component.html

@@ -3,13 +3,15 @@
 <div class="sb--card"
   [ngClass]="{'sb--card--recently-viewed': type === LibraryCardTypes.RECENTLY_VIEWED, 'offline': isOffline, 'selected': isSelected}"
   (click)="onClick($event)" (keydown.enter)="onEnterKeyPress($event)" *ngIf="!isLoading" tabindex="0" role="button">
+  <!-- <div class="sb-card-label">{{content?.resourceType}}</div> -->
   <div class="sb--card__main-area">
     <!-- card img -->
-    <div class="sb--card__img">
+    <!-- <div class="sb--card__img">
       <div class="img-container">
         <img [src]="cardImg" alt="">
       </div>
-    </div>
+    </div> -->
+    
     <!-- card mobile view details -->
     <div class="sb--card__info">
         <div class="sb--card__meta1">
@@ -17,28 +19,30 @@
           <a *ngIf="isMenu" role="button" aria-label="View more actions menu" class="menu" (click)="onMenuClick($event);$event.stopPropagation()" tabindex="0"></a>
         </div>
       
-      <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length || content?.gradeLevel?.length">
-        <span class="data_1 ellipsis" title="{{content?.subject}}">{{content?.subject}}</span>
-        <span *ngIf="content?.subject?.length && content?.gradeLevel?.length" class="dot-divider"></span>
-        <span class="data_2 ellipsis" title="{{content?.gradeLevel}}">{{content?.gradeLevel}}</span>
+      <div class="sb--card__meta1 text-left mb-4" *ngIf="content?.se_mediums?.length">
+        <span class="data_2 ellipsis" title="{{content?.se_mediums}}">Role: {{content?.se_mediums}}</span>
+      </div>
+      <div class="sb--card__meta1 text-left" *ngIf="content?.subject?.length">
+        <span class="data_1 ellipsis" title="{{content?.subject}}">Competency: {{content?.subject}}</span>
       </div>
+      
     </div>
   </div>
 
   <!-- content for only desktop -->
-  <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
-    <div class="sb--card__moreinfo">
+  <!-- <div *ngIf="type === LibraryCardTypes.DESKTOP_TEXTBOOK || type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
+    <div class="sb--card__moreinfo"> -->
       <!-- other meta info Medium, Organization etc -->
-      <div class="sb--card__meta2 text-left">
+      <!-- <div class="sb--card__meta2 text-left">
         <div class="sb--card__meta2_data" *ngIf="content?.medium"><span class="">{{moreInfoLabel}}:
             {{content?.medium}}</span></div>
         <div class="sb--card__org sb__ellipsis" *ngIf="content?.organisation"><bdi>{{content?.organisation}}</bdi></div>
-      </div>
+      </div> -->
       <!-- other meta info Badge and card category Book, learn, practice -->
-      <div class="sb--card__tags">
-        <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
-            [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
-        <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
+      <!-- <div class="sb--card__tags">
+      <span class="sb--card__badge" *ngIf="content?.badgeAssertions"><img
+          [src]="content?.badgeAssertions[0]?.badgeClassImage" alt="" title="" /></span>
+      <span class="sb--card__type" *ngIf="content?.resourceType">{{content?.resourceType}}</span>
       </div>
     </div>
     <div *ngIf="type === LibraryCardTypes.PORTAL_QRCODE_FLATRESULT">
@@ -51,7 +55,7 @@
             </i> {{btnlabel}} </button>
         </div>
     </div>
-  </div>
+  </div> -->
 
   <!-- Qr code card -->
   <div *ngIf="type === LibraryCardTypes.QRCODE_RESULT">
@@ -134,4 +138,12 @@
       (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
       ></sb-library-card-v4>
     </ng-container>
+    <ng-container *ngIf="layoutConfig.layout === 'v5'">
+      <sb-library-card-v5 [indexToDisplay]="indexToDisplay" [isLoading]="isLoading" [content]="content" [isMobile]="isMobile"
+      [isOffline]="isOffline" [cardImg]="cardImg" [type]="type" [moreInfoLabel]="moreInfoLabel" [isSelected]="isSelected"
+      [section]="section" [btnlabel]="btnlabel" [btnicon]="btnicon"
+      [layoutConfig]="layoutConfig" [isMenu]="isMenu" (cardClick)="onClick($event)" (enterKeyPress)="onEnterKeyPress($event)"
+      (menuClick)="onMenuClick($event);$event.stopPropagation()" [hover-template]="gridTemplate"
+      ></sb-library-card-v5>
+    </ng-container>
 </span>
\ No newline at end of file

projects/common-consumption/src/lib/card/library-card/library-card.component.scss

@@ -35,8 +35,13 @@
     margin-top: 0px;
     border: 0px;
     contain: content;
-    border-radius: calculateRem(2px);
-
+    border-radius: calculateRem(2px) !important;
+    padding: 24px 16px;
+    border: 1px solid rgba(0,0,0, 0.1) !important;
+    box-shadow: 0px 2px 4px rgba(0,0,0, 0.08);
+    opacity: 1;
+    background-color: rgba(255,255,255, 1) !important;
+    height: 126px;
     &:hover {
       transform: translate(0, 0px);
       box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
@@ -50,7 +55,7 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      height: calculateRem(88px);
+      height: unset !important;
     }
 
     &__img {
@@ -83,24 +88,28 @@
     }
 
     &__title {
-
-      color: var(--cc-sbcard-title);
-      font-size: calculateRem(14px);
+      opacity: 1;
+      font-weight: 700;
+      font-style: normal;
+      letter-spacing: 0px;
+      text-align: left;
+      color: rgba(0,0,0,0.8);
+      font-size: calculateRem(16px);
       margin: 0px;
       line-height: normal;
       line-height: calculateRem(20px);
+      padding-bottom: calculateRem(12px);
     }
 
     &__meta1 {
-
-      color: var(--cc-sbcard-meta-text);
+      color: rgba(0, 0, 0, 0.6);
+      background: white !important;
       font-size: calculateRem(12px);
       display: flex;
       flex-direction: row;
       align-items: center;
       flex: 1;
       line-height: calculateRem(20px);
-      margin-top: calculateRem(4px);
     }
 
     .data_1 {
@@ -457,3 +466,13 @@
 .menu:hover::after {
   background: var(--gray-0);
 }
+.sb-card-label{
+    color: var(--primary-theme);
+    font-size: 0.6875rem;
+    border: 0.0625rem solid var(--primary-theme);
+    border-radius: 0.125rem;
+    padding: 0.25rem 0.5rem;
+    height: 1.5rem;
+    text-transform: uppercase;
+    width: fit-content;
+}
\ No newline at end of file

projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.html

 <div class="layout-library" *ngIf="!isLoading">
     <div class="header">
         <div class="title" role="heading" aria-level="2">
-            <i class="icon-svg icon-svg--sm">
+            <!-- <i class="icon-svg icon-svg--sm">
                 <svg class="icon">
                     <use xlink:href="assets/common-consumption/images/sprite.svg#book"></use>
                 </svg>
-            </i>
+            </i> -->
             {{title}}
             <span class="badge">{{contentList?.length}}</span>
         </div>

projects/common-consumption/src/lib/layout/library-cards-grid/library-cards-grid.component.scss

@@ -21,6 +21,7 @@
     @include margin(1.5rem 0 1rem 0);
     padding: 0px 0;
     align-items: center;
+    // background-color: darkgoldenrod;
 
     .title {
       font-family: inherit;
@@ -168,3 +169,17 @@
   margin-top: -1.5rem;
  }
 }
+.sb-btn-white{
+  opacity: 1 !important;
+  color: rgba(236,73,51,1) !important;
+  /* font-family: "NotoSans-Bold"; */
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  font-style: normal !important;
+  letter-spacing: 0.29px !important;
+  text-align: left !important;
+  text-decoration: underline !important;
+  border: none !important;
+  background-color: transparent !important;
+  box-shadow: unset !important;
+}

projects/common-consumption/src/lib/pills-grid/pill-item/pill-item.component.scss

@@ -18,7 +18,7 @@
         font-size: calc(16px * 1.5);
         .item {
           label {
-            font-size: 1rem !important;
+            font-size: 0.75rem !important;
           }
         }
       }
@@ -26,7 +26,7 @@
         font-size: calc(16px * 1.75);
         .item {
           label {
-            font-size: 1rem !important;
+            font-size: 0.75rem !important;
           }
         }
       }
@@ -90,7 +90,7 @@
       .item {
         border-radius: 1em;
         span.img {
-          border-radius: 0.5em;
+          border-radius: 2px;
         }
       }
     }
@@ -148,22 +148,29 @@
       flex-wrap: wrap;
       .item {
         height: 3em;
-        border: 0px;
         display: flex;
         align-items: center;
         justify-content: flex-start;
         padding: 0.5em;
         flex: none;
         box-sizing: border-box;
+        border-radius: 2px !important;
+        border: 1px solid rgba(0,0,0, 0.2) !important;
+        width: 23%;
+        @media screen and (max-width: 768px){
+          width: 100%;
+        }
         .img {
-          width: 2em;
-          height: 2em;
+          width: 40px;
+          height: 40px;
           background: var(--cc-pills-grid-item-img-bg);
           display: flex;
           align-items: center;
           justify-content: center;
           margin-right: 0.5em;
           padding: 0.325em;
+          border-radius: 2px;
+          opacity: 1;
           img {
             margin: 0 0 0 0;
             width: 100%;
@@ -174,6 +181,12 @@
           margin-bottom: 0px;
           flex: 1;
           font-size: 0.875em;
+          opacity: 1;
+          color: rgba(0,0,0,1);
+          font-weight: 700;
+          font-style: normal;
+          letter-spacing: 0px;
+          text-align: left;
         }
       }
       &.hscroll {

projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.html

-<div class="header" *ngIf="platform === 'portal' && pillItems?.length > 0">
+<div class="header p-0" *ngIf="platform === 'portal' && pillItems?.length > 0">
   <div class="title">{{title}}</div>
   <div *ngIf="minDisplayCount && (pillItems?.length > minDisplayCount)">
     <button class="sb-btn sb-btn-normal font-weight-bold sb-btn-outline-primary sb-btn-white" *ngIf="showMoreViewType===ShowMoreViewType.EXPAND && viewCount < pillItems?.length"

projects/common-consumption/src/lib/pills-grid/pills-grid/pills-grid.component.scss

@@ -29,7 +29,6 @@
   align-items: center;
   margin: 1.5rem 0 1rem;
   padding-left: 1rem;
-
   .title {
     font-family: inherit;
     text-overflow: ellipsis;
@@ -44,4 +43,18 @@
     display: flex;
     align-items: center;
   }
+}
+.sb-btn-white{
+  opacity: 1 !important;
+  color: rgba(236,73,51,1) !important;
+  /* font-family: "NotoSans-Bold"; */
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  font-style: normal !important;
+  letter-spacing: 0.29px !important;
+  text-align: left !important;
+  text-decoration: underline !important;
+  border: none !important;
+  background-color: transparent !important;
+  box-shadow: unset !important;
 }
\ No newline at end of file