Card

<Card variant="quiet">
  <p class="text-text-secondary text-sm">Quiet – subtle tint, default</p>
</Card>
<Card variant="outlined">
  <p class="text-text-secondary text-sm">Outlined – border only</p>
</Card>
<Card variant="elevated">
  <p class="text-text-secondary text-sm">Elevated – shadow only</p>
</Card>
<Card variant="floating">
  <p class="text-text-secondary text-sm">Floating – popover surface</p>
</Card>

<Card padding="md">
  <p class="text-text-tertiary text-xs font-medium tracking-wider uppercase">
    Monthly Revenue
  </p>
  <p class="text-text-primary mt-2 text-3xl font-bold">$48,210</p>
  <div class="mt-2 flex items-center gap-2">
    <Badge size="xs" intent="success">+12.4%</Badge>
    <span class="text-text-tertiary text-xs">vs. last month</span>
  </div>
</Card>

<Card variant="outlined" dividers>
  {#snippet header()}
    <div class="flex items-center gap-2">
      <span class="font-semibold">Project Update</span>
      <Badge size="xs" intent="success">New</Badge>
    </div>
  {/snippet}

  <p class="text-text-secondary text-sm">
    The latest build passed all 142 tests. Deployment is scheduled for Monday.
  </p>

  {#snippet footer()}
    <div class="flex justify-end gap-2">
      <Button variant="ghost" size="sm">Dismiss</Button>
      <Button variant="filled" intent="primary" size="sm">View Details</Button>
    </div>
  {/snippet}
</Card>

<Card href="#documentation" mint="scale">
  <div class="flex items-start gap-3">
    <div
      class="bg-primary/10 text-primary rounded-modify flex h-10 w-10 shrink-0 items-center justify-center font-semibold"
    >
      →
    </div>
    <div>
      <p class="text-text-primary font-semibold">Read the documentation</p>
      <p class="text-text-secondary mt-1 text-sm">
        Browse component APIs, design tokens, and integration guides.
      </p>
    </div>
  </div>
</Card>

<Card
  slotClasses={{
    base: 'bg-linear-to-br from-violet-600 to-indigo-700 text-white border-none shadow-xl shadow-violet-500/25'
  }}
  padding="lg"
>
  <div class="space-y-3">
    <Badge
      unstyled
      class="rounded-full bg-white/20 px-3 py-1 text-xs font-medium text-white backdrop-blur-sm"
    >
      Pro Feature
    </Badge>
    <h3 class="text-xl font-bold">Advanced Analytics</h3>
    <p class="text-sm text-white/80">
      Real-time dashboards, custom reports, and AI-powered insights for your team.
    </p>
    <Button
      unstyled
      class="mt-2 rounded-lg bg-white px-4 py-2 text-sm font-semibold text-violet-700 transition-all hover:bg-white/90"
    >
      Get Started
    </Button>
  </div>
</Card>

<Card
  unstyled
  class="w-72 rounded-2xl border border-white/20 bg-white/10 p-6 text-white shadow-2xl backdrop-blur-xl"
>
  <p class="text-sm font-medium tracking-wider text-white/70 uppercase">Premium</p>
  <p class="mt-2 text-4xl font-bold">
    $29<span class="text-lg font-normal text-white/60">/mo</span>
  </p>
  <ul class="mt-4 space-y-2 text-sm text-white/80">
    {#each ['Unlimited projects', 'Priority support', 'Custom integrations'] as perk (perk)}
      <li class="flex items-center gap-2"><CheckIcon size={16} /> {perk}</li>
    {/each}
  </ul>
  <Button
    unstyled
    class="mt-6 w-full rounded-xl bg-white py-2.5 text-center text-sm font-semibold text-fuchsia-600 transition-all hover:bg-white/90"
  >
    Subscribe
  </Button>
</Card>

<Card
  unstyled
  class="rounded-2xl border border-neutral-800 bg-neutral-900 p-6 shadow-[var(--blocks-shadow-lg)]"
>
  <div class="flex items-start gap-4">
    <div
      class="bg-primary/20 text-primary flex h-10 w-10 shrink-0 items-center justify-center rounded-xl"
    >
      <ZapIcon size={20} />
    </div>
    <div>
      <h4 class="font-semibold text-neutral-100">Lightning Fast</h4>
      <p class="mt-1 text-sm text-neutral-400">
        Zero-config bundling with sub-second hot reload and tree-shaking built in.
      </p>
    </div>
  </div>
</Card>