web/docs/components/card/item.vue

<template>
  <a class="card-item" :href="href" :target="target" rel="noopener noreferrer">
    <div class="icon-group" :class="{ 'has-fill': !icon }">
      <img v-if="icon" :src="withBase(icon)" :alt="title">
      <span v-else>{{fill}}</span>
    </div>
    <div class="info-group">
      <strong>{{title}}</strong>
      <br>
      <p>{{desc}}</p>
    </div>
  </a>
</template>

<script setup>
import { withBase } from 'vitepress';
defineProps({
  href: {
    type: String,
    default: '#'
  },
  target: {
    type: String,
    default: '_blank'
  },
  icon: {
    type: String,
    default: ''
  },
  fill: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  }
})
</script>

<style scoped lang="scss">
.card-item {
  color: var(--vp-c-indigo);
  margin: 4px;
  cursor: pointer;
  width: 16em;
  height: 120px;
  vertical-align: middle;
  overflow: hidden;
  display: inline-flex;
  flex-direction: row;
  border-radius: 8px;
  box-shadow: 0 8px 16px -4px #2c2d300c;
  background: var(--vp-c-indigo-lighter);
  padding: 8px 12px 8px 8px;

  &:hover {
    background: var(--vp-c-indigo-light);
    .icon-group {
      width: 0;
      opacity: 0;
    }
    .info-group {
      color: var(--vp-c-gray-dark-1);
    }
  }

  .info-group {
    strong {
      font-size: 20px;
    }
    p {
      opacity: 0.66;
    }
  }

  .icon-group {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    transition: all 0.3s;
    margin-right: 12px;
    &.has-fill {
      background: rgba(41, 190, 209, 0.22);
      border: 1px solid rgb(225, 225, 225);
      border-radius: 12px;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      width: 40px;
      object-fit: contain;
    }
  }
}
</style>