SFM-Broker/src/app/loan-edit/hint-card/hint-card.component.html

<kendo-card [width]="'360px'">
  <kendo-card-header class="k-hbox">
    <kendo-avatar
      width="40px"
      height="40px"
      [imageSrc]="thumbnailSrc"
      [shape]="'circle'"
    ></kendo-avatar>
    <div>
      <h1 kendoCardTitle>bg_tourism</h1>
      <p kendoCardSubtitle>Bulgaria, Europe</p>
    </div>
  </kendo-card-header>
  <img [src]="cover" kendoCardMedia alt="cover_img" />
  <kendo-card-body>
    <h4>Black Sea, Bulgaria</h4>
    <hr kendoCardSeparator />
    <p>
      The Black Sea is bordered by Ukraine, Romania, Bulgaria,
      Turkey, Georgia, and Russia. It has a positive water
      balance; that is, a net outflow of water 300 km3 per year
      through the Bosphorus and the Dardanelles into the Aegean
      Sea.
    </p>
  </kendo-card-body>
  <kendo-card-actions orientation="horizontal" layout="stretched">
    <button class="k-button k-flat" (click)="toggleLike()">
      <span [ngClass]="heartIcon()"></span>
      Like
    </button>
    <hr kendoCardSeparator [orientation]="'vertical'" />
    <button class="k-button k-flat">
      Share
    </button>
    <hr kendoCardSeparator [orientation]="'vertical'" />
    <button class="k-button k-flat">
      Read More
    </button>
  </kendo-card-actions>
  <kendo-card-footer class="k-hbox">
    <span>Created By @alex</span>
    <span>March 4, 2020</span>
  </kendo-card-footer>
</kendo-card>