<ng-container *ngIf="_lineItem && _lineItem[identifier]">
  <div class="card">
    <div class="card-body readonly p-3">
      <div class="card-title d-flex justify-content-between align-items-start">
        <p class="m-0 card-title font-weight-bold text-break" tooltip="{{_product?.Name}}" container="body"
          placement="top">{{_product?.Name | truncate:30}}</p>
        <button type="button" class="btn btn-link p-0 close" aria-label="Close" (click)="removeCartItem()"
          *ngIf="selected$ | async">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <a href="javascript:void(0)" [routerLink]="['/products', _product[identifier], _lineItem[identifier]]"
        [state]="_product">
        <div class="img-container">
          <img class="card-img-top w-auto m-auto d-flex align-self-center" [src]="_product.IconId | image"
            [alt]="_product.Name" *ngIf="thumbnail">
        </div>

        <span class="card-text font-weight-bold d-flex flex-column justify-content-between mt-2" *ngIf="showPrice">
          <span>{{'COMMON.NET_PRICE' | translate}}</span>
          <span> {{_lineItem?.NetPrice | localCurrency | async}} </span>  
        </span>
      </a>
    </div>
  </div>
</ng-container>

./lineitem-card.component.scss

apt-lineitem-card {
  :host {
    display: block;
    width: 100%; // Added to fix IE 11 issue
  }
  a {
    text-decoration: none;
    color: inherit;
  }

  .card .card-body {
    .card-title {
      p {
        height: 3rem;
      }
    }
    img {
      max-height: 8rem;
      max-width: 100%;
    }
    .img-container {
      height: 8rem;
    }
    &.readonly {
      img {
        max-height: 6rem;
        max-width: 75%;
      }
      .img-container {
        height: 6rem;
      }
      .card-text {
        > span {
          font-size: 0.65rem;
        }
      }
    }
  }

  .split-items > * {
    border-radius: 0;
    border-right: 1px solid #000;
    padding-right: 7px;
    margin-right: 7px;
    padding-bottom: 0;
    line-height: 15px;
    &:last-child {
      border-right: none;
    }
  }

  button.btn.close {
    margin-top: -5px;
    line-height: 0.9;
    font-size: 1.3rem;
  }
  .btn.btn-primary.dropdown-toggle.dropdown-toggle-split {
    height: 31px;
    padding-top: 3px;
  }

  .list-purchasedbucket {
    font-size: 1rem;
    font-weight: 400;
    position: absolute;
    padding-top: 3px;

    .fa {
      padding-left: 5px;
    }
  }

  label {
    &::before,
    &::after {
      top: 0.15rem;
    }
    .icons {
      white-space: nowrap;
      i {
        font-size: smaller;
        margin-left: 5px;
      }
    }
  }
}