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

    <div class="row icon-cards-row mb-2">
      <div class="col-md-3 col-lg-2 col-sm-4 col-6 mb-4">
        <a routerLink="./" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-clock"></i>
            <p class="card-text font-weight-semibold mb-0">{{ 'dashboards.pending-orders' | translate }}</p>
            <p class="lead text-center">16</p>
          </div>
        </a>
      </div>

      <div class="col-md-3 col-lg-2 col-sm-4 col-6 mb-4">
        <a routerLink="./" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-basket-coins"></i>
            <p class="card-text font-weight-semibold mb-0">{{ 'dashboards.completed-orders' | translate }}</p>
            <p class="lead text-center">32</p>
          </div>
        </a>
      </div>

      <div class="col-md-3 col-lg-2 col-sm-4 col-6 mb-4">
        <a routerLink="./" class="card">
          <div class="card-body text-center">
            <i class="iconsminds-arrow-refresh"></i>
            <p class="card-text font-weight-semibold mb-0">{{ 'dashboards.refund-requests' | translate }}</p>
            <p class="lead text-center">4</p>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>