<div class="row">
  <div class="col-12">
    <h5 class="mb-4">{{ 'cards.image-card' | translate }}</h5>

    <div class="row mb-2">
      <div class="col-xs-6 col-lg-3 col-12 mb-4">
        <div class="card">
          <div class="position-relative">
            <img class="card-img-top" src="/assets/img/card-thumb-1.jpg" alt="Card image cap">
            <span class="badge badge-pill badge-theme-1 position-absolute badge-top-left">{{'cards.badge-1' | translate}}</span>
            <span class="badge badge-pill badge-secondary position-absolute badge-top-left-2">{{'cards.badge-2' | translate}}</span>
          </div>
          <div class="card-body">
            <a routerLink="./">
              <p class="list-item-heading mb-4">{{'cards.cake-text-2' | translate}}</p>
            </a>
            <footer>
              <p class="text-muted text-small mb-0 font-weight-light">09.04.2020</p>
            </footer>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-lg-3 col-12 mb-4">
        <div class="card">
          <div class="card-body">
            <a routerLink="./">
              <p class="list-item-heading mb-4">{{'cards.cake-text-2' | translate}}</p>
            </a>
            <footer>
              <p class="text-muted text-small mb-0 font-weight-light">09.04.2020</p>
            </footer>
          </div>
          <div class="position-relative">
            <img class="card-img-bottom" src="/assets/img/card-thumb-1.jpg" alt="Card image cap">
            <span class="badge badge-pill badge-theme-1 position-absolute badge-top-left">{{'cards.badge-1' | translate}}</span>
            <span class="badge badge-pill badge-secondary position-absolute badge-top-left-2">{{'cards.badge-2' | translate}}</span>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
