Cards

Content container with shadow. Size variants include the base .card styles + a max-width constraint.

.card + .card-body (no max-width)

Card

No max-width — stretches to its container.

<div class="card">
  <div class="card-body">
    Content
  </div>
</div>

.card .card-sm — max-w-sm (384px)

Small card

Good for narrow widgets and callouts.

<div class="card card-sm">
  <div class="card-body">Content</div>
</div>

.card .card-md — max-w-md (448px)

Medium card

Good for auth forms and login dialogs.

<div class="card card-md">
  <div class="card-body">Content</div>
</div>

.card .card-lg — max-w-lg (512px)

Large card

Wider forms and content panels.

<div class="card card-lg">
  <div class="card-body">Content</div>
</div>

Media card — combine .card with an image and .card-body

Desk with a laptop and notebook
Product 4 min read

Planning a personal dashboard

Use cards for small content blocks, notes, and activity summaries.

<article class="card card-md">
  <img src="cover.jpg" alt="" class="aspect-video w-full object-cover" />
  <div class="card-body">
    <span class="badge badge-primary">Product</span>
    <h3 class="h4">Planning a personal dashboard</h3>
    <p class="mt-1 text-sm text-secondary-500">Use cards for small content blocks.</p>
  </div>
</article>

Action card — header, body, and footer actions

Team invite

Invite a collaborator to this workspace.

<section class="card card-md">
  <div class="border-b border-gray-100 px-6 py-4">
    <h3 class="h5">Team invite</h3>
    <p class="mt-1 text-sm text-secondary-400">Invite a collaborator.</p>
  </div>
  <div class="card-body">
    <input type="email" class="form-input" />
  </div>
  <div class="flex justify-end gap-3 bg-secondary-50 px-6 py-3">
    <button class="btn btn-secondary">Cancel</button>
    <button class="btn btn-primary">Send invite</button>
  </div>
</section>

List card — grouped records or settings

Recent activity

  • Backup completed

    Database snapshot finished 12 minutes ago.

  • New signup

    A user joined the private beta.

  • Invoice pending

    Payment retry is scheduled for tomorrow.

<div class="card card-md">
  <div class="border-b border-gray-100 px-6 py-4">
    <h3 class="h5">Recent activity</h3>
  </div>
  <ul class="divide-y divide-gray-100">
    <li class="flex items-start gap-3 px-6 py-4">
      <span class="mt-1 badge-dot bg-green-500"></span>
      <div>
        <p class="text-sm font-medium text-secondary-900">Backup completed</p>
        <p class="mt-0.5 text-sm text-secondary-400">Database snapshot finished.</p>
      </div>
    </li>
  </ul>
</div>