SFM-Broker/src/app/people-card/people-card.component.html

<div class="outer-div">
  <div class="inner-div">
    <div class="front">
      <div class="front__bkg-photo"  [ngStyle]="{'background-image': bgPhoto() }"></div>
      <div class="front__face-photo" [ngStyle]="{'background-image': photoURL() }">
      </div>
      <div class="front__text">
        <h3 class="front__text-header">{{contact.Display}} </h3>
        <p class="front__text-para"><i class="fas fa-map-marker-alt front-icons"></i>{{UserExtra.Role}}
          <kendo-icon *ngIf="!contact.Enabled" [name]="'close-circle'" [themeColor]="'error'" class="k-badge-icon"></kendo-icon>
          <kendo-icon *ngIf="contact.Enabled" [name]="'check-circle'" [themeColor]="'success'" class="k-badge-icon"></kendo-icon>
        </p>
      </div>
    </div>
    <div class="back">
      <div class="social-media-wrapper">
        <button kendoButton (click)="onButtonClick()" look="outline" icon="edit">Edit</button>
        <button #enabled *ngIf="contact.Id.length > 10" kendoButton (selectedChange)="onSelectedChange($event)" look="outline" icon="tick"
                [toggleable]="true" [selected]="contact.Enabled"
        >Enable</button>
      </div>
    </div>
  </div>
</div>