smsb-web-develop/src/views/dashboard/v0/Cards.vue

<template>
  <div class="c-dashoboard-cards--v0">
    <div
      v-for="(item, index) in items"
      :key="index"
      class="c-dashoboard-cards--v0__item has-padding"
      :style="item.style"
    >
      <div class="l-flex--row c-dashoboard-cards--v0__header">
        <svg-icon
          class="c-dashoboard-cards--v0__icon"
          :icon-class="item.icon"
        />
        {{ item.label }}
      </div>
      <div class="c-dashoboard-cards--v0__value u-bold u-ellipsis u-text--center">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Cards',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

<style lang="scss" scoped>
.c-dashoboard-cards--v0 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: $spacing $spacing;

  &__item {
    min-width: 0;
    height: 96px;
    background-color: rgba(#060920, 0.3);
  }

  &__header {
    margin-bottom: 10px;
    height: 14px;
    font-size: 14px;
    line-height: 1;
  }

  &__icon {
    margin: 0 8px 2px 0;
    font-size: 18px;
  }

  &__value {
    max-width: 100%;
    font-size: 40px;
  }
}
</style>