<h5 class="mb-4">{{ 'cards.image-card-list' | translate }}</h5>

<div class="row mb-2">
  <div class="col-md-12 mb-4">
    <div class="card d-flex flex-row">
      <a class="d-flex" routerLink="./">
        <img alt="Thumbnail" src="/assets/img/thumb-1.jpg" class="list-thumbnail responsive border-0 card-img-left" />
      </a>
      <div class="pl-2 d-flex flex-grow-1 min-width-zero">
        <div
          class="card-body align-self-center d-flex flex-column flex-lg-row justify-content-between min-width-zero align-items-lg-center">
          <a routerLink="./" class="w-40 w-sm-100">
            <p class="list-item-heading mb-1 truncate">{{'cards.cake-text-1' | translate}}</p>
          </a>
          <p class="mb-1 text-muted text-small w-15 w-sm-100">{{'cards.cake-text-4' | translate}}</p>
          <p class="mb-1 text-muted text-small w-15 w-sm-100">09.04.2018</p>
          <div class="w-15 w-sm-100">
            <span class="badge badge-pill badge-secondary">{{'cards.badge-3' | translate}}</span>
          </div>
        </div>
        <div class="custom-control custom-checkbox pl-1 align-self-center pr-4">
          <label class="custom-control custom-checkbox mb-0">
            <input type="checkbox" class="custom-control-input">
            <span class="custom-control-label"></span>
          </label>
        </div>
      </div>
    </div>
  </div>
</div>
