Card

<script setup lang="ts">
const colors = ['primary', 'success', 'warning', 'error'] as const
</script>

<template>
  <div class="w-full grid sm:grid-cols-2 gap-3">
    <ZCard>
      <p class="font-semibold">No color</p>
      <p class="text-sm text-muted">A plain Nuxt UI card.</p>
    </ZCard>
    <ZCard v-for="c in colors" :key="c" :color="c">
      <p class="font-semibold capitalize">{{ c }}</p>
      <p class="text-sm text-muted">A card with the {{ c }} edge.</p>
    </ZCard>
  </div>
</template>

<template>
  <ZCard color="primary" class="w-full max-w-sm">
    <template #header><h3 class="font-semibold">Rotate the signing key</h3></template>
    <p class="text-sm text-muted">The edge runs the full height: header, body and footer.</p>
    <template #footer>
      <div class="flex justify-end gap-2">
        <UButton color="neutral" variant="ghost" size="sm">Later</UButton>
        <UButton size="sm">Rotate</UButton>
      </div>
    </template>
  </ZCard>
</template>

<template>
  <section data-accent="violet" class="w-full rounded-md bg-(--accent-soft) p-4 flex flex-col gap-3">
    <p class="text-sm font-semibold text-(--accent-strong)">Billing</p>
    <ZCard color="accent">
      <p class="text-sm">This card's edge is the section's accent.</p>
    </ZCard>
  </section>
</template>

<style>
/* The product supplies each hue's stops; here, Tailwind's violet. */
[data-accent='violet'] {
  --a-50: var(--color-violet-50); --a-100: var(--color-violet-100); --a-200: var(--color-violet-200);
  --a-400: var(--color-violet-400); --a-500: var(--color-violet-500); --a-600: var(--color-violet-600);
  --a-800: var(--color-violet-800); --a-950: var(--color-violet-950);
}
</style>