Card

Flexible content container with header, body, media, and footer sections.

Basic Card

Card Title

Subtitle text

This is a basic card with body content. Cards are flexible containers for grouping related information.

<div class="card card-bordered" style="width: 320px;">
  <div class="card-body">
    <h2 class="card-title">Card Title</h2>
    <p class="card-subtitle">Subtitle text</p>
    <p>This is a basic card with body content. Cards are flexible containers for grouping related information.</p>
    <div class="card-actions justify-end">
      <button class="btn color-primary">Action</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden" style="width: 320px;">
  <div class="flex flex-col gap-3 p-5">
    <h2 class="font-semibold text-lg">Card Title</h2>
    <p class="text-sm opacity-60">Subtitle text</p>
    <p>This is a basic card with body content. Cards are flexible containers for grouping related information.</p>
    <div class="flex items-center gap-2 justify-end">
      <button class="btn color-primary">Action</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

With Media

Mountain View

A beautiful landscape captured during golden hour.

<div class="card card-bordered" style="width: 320px;">
  <div class="card-media card-media-wide">
    <img src="https://picsum.photos/seed/ux1/640/360" alt="Sample">
  </div>
  <div class="card-body">
    <h2 class="card-title">Mountain View</h2>
    <p>A beautiful landscape captured during golden hour.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-sm color-primary">View</button>
      <button class="btn btn-sm btn-ghost">Share</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden" style="width: 320px;">
  <div class="aspect-video overflow-hidden">
    <img src="https://picsum.photos/seed/ux1/640/360" alt="Sample" class="block w-full h-full object-cover">
  </div>
  <div class="flex flex-col gap-3 p-5">
    <h2 class="font-semibold text-lg">Mountain View</h2>
    <p>A beautiful landscape captured during golden hour.</p>
    <div class="flex items-center gap-2 justify-end">
      <button class="btn btn-sm color-primary">View</button>
      <button class="btn btn-sm btn-ghost">Share</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

With Header

Project Update

Last updated 2 hours ago

The migration to v3 is progressing well. All core components have been updated.

<div class="card card-bordered" style="width: 360px;">
  <div class="card-header">
    <div class="card-header-text">
      <h2 class="card-title">Project Update</h2>
      <p class="card-subtitle">Last updated 2 hours ago</p>
    </div>
    <div class="card-header-actions">
      <button class="btn btn-sm btn-ghost btn-circle">⋮</button>
    </div>
  </div>
  <div class="card-body">
    <p>The migration to v3 is progressing well. All core components have been updated.</p>
  </div>
  <div class="card-footer card-footer-bordered">
    <div class="card-actions justify-end" style="margin-left:auto;">
      <button class="btn btn-sm btn-ghost">Cancel</button>
      <button class="btn btn-sm color-primary">Save</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden" style="width: 360px;">
  <div class="flex items-center gap-3 p-5 pb-0">
    <div class="flex-1 min-w-0">
      <h2 class="font-semibold text-lg">Project Update</h2>
      <p class="text-sm opacity-60">Last updated 2 hours ago</p>
    </div>
    <div class="flex items-center gap-2 shrink-0">
      <button class="btn btn-sm btn-ghost btn-circle">⋮</button>
    </div>
  </div>
  <div class="flex flex-col gap-3 p-5">
    <p>The migration to v3 is progressing well. All core components have been updated.</p>
  </div>
  <div class="flex items-center gap-3 p-5 pt-5 border-t border-base-300">
    <div class="flex items-center gap-2 ml-auto">
      <button class="btn btn-sm btn-ghost">Cancel</button>
      <button class="btn btn-sm color-primary">Save</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Style Variants

Shadow

Default card with shadow

Bordered

Card with border

Dashed

Card with dashed border

Elevated

Card with larger shadow

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="card" style="width:200px;">
    <div class="card-body"><h2 class="card-title">Shadow</h2><p>Default card with shadow</p></div>
  </div>
  <div class="card card-bordered" style="width:200px;">
    <div class="card-body"><h2 class="card-title">Bordered</h2><p>Card with border</p></div>
  </div>
  <div class="card card-dash" style="width:200px;">
    <div class="card-body"><h2 class="card-title">Dashed</h2><p>Card with dashed border</p></div>
  </div>
  <div class="card card-elevated" style="width:200px;">
    <div class="card-body"><h2 class="card-title">Elevated</h2><p>Card with larger shadow</p></div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="flex flex-col rounded-2xl bg-base-100 shadow-sm" style="width:200px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Shadow</h2><p>Default card with shadow</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-base-100 border border-base-300" style="width:200px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Bordered</h2><p>Card with border</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-base-100 border border-dashed border-base-300" style="width:200px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Dashed</h2><p>Card with dashed border</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-base-100 shadow-lg" style="width:200px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Elevated</h2><p>Card with larger shadow</p></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Colors

Primary

Colored card

Secondary

Colored card

Accent

Colored card

Neutral

Colored card

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="card color-primary" style="width:180px;">
    <div class="card-body"><h2 class="card-title">Primary</h2><p>Colored card</p></div>
  </div>
  <div class="card color-secondary" style="width:180px;">
    <div class="card-body"><h2 class="card-title">Secondary</h2><p>Colored card</p></div>
  </div>
  <div class="card color-accent" style="width:180px;">
    <div class="card-body"><h2 class="card-title">Accent</h2><p>Colored card</p></div>
  </div>
  <div class="card color-neutral" style="width:180px;">
    <div class="card-body"><h2 class="card-title">Neutral</h2><p>Colored card</p></div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="flex flex-col rounded-2xl bg-primary text-primary-content shadow-sm" style="width:180px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Primary</h2><p>Colored card</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-secondary text-secondary-content shadow-sm" style="width:180px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Secondary</h2><p>Colored card</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-accent text-accent-content shadow-sm" style="width:180px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Accent</h2><p>Colored card</p></div>
  </div>
  <div class="flex flex-col rounded-2xl bg-neutral text-neutral-content shadow-sm" style="width:180px;">
    <div class="flex flex-col gap-3 p-5"><h2 class="font-semibold text-lg">Neutral</h2><p>Colored card</p></div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Glass

Glass Card

Glassmorphism effect with frosted background blur.

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); padding: 2rem; border-radius: 1rem;">
  <div class="card glass" style="width: 320px; margin: auto;">
    <div class="card-body">
      <h2 class="card-title">Glass Card</h2>
      <p>Glassmorphism effect with frosted background blur.</p>
      <div class="card-actions justify-end">
        <button class="btn glass">Action</button>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="background: linear-gradient(135deg, oklch(0.55 0.22 250), oklch(0.55 0.20 280)); padding: 2rem; border-radius: 1rem;">
  <div class="flex flex-col rounded-2xl bg-glass-bg backdrop-blur-glass backdrop-saturate-180 border border-glass-border shadow-glass overflow-hidden" style="width: 320px; margin: auto;">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Glass Card</h2>
      <p>Glassmorphism effect with frosted background blur.</p>
      <div class="flex items-center gap-2 justify-end">
        <button class="btn glass">Action</button>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Horizontal (Side)

Side Layout

Image sits beside the content in a horizontal layout.

<div class="card card-side card-bordered" style="max-width:500px;">
  <div class="card-media">
    <img src="https://picsum.photos/seed/ux2/400/300" alt="Sample">
  </div>
  <div class="card-body">
    <h2 class="card-title">Side Layout</h2>
    <p>Image sits beside the content in a horizontal layout.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-sm color-primary">Details</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-row rounded-2xl border border-base-300 bg-base-100 overflow-hidden" style="max-width:500px;">
  <div class="w-50 shrink-0 overflow-hidden">
    <img src="https://picsum.photos/seed/ux2/400/300" alt="Sample" class="block w-full h-full object-cover">
  </div>
  <div class="flex flex-col gap-3 p-5 flex-1">
    <h2 class="font-semibold text-lg">Side Layout</h2>
    <p>Image sits beside the content in a horizontal layout.</p>
    <div class="flex items-center gap-2 justify-end">
      <button class="btn btn-sm color-primary">Details</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Image Full (Overlay)

Overlay Content

Text displayed over the full-bleed background image.

<div class="card card-image-full" style="width: 360px;">
  <div class="card-media">
    <img src="https://picsum.photos/seed/ux3/720/400" alt="Sample">
  </div>
  <div class="card-body">
    <h2 class="card-title">Overlay Content</h2>
    <p>Text displayed over the full-bleed background image.</p>
    <div class="card-actions justify-end">
      <button class="btn btn-sm glass">Explore</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="relative rounded-2xl overflow-hidden" style="width: 360px;">
  <div class="absolute inset-0">
    <img src="https://picsum.photos/seed/ux3/720/400" alt="Sample" class="block w-full h-full object-cover">
  </div>
  <div class="relative z-1 flex flex-col gap-3 p-5 justify-end min-h-50 text-white" style="background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);">
    <h2 class="font-semibold text-lg">Overlay Content</h2>
    <p>Text displayed over the full-bleed background image.</p>
    <div class="flex items-center gap-2 justify-end">
      <button class="btn btn-sm glass">Explore</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Sizes

Small

Compact card with reduced padding.

Default

Standard card with default padding.

Large

Spacious card with increased padding.

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="card card-sm card-bordered" style="width:220px;">
    <div class="card-body">
      <h2 class="card-title">Small</h2>
      <p>Compact card with reduced padding.</p>
    </div>
  </div>
  <div class="card card-bordered" style="width:260px;">
    <div class="card-body">
      <h2 class="card-title">Default</h2>
      <p>Standard card with default padding.</p>
    </div>
  </div>
  <div class="card card-lg card-bordered" style="width:300px;">
    <div class="card-body">
      <h2 class="card-title">Large</h2>
      <p>Spacious card with increased padding.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:220px;">
    <div class="flex flex-col gap-2 p-3">
      <h2 class="font-semibold text-base">Small</h2>
      <p>Compact card with reduced padding.</p>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:260px;">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Default</h2>
      <p>Standard card with default padding.</p>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:300px;">
    <div class="flex flex-col gap-4 p-7">
      <h2 class="font-semibold text-xl">Large</h2>
      <p>Spacious card with increased padding.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Clickable / Hoverable

Clickable

Hover to see the lift effect.

Disabled

Card is non-interactive.

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="card card-bordered card-clickable" style="width:240px;">
    <div class="card-body">
      <h2 class="card-title">Clickable</h2>
      <p>Hover to see the lift effect.</p>
    </div>
  </div>
  <div class="card card-bordered card-disabled" style="width:240px;">
    <div class="card-body">
      <h2 class="card-title">Disabled</h2>
      <p>Card is non-interactive.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 cursor-pointer transition-all hover:shadow-lg hover:-translate-y-0.5 active:scale-[0.98]" style="width:240px;">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Clickable</h2>
      <p>Hover to see the lift effect.</p>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 opacity-50 pointer-events-none" style="width:240px;">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Disabled</h2>
      <p>Card is non-interactive.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// For clickable cards, wrap in <a> or add onclick handler

Card Grid

Card 1

Auto-fill grid layout.

Card 2

Responsive columns.

Card 3

Fills available space.

<div class="card-grid">
  <div class="card card-bordered">
    <div class="card-body">
      <h2 class="card-title">Card 1</h2>
      <p>Auto-fill grid layout.</p>
    </div>
  </div>
  <div class="card card-bordered">
    <div class="card-body">
      <h2 class="card-title">Card 2</h2>
      <p>Responsive columns.</p>
    </div>
  </div>
  <div class="card card-bordered">
    <div class="card-body">
      <h2 class="card-title">Card 3</h2>
      <p>Fills available space.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-6">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Card 1</h2>
      <p>Auto-fill grid layout.</p>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Card 2</h2>
      <p>Responsive columns.</p>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100">
    <div class="flex flex-col gap-3 p-5">
      <h2 class="font-semibold text-lg">Card 3</h2>
      <p>Fills available space.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Practical Examples

Real-world card compositions using the base card classes. No extra CSS needed — just different content structures.

Product Card (E-commerce)

In Stock

Wireless Headphones

Premium noise-cancelling

$299 $399

<div class="card card-bordered card-clickable" style="width: 280px;">
  <div class="card-media card-media-square">
    <img src="https://picsum.photos/seed/product1/400/400" alt="Product">
  </div>
  <div class="card-body">
    <span class="badge color-success" style="align-self: flex-start;">In Stock</span>
    <h2 class="card-title">Wireless Headphones</h2>
    <p class="card-subtitle">Premium noise-cancelling</p>
    <div style="display:flex; align-items:baseline; gap:0.5rem; margin-top:0.25rem;">
      <span style="font-size:1.25rem; font-weight:700;">$299</span>
      <span style="font-size:0.875rem; text-decoration:line-through; opacity:0.5;">$399</span>
    </div>
    <div class="card-actions" style="margin-top:0.5rem;">
      <button class="btn btn-sm color-primary" style="flex:1;">Add to Cart</button>
      <button class="btn btn-sm btn-ghost btn-square">♡</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden cursor-pointer transition-all hover:shadow-lg hover:-translate-y-0.5" style="width: 280px;">
  <div class="aspect-square overflow-hidden">
    <img src="https://picsum.photos/seed/product1/400/400" alt="Product" class="block w-full h-full object-cover">
  </div>
  <div class="flex flex-col gap-3 p-5">
    <span class="badge color-success self-start">In Stock</span>
    <h2 class="font-semibold text-lg">Wireless Headphones</h2>
    <p class="text-sm opacity-60">Premium noise-cancelling</p>
    <div class="flex items-baseline gap-2 mt-1">
      <span class="text-xl font-bold">$299</span>
      <span class="text-sm line-through opacity-50">$399</span>
    </div>
    <div class="flex items-center gap-2 mt-2">
      <button class="btn btn-sm color-primary flex-1">Add to Cart</button>
      <button class="btn btn-sm btn-ghost btn-square">♡</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// Add onclick for cart/wishlist functionality

Employee Card (HR)

Jane Doe

Senior Developer

Active

Department
Engineering

Location
New York

Employee ID
EMP-0042

Start Date
Jan 2023

<div class="card card-bordered" style="width: 300px;">
  <div class="card-header" style="padding-bottom:var(--card-padding);">
    <div style="width:48px; height:48px; border-radius:50%; background:var(--color-primary); color:var(--color-primary-content); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.125rem; flex-shrink:0;">JD</div>
    <div class="card-header-text">
      <h2 class="card-title">Jane Doe</h2>
      <p class="card-subtitle">Senior Developer</p>
    </div>
    <div class="card-header-actions">
      <span class="badge color-success">Active</span>
    </div>
  </div>
  <div class="card-body" style="padding-top:0;">
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; font-size:0.875rem;">
      <div><span style="opacity:0.5;">Department</span><br>Engineering</div>
      <div><span style="opacity:0.5;">Location</span><br>New York</div>
      <div><span style="opacity:0.5;">Employee ID</span><br>EMP-0042</div>
      <div><span style="opacity:0.5;">Start Date</span><br>Jan 2023</div>
    </div>
  </div>
  <div class="card-footer card-footer-bordered">
    <button class="btn btn-sm btn-ghost">Profile</button>
    <div class="card-actions justify-end" style="margin-left:auto;">
      <button class="btn btn-sm color-primary">Message</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden" style="width: 300px;">
  <div class="flex items-center gap-3 p-5">
    <div class="size-12 rounded-full bg-primary text-primary-content flex items-center justify-center font-semibold text-lg shrink-0">JD</div>
    <div class="flex-1 min-w-0">
      <h2 class="font-semibold text-lg">Jane Doe</h2>
      <p class="text-sm opacity-60">Senior Developer</p>
    </div>
    <span class="badge color-success">Active</span>
  </div>
  <div class="flex flex-col gap-3 px-5 pb-5">
    <div class="grid grid-cols-2 gap-3 text-sm">
      <div><span class="opacity-50">Department</span><br>Engineering</div>
      <div><span class="opacity-50">Location</span><br>New York</div>
      <div><span class="opacity-50">Employee ID</span><br>EMP-0042</div>
      <div><span class="opacity-50">Start Date</span><br>Jan 2023</div>
    </div>
  </div>
  <div class="flex items-center gap-3 p-5 border-t border-base-300">
    <button class="btn btn-sm btn-ghost">Profile</button>
    <div class="flex items-center gap-2 ml-auto">
      <button class="btn btn-sm color-primary">Message</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

POS Product Card (Point of Sale)

Espresso

$3.50

Caffè Latte

$4.50

Croissant

$2.80

Add Item

<div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:0.75rem; max-width:640px;">
  <div class="card card-sm card-bordered card-clickable">
    <div class="card-media card-media-square">
      <img src="https://picsum.photos/seed/pos1/300/300" alt="Coffee">
    </div>
    <div class="card-body" style="text-align:center;">
      <h3 class="card-title" style="font-size:0.875rem;">Espresso</h3>
      <span style="font-weight:700; color:var(--color-primary);">$3.50</span>
    </div>
  </div>
  <div class="card card-sm card-bordered card-clickable">
    <div class="card-media card-media-square">
      <img src="https://picsum.photos/seed/pos2/300/300" alt="Latte">
    </div>
    <div class="card-body" style="text-align:center;">
      <h3 class="card-title" style="font-size:0.875rem;">Caffè Latte</h3>
      <span style="font-weight:700; color:var(--color-primary);">$4.50</span>
    </div>
  </div>
  <div class="card card-sm card-bordered card-clickable">
    <div class="card-media card-media-square">
      <img src="https://picsum.photos/seed/pos3/300/300" alt="Croissant">
    </div>
    <div class="card-body" style="text-align:center;">
      <h3 class="card-title" style="font-size:0.875rem;">Croissant</h3>
      <span style="font-weight:700; color:var(--color-primary);">$2.80</span>
    </div>
  </div>
  <div class="card card-sm card-dash card-clickable" style="display:flex; align-items:center; justify-content:center; min-height:180px;">
    <div style="text-align:center; opacity:0.5;">
      <span style="font-size:1.5rem;">+</span>
      <p style="font-size:0.75rem; margin-top:0.25rem;">Add Item</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3" style="max-width:640px;">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden cursor-pointer transition-all hover:shadow-lg hover:-translate-y-0.5">
    <div class="aspect-square overflow-hidden">
      <img src="https://picsum.photos/seed/pos1/300/300" alt="Coffee" class="block w-full h-full object-cover">
    </div>
    <div class="flex flex-col gap-1 p-3 text-center">
      <h3 class="font-semibold text-sm">Espresso</h3>
      <span class="font-bold text-primary">$3.50</span>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden cursor-pointer transition-all hover:shadow-lg hover:-translate-y-0.5">
    <div class="aspect-square overflow-hidden">
      <img src="https://picsum.photos/seed/pos2/300/300" alt="Latte" class="block w-full h-full object-cover">
    </div>
    <div class="flex flex-col gap-1 p-3 text-center">
      <h3 class="font-semibold text-sm">Caffè Latte</h3>
      <span class="font-bold text-primary">$4.50</span>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100 overflow-hidden cursor-pointer transition-all hover:shadow-lg hover:-translate-y-0.5">
    <div class="aspect-square overflow-hidden">
      <img src="https://picsum.photos/seed/pos3/300/300" alt="Croissant" class="block w-full h-full object-cover">
    </div>
    <div class="flex flex-col gap-1 p-3 text-center">
      <h3 class="font-semibold text-sm">Croissant</h3>
      <span class="font-bold text-primary">$2.80</span>
    </div>
  </div>
  <div class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-base-300 bg-base-100 cursor-pointer hover:shadow-lg min-h-45 opacity-50 hover:opacity-75 transition-all">
    <span class="text-2xl">+</span>
    <p class="text-xs mt-1">Add Item</p>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// Add onclick to add items to cart

Subscription / Pricing Card

Basic

$9 /month

✓ 5 Projects ✓ 1 GB Storage ✓ Email Support

Popular

Pro

$29 /month

✓ Unlimited Projects ✓ 50 GB Storage ✓ Priority Support ✓ API Access

Enterprise

$99 /month

✓ Everything in Pro ✓ 500 GB Storage ✓ Dedicated Support ✓ Custom Integrations ✓ SLA 99.9%

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="card card-bordered" style="width:240px;">
    <div class="card-body" style="text-align:center;">
      <h2 class="card-title" style="justify-content:center;">Basic</h2>
      <div style="margin:0.5rem 0;">
        <span style="font-size:2rem; font-weight:800;">$9</span>
        <span style="opacity:0.5; font-size:0.875rem;">/month</span>
      </div>
      <div style="font-size:0.875rem; opacity:0.7; display:flex; flex-direction:column; gap:0.375rem; text-align:left; margin:0.5rem 0;">
        <span>✓ 5 Projects</span>
        <span>✓ 1 GB Storage</span>
        <span>✓ Email Support</span>
      </div>
      <button class="btn btn-outline" style="width:100%; margin-top:0.5rem;">Get Started</button>
    </div>
  </div>
  <div class="card card-bordered" style="width:240px; border-color:var(--color-primary); box-shadow:0 0 0 1px var(--color-primary);">
    <div class="card-body" style="text-align:center;">
      <span class="badge color-primary" style="align-self:center;">Popular</span>
      <h2 class="card-title" style="justify-content:center;">Pro</h2>
      <div style="margin:0.5rem 0;">
        <span style="font-size:2rem; font-weight:800;">$29</span>
        <span style="opacity:0.5; font-size:0.875rem;">/month</span>
      </div>
      <div style="font-size:0.875rem; opacity:0.7; display:flex; flex-direction:column; gap:0.375rem; text-align:left; margin:0.5rem 0;">
        <span>✓ Unlimited Projects</span>
        <span>✓ 50 GB Storage</span>
        <span>✓ Priority Support</span>
        <span>✓ API Access</span>
      </div>
      <button class="btn color-primary" style="width:100%; margin-top:0.5rem;">Get Started</button>
    </div>
  </div>
  <div class="card card-bordered" style="width:240px;">
    <div class="card-body" style="text-align:center;">
      <h2 class="card-title" style="justify-content:center;">Enterprise</h2>
      <div style="margin:0.5rem 0;">
        <span style="font-size:2rem; font-weight:800;">$99</span>
        <span style="opacity:0.5; font-size:0.875rem;">/month</span>
      </div>
      <div style="font-size:0.875rem; opacity:0.7; display:flex; flex-direction:column; gap:0.375rem; text-align:left; margin:0.5rem 0;">
        <span>✓ Everything in Pro</span>
        <span>✓ 500 GB Storage</span>
        <span>✓ Dedicated Support</span>
        <span>✓ Custom Integrations</span>
        <span>✓ SLA 99.9%</span>
      </div>
      <button class="btn btn-outline" style="width:100%; margin-top:0.5rem;">Contact Sales</button>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:240px;">
    <div class="flex flex-col gap-3 p-5 text-center">
      <h2 class="font-semibold text-lg">Basic</h2>
      <div class="my-2">
        <span class="text-3xl font-extrabold">$9</span>
        <span class="text-sm opacity-50">/month</span>
      </div>
      <div class="text-sm opacity-70 flex flex-col gap-1.5 text-left my-2">
        <span>✓ 5 Projects</span>
        <span>✓ 1 GB Storage</span>
        <span>✓ Email Support</span>
      </div>
      <button class="btn btn-outline w-full mt-2">Get Started</button>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border-2 border-primary bg-base-100 shadow-lg" style="width:240px;">
    <div class="flex flex-col gap-3 p-5 text-center">
      <span class="badge color-primary self-center">Popular</span>
      <h2 class="font-semibold text-lg">Pro</h2>
      <div class="my-2">
        <span class="text-3xl font-extrabold">$29</span>
        <span class="text-sm opacity-50">/month</span>
      </div>
      <div class="text-sm opacity-70 flex flex-col gap-1.5 text-left my-2">
        <span>✓ Unlimited Projects</span>
        <span>✓ 50 GB Storage</span>
        <span>✓ Priority Support</span>
        <span>✓ API Access</span>
      </div>
      <button class="btn color-primary w-full mt-2">Get Started</button>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:240px;">
    <div class="flex flex-col gap-3 p-5 text-center">
      <h2 class="font-semibold text-lg">Enterprise</h2>
      <div class="my-2">
        <span class="text-3xl font-extrabold">$99</span>
        <span class="text-sm opacity-50">/month</span>
      </div>
      <div class="text-sm opacity-70 flex flex-col gap-1.5 text-left my-2">
        <span>✓ Everything in Pro</span>
        <span>✓ 500 GB Storage</span>
        <span>✓ Dedicated Support</span>
        <span>✓ Custom Integrations</span>
        <span>✓ SLA 99.9%</span>
      </div>
      <button class="btn btn-outline w-full mt-2">Contact Sales</button>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

KPI / Dashboard Card

Revenue +12.5%

$48,350

78% of target

Users -3.2%

1,284

42% of target

Orders +0.8%

356

91% of target

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="card card-bordered" style="width:220px;">
    <div class="card-body">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span style="font-size:0.75rem; opacity:0.6; text-transform:uppercase; letter-spacing:0.05em;">Revenue</span>
        <span class="badge color-success" style="font-size:0.625rem;">+12.5%</span>
      </div>
      <span style="font-size:1.75rem; font-weight:800; margin:0.25rem 0;">$48,350</span>
      <div style="height:4px; border-radius:2px; background:var(--color-base-200); margin-top:0.5rem;">
        <div style="height:100%; width:78%; border-radius:2px; background:var(--color-success);"></div>
      </div>
      <span style="font-size:0.75rem; opacity:0.5; margin-top:0.25rem;">78% of target</span>
    </div>
  </div>
  <div class="card card-bordered" style="width:220px;">
    <div class="card-body">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span style="font-size:0.75rem; opacity:0.6; text-transform:uppercase; letter-spacing:0.05em;">Users</span>
        <span class="badge color-error" style="font-size:0.625rem;">-3.2%</span>
      </div>
      <span style="font-size:1.75rem; font-weight:800; margin:0.25rem 0;">1,284</span>
      <div style="height:4px; border-radius:2px; background:var(--color-base-200); margin-top:0.5rem;">
        <div style="height:100%; width:42%; border-radius:2px; background:var(--color-warning);"></div>
      </div>
      <span style="font-size:0.75rem; opacity:0.5; margin-top:0.25rem;">42% of target</span>
    </div>
  </div>
  <div class="card card-bordered" style="width:220px;">
    <div class="card-body">
      <div style="display:flex; justify-content:space-between; align-items:center;">
        <span style="font-size:0.75rem; opacity:0.6; text-transform:uppercase; letter-spacing:0.05em;">Orders</span>
        <span class="badge color-info" style="font-size:0.625rem;">+0.8%</span>
      </div>
      <span style="font-size:1.75rem; font-weight:800; margin:0.25rem 0;">356</span>
      <div style="height:4px; border-radius:2px; background:var(--color-base-200); margin-top:0.5rem;">
        <div style="height:100%; width:91%; border-radius:2px; background:var(--color-primary);"></div>
      </div>
      <span style="font-size:0.75rem; opacity:0.5; margin-top:0.25rem;">91% of target</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:220px;">
    <div class="flex flex-col gap-3 p-5">
      <div class="flex justify-between items-center">
        <span class="text-xs opacity-60 uppercase tracking-wider">Revenue</span>
        <span class="badge color-success text-[0.625rem]">+12.5%</span>
      </div>
      <span class="text-3xl font-extrabold">$48,350</span>
      <div class="h-1 rounded-full bg-base-200 mt-2">
        <div class="h-full w-[78%] rounded-full bg-success"></div>
      </div>
      <span class="text-xs opacity-50 mt-1">78% of target</span>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:220px;">
    <div class="flex flex-col gap-3 p-5">
      <div class="flex justify-between items-center">
        <span class="text-xs opacity-60 uppercase tracking-wider">Users</span>
        <span class="badge color-error text-[0.625rem]">-3.2%</span>
      </div>
      <span class="text-3xl font-extrabold">1,284</span>
      <div class="h-1 rounded-full bg-base-200 mt-2">
        <div class="h-full w-[42%] rounded-full bg-warning"></div>
      </div>
      <span class="text-xs opacity-50 mt-1">42% of target</span>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 bg-base-100" style="width:220px;">
    <div class="flex flex-col gap-3 p-5">
      <div class="flex justify-between items-center">
        <span class="text-xs opacity-60 uppercase tracking-wider">Orders</span>
        <span class="badge color-info text-[0.625rem]">+0.8%</span>
      </div>
      <span class="text-3xl font-extrabold">356</span>
      <div class="h-1 rounded-full bg-base-200 mt-2">
        <div class="h-full w-[91%] rounded-full bg-primary"></div>
      </div>
      <span class="text-xs opacity-50 mt-1">91% of target</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component
// Update values dynamically with JS or your framework

Event Card (Calendar)

Team Standup

Daily

🕐 9:00 - 9:30 AM 📍 Room A

+5 more

Q4 Deadline

Urgent

🕐 Dec 31, 5:00 PM

Submit all project deliverables and final reports.

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="card card-bordered" style="width:300px; border-left:4px solid var(--color-primary);">
    <div class="card-body">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <h2 class="card-title">Team Standup</h2>
        <span class="badge color-info" style="font-size:0.625rem;">Daily</span>
      </div>
      <div style="display:flex; gap:1rem; font-size:0.875rem; opacity:0.7; margin-top:0.25rem;">
        <span>🕐 9:00 - 9:30 AM</span>
        <span>📍 Room A</span>
      </div>
      <div style="display:flex; align-items:center; gap:0.25rem; margin-top:0.5rem;">
        <div style="width:24px; height:24px; border-radius:50%; background:var(--color-primary); border:2px solid var(--color-base-100);"></div>
        <div style="width:24px; height:24px; border-radius:50%; background:var(--color-secondary); border:2px solid var(--color-base-100); margin-left:-8px;"></div>
        <div style="width:24px; height:24px; border-radius:50%; background:var(--color-accent); border:2px solid var(--color-base-100); margin-left:-8px;"></div>
        <span style="font-size:0.75rem; opacity:0.5; margin-left:0.25rem;">+5 more</span>
      </div>
    </div>
  </div>
  <div class="card card-bordered" style="width:300px; border-left:4px solid var(--color-error);">
    <div class="card-body">
      <div style="display:flex; justify-content:space-between; align-items:flex-start;">
        <h2 class="card-title">Q4 Deadline</h2>
        <span class="badge color-error" style="font-size:0.625rem;">Urgent</span>
      </div>
      <div style="display:flex; gap:1rem; font-size:0.875rem; opacity:0.7; margin-top:0.25rem;">
        <span>🕐 Dec 31, 5:00 PM</span>
      </div>
      <p style="font-size:0.875rem; opacity:0.6; margin-top:0.5rem;">Submit all project deliverables and final reports.</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<div style="display:flex; gap:1rem; flex-wrap:wrap;">
  <div class="flex flex-col rounded-2xl border border-base-300 border-l-4 border-l-primary bg-base-100" style="width:300px;">
    <div class="flex flex-col gap-3 p-5">
      <div class="flex justify-between items-start">
        <h2 class="font-semibold text-lg">Team Standup</h2>
        <span class="badge color-info text-[0.625rem]">Daily</span>
      </div>
      <div class="flex gap-4 text-sm opacity-70">
        <span>🕐 9:00 - 9:30 AM</span>
        <span>📍 Room A</span>
      </div>
      <div class="flex items-center gap-1 mt-2">
        <div class="size-6 rounded-full bg-primary border-2 border-base-100"></div>
        <div class="size-6 rounded-full bg-secondary border-2 border-base-100 -ml-2"></div>
        <div class="size-6 rounded-full bg-accent border-2 border-base-100 -ml-2"></div>
        <span class="text-xs opacity-50 ml-1">+5 more</span>
      </div>
    </div>
  </div>
  <div class="flex flex-col rounded-2xl border border-base-300 border-l-4 border-l-error bg-base-100" style="width:300px;">
    <div class="flex flex-col gap-3 p-5">
      <div class="flex justify-between items-start">
        <h2 class="font-semibold text-lg">Q4 Deadline</h2>
        <span class="badge color-error text-[0.625rem]">Urgent</span>
      </div>
      <div class="flex gap-4 text-sm opacity-70">
        <span>🕐 Dec 31, 5:00 PM</span>
      </div>
      <p class="text-sm opacity-60 mt-2">Submit all project deliverables and final reports.</p>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Loyalty / Membership Card

ACME Rewards Gold

Available Points

12,450 pts

7,550 pts to Platinum

Member John Smith

Expires 12/2026

<div class="card" style="width:360px; background:linear-gradient(135deg, oklch(0.35 0.03 260), oklch(0.25 0.02 260)); color:white;">
  <div class="card-body">
    <div style="display:flex; justify-content:space-between; align-items:center;">
      <span style="font-weight:700; font-size:1.125rem; letter-spacing:0.05em;">ACME Rewards</span>
      <span class="badge" style="background:rgba(255,215,0,0.2); color:gold; border:1px solid rgba(255,215,0,0.3);">Gold</span>
    </div>
    <div style="margin:1.5rem 0 1rem;">
      <span style="font-size:0.75rem; opacity:0.6;">Available Points</span>
      <div style="font-size:2.5rem; font-weight:800; letter-spacing:-0.02em;">12,450 <span style="font-size:1rem; font-weight:400; opacity:0.6;">pts</span></div>
    </div>
    <div style="height:4px; border-radius:2px; background:rgba(255,255,255,0.15); margin-bottom:0.5rem;">
      <div style="height:100%; width:62%; border-radius:2px; background:gold;"></div>
    </div>
    <span style="font-size:0.75rem; opacity:0.5;">7,550 pts to Platinum</span>
    <div style="display:flex; justify-content:space-between; align-items:flex-end; margin-top:1rem; font-size:0.8125rem; opacity:0.7;">
      <div>
        <span style="display:block; opacity:0.6; font-size:0.6875rem;">Member</span>
        John Smith
      </div>
      <div style="text-align:right;">
        <span style="display:block; opacity:0.6; font-size:0.6875rem;">Expires</span>
        12/2026
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col rounded-2xl text-white overflow-hidden shadow-lg" style="width:360px; background:linear-gradient(135deg, oklch(0.35 0.03 260), oklch(0.25 0.02 260));">
  <div class="flex flex-col gap-3 p-5">
    <div class="flex justify-between items-center">
      <span class="font-bold text-lg tracking-wider">ACME Rewards</span>
      <span class="inline-flex items-center px-2 py-0.5 text-xs font-semibold rounded-full" style="background:rgba(255,215,0,0.2); color:gold; border:1px solid rgba(255,215,0,0.3);">Gold</span>
    </div>
    <div class="mt-4 mb-2">
      <span class="text-xs opacity-60">Available Points</span>
      <div class="text-4xl font-extrabold tracking-tight">12,450 <span class="text-base font-normal opacity-60">pts</span></div>
    </div>
    <div class="h-1 rounded-full" style="background:rgba(255,255,255,0.15);">
      <div class="h-full w-[62%] rounded-full" style="background:gold;"></div>
    </div>
    <span class="text-xs opacity-50">7,550 pts to Platinum</span>
    <div class="flex justify-between items-end mt-4 text-sm opacity-70">
      <div>
        <span class="block opacity-60 text-[0.6875rem]">Member</span>
        John Smith
      </div>
      <div class="text-right">
        <span class="block opacity-60 text-[0.6875rem]">Expires</span>
        12/2026
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required - pure CSS component

Reference

Class	Description
.card	Base card container
.card-header	Header section (flex row)
.card-header-text	Text wrapper in header (flex: 1)
.card-header-actions	Action buttons in header
.card-title	Title text
.card-subtitle	Subtitle text
.card-body	Main content area with padding
.card-media	Image/video container
.card-media-wide	16:9 aspect ratio media
.card-media-square	1:1 aspect ratio media
.card-media-portrait	3:4 aspect ratio media
.card-media-overlay	Gradient overlay on media
.card-footer	Footer section
.card-footer-bordered	Footer with top border
.card-actions	Actions container (flex row)
.card-bordered	Border instead of shadow
.card-dash	Dashed border
.card-flat	No shadow, no radius
.card-elevated	Larger shadow
.card.glass	Glassmorphism effect
.card-side	Horizontal layout (image + content)
.card-image-full	Full background image with overlay content
.card-sm	Small size (less padding)
.card-lg	Large size (more padding)
.card-clickable	Hover lift effect + pointer cursor
.card-disabled	Disabled state (opacity 0.5)
.card-loading	Loading overlay
.card-grid	Auto-fill responsive grid
.card-grid-sm	Compact grid (200px min)
.color-*	Color composition (primary, secondary, etc.)