Card

import {
  BuiCard, BuiCardHeader, BuiCardTitle, BuiCardDescription, BuiCardContent, BuiCardFooter,
} from 'ng-blatui';

<div buiCard variant="sectioned">
  <div buiCardHeader>
    <h3 buiCardTitle>Create project</h3>
    <p buiCardDescription>Deploy your new project in one click.</p>
  </div>
  <div buiCardContent>…form…</div>
  <div buiCardFooter class="flex-col gap-2">
    <button buiButton class="w-full">Deploy</button>
  </div>
</div>

<!-- the base card is just p-6 + a rounded border -->
<div buiCard class="max-w-sm"><p class="text-sm">Compose freely inside it.</p></div>

<div buiCard variant="sectioned">
  <div buiCardHeader>
    <div class="flex items-start justify-between">
      <p buiCardDescription>Total Revenue</p>
      <span buiBadge variant="secondary">↑ +20.1%</span>
    </div>
    <h3 buiCardTitle class="text-2xl tabular-nums">$15,231.89</h3>
  </div>
  <div buiCardFooter class="text-muted-foreground text-sm">Trending up this month</div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader>…title + "Sign up" link…</div>
  <div buiCardContent><form>…email + password fields…</form></div>
  <div buiCardFooter class="flex-col gap-2">
    <button buiButton class="w-full">Login</button>
    <button buiButton variant="outline" class="w-full">Login with Google</button>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader>… "Premium" + <span buiBadge>Popular</span> …</div>
  <div buiCardContent>
    <p><span class="text-4xl font-bold">$29</span> /month</p>
    <ul>… feature list …</ul>
  </div>
  <div buiCardFooter><button buiButton class="w-full">Get started</button></div>
</div>

<div buiCard variant="sectioned" class="overflow-hidden pt-0">
  <img src="/table.jpg" class="aspect-[4/3] w-full object-cover" alt="" />
  <div buiCardHeader>… title + "In stock" badge + description …</div>
  <div buiCardFooter class="justify-between">
    <span class="text-2xl font-semibold">$249</span>
    <button buiButton>Add to cart</button>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader>… title + description …</div>
  <div buiCardContent>
    <div class="flex items-center justify-between rounded-lg border p-3">
      <div>Push notifications…</div>
      <button buiSwitch [checked]="true"></button>
    </div>
    <ul>… activity items …</ul>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardContent class="flex flex-col gap-4 pt-6">
    <span class="text-amber-500">★★★★★</span>
    <p class="text-sm">"…quote…"</p>
    <div class="flex items-center gap-3"><bui-avatar>AB</bui-avatar> Amelia Bell</div>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader>
    <div class="flex items-start justify-between gap-2">
      <div>… title + description …</div>
      <button buiButton variant="ghost" size="icon" aria-label="Options">⋯</button>
    </div>
  </div>
  <div buiCardContent>… member row …</div>
</div>

<div buiCard variant="sectioned" class="overflow-hidden pt-0">
  <div class="bg-muted aspect-[16/9]">…cover…</div>
  <div buiCardHeader>
    <span buiBadge variant="outline" class="w-fit">Engineering</span>
    <h3 buiCardTitle>Shipping a design system</h3>
    <p buiCardDescription>How we built our library.</p>
  </div>
</div>

<div buiCard variant="sectioned" class="text-center">
  <div buiCardHeader>
    <h3 buiCardTitle>Ready to get started?</h3>
    <p buiCardDescription>Create your account in under a minute.</p>
  </div>
  <div buiCardContent class="flex justify-center gap-3">
    <button buiButton>Get started</button>
    <button buiButton variant="outline">Contact sales</button>
  </div>
</div>

<!-- soft glow on hover -->
<div buiCard variant="sectioned" class="transition-shadow hover:shadow-lg hover:shadow-primary/20">
  …
</div>

<div buiCard class="relative overflow-hidden p-0">
  <div class="aspect-[4/3] bg-gradient-to-br from-zinc-600 to-zinc-900"></div>
  <div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/70 to-transparent p-4 text-white">
    <h3 class="text-lg font-semibold">Mountain escape</h3>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader><h3 buiCardTitle>Payment</h3></div>
  <div buiCardContent class="space-y-4">
    <div buiField><label buiFieldLabel for="n">Card number</label><input id="n" buiInput /></div>
    <div class="grid grid-cols-2 gap-3">… expiry / cvc …</div>
  </div>
  <div buiCardFooter><button buiButton class="w-full">Pay</button></div>
</div>

<div buiCard variant="sectioned" class="text-center">
  <div buiCardContent class="flex flex-col items-center gap-3 pt-6">
    <span class="grid size-16 place-items-center rounded-full bg-primary text-primary-foreground">JD</span>
    <div><p class="font-medium">Jane Doe</p><p class="text-muted-foreground text-sm">Designer</p></div>
    <button buiButton class="w-full">Follow</button>
  </div>
</div>

<div buiCard variant="sectioned">
  <div buiCardHeader><h3 buiCardTitle>Share this document</h3></div>
  <div buiCardContent class="flex gap-2">
    <input buiInput readonly value="https://…" />
    <button buiButton variant="secondary">Copy</button>
  </div>
</div>

<div buiCard variant="sectioned" class="overflow-hidden pt-0">
  <div class="bg-muted aspect-video">…image…</div>
  <div buiCardHeader><h3 buiCardTitle>With image</h3></div>
  <div buiCardContent>Content below the image.</div>
</div>