Card (卡片)

<template>
  <KunCard class-name="max-w-sm">
    <h3 class="font-semibold">Card title</h3>
    <p class="text-default-600 mt-1 text-sm">
      A simple container with a border and padding.
    </p>
  </KunCard>
</template>

<template>
  <KunCard color="primary" class-name="w-32">primary</KunCard>
  <KunCard color="success" class-name="w-32">success</KunCard>
  <KunCard color="warning" class-name="w-32">warning</KunCard>
  <KunCard color="danger" class-name="w-32">danger</KunCard>
</template>

<template>
  <!-- With an `href`, the card becomes a link (NuxtLink under the layer). -->
  <KunCard is-hoverable clickable href="/components/button" class-name="max-w-sm">
    <h3 class="font-semibold">Hoverable + link →</h3>
    <p class="text-default-600 mt-1 text-sm">Hover me, then click to navigate.</p>
  </KunCard>
</template>