<ion-card class="project-box">
  <ion-card-content>
    <div class="custom-filed">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_OBJECTIVE' | translate}} : </ion-label>
      {{data?.description}}
    </div>
    <div class="custom-filed" *ngIf="categories?.length">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_CATEGORIES' | translate}} : </ion-label>
      {{categories}}
    </div>
    <div class="custom-filed" *ngIf="data?.recommendedFor && data?.recommendedFor?.length">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_RECOMMENDED_FOR' | translate}} : </ion-label>
      <span *ngFor="let recommend of data?.recommendedFor; let last = last"> {{recommend.code}}<span *ngIf="!last">,</span> </span>
    </div>
    <div class="custom-filed" *ngIf="data?.startDate">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_START_DATE' | translate}} : </ion-label>
      {{data?.startDate | date : 'dd/MM/yyyy' }}
    </div>
    <div class="custom-filed" *ngIf="data?.endDate">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_END_DATE' | translate}} : </ion-label>
      {{data?.endDate | date : 'dd/MM/yyyy' }}
    </div>
    <div class="custom-filed" *ngIf="data?.duration">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_DURATION' | translate}} : </ion-label>
      {{data?.duration?.label || data?.duration }}
    </div>
    
  </ion-card-content>
</ion-card>

./project-details-card.component.scss

@import "src/assets/styles/_variables.scss";
.project-box {
  margin: 15px 0px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 6px 6px 0px,
    rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
  .custom-filed {
    margin: 10px 0px;

    ion-label {
      font-weight: 600;
      color: #{$black-color};
    }

    ion-icon {
      float: right;
      font-size: 1.5rem;
      margin-top: -5px;
    }

    ion-col {
      padding: 0px;
    }
  }
}

ion-card {
  background-color: map-get($colors, white);
}