Card

Displays a card with header, content, and footer.

Login to your account

Enter your details below to login to your account

<div class="card w-full">
  <header>
    <h2>Login to your account</h2>
    <p>Enter your details below to login to your account</p>
  </header>
  <section>
    <form class="form grid gap-6">
      <div class="grid gap-2">
        <label for="demo-card-form-email">Email</label>
        <input type="email" id="demo-card-form-email">
      </div>
      <div class="grid gap-2">
        <div class="flex items-center gap-2">
          <label for="demo-card-form-password">Password</label>
          <a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">Forgot your password?</a>
        </div>
        <input type="password" id="demo-card-form-password">
      </div>
    </form>
  </section>
  <footer class="flex flex-col items-center gap-2">
    <button type="button" class="btn w-full">Login</button>
    <button type="button" class="btn-outline w-full">Login with Google</button>
    <p class="mt-4 text-center text-sm">Don't have an account? <a href="#" class="underline-offset-4 hover:underline">Sign up</a></p>
  </footer>
</div>

Usage

Add the card class to any element and then define any of the children elements:

A <header> for the card header, which can contain a <h2> for the title and a <p> for the description.
A <section> for the card content.
A <footer> for the card footer.

<div class="card">
  <header>
    <h2>Card Title</h2>
    <p>Card Description</p>
  </header>
  <section>
    <p>Card Content</p>
  </section>
  <footer>
    <p>Card Footer</p>
  </footer>
</div>

Examples

With content and footer

Meeting Notes

Transcript from the meeting with the client.

Client requested dashboard redesign with focus on mobile responsiveness.

New analytics widgets for daily/weekly metrics
Simplified navigation menu
Dark mode support
Timeline: 6 weeks
Follow-up meeting scheduled for next Tuesday

<div class="card">
  <header>
    <h2>Meeting Notes</h2>
    <p>Transcript from the meeting with the client.</p>
  </header>
  <section class="text-sm">
    <p>Client requested dashboard redesign with focus on mobile responsiveness.</p>
    <ol class="mt-4 flex list-decimal flex-col gap-2 pl-6">
      <li>New analytics widgets for daily/weekly metrics</li>
      <li>Simplified navigation menu</li>
      <li>Dark mode support</li>
      <li>Timeline: 6 weeks</li>
      <li>Follow-up meeting scheduled for next Tuesday</li>
    </ol>
  </section>
  <footer class="flex items-center">
    <div class="flex -space-x-2 [&_img]:ring-card [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
      <img alt="@hunvreus" src="https://github.com/hunvreus.png">
      <img alt="@shadcn" src="https://github.com/shadcn.png">
      <img alt="@adamwathan" src="https://github.com/adamwathan.png">
    </div>
  </footer>
</div>

With image

Is this an image?

This is a card with an image.

<div class="card">
  <header>
    <h2>Is this an image?</h2>
    <p>This is a card with an image.</p>
  </header>
  <section class="px-0">
    <img
      alt="Photo by Drew Beamer"
      loading="lazy"
      width="500"
      height="500"
      class="aspect-video object-cover" style="color:transparent"
      srcset="
        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=640&q=75 1x,
        https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75 2x
      "
      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80&w=1080&q=75"
    />
  </section>
  <footer class="flex items-center gap-2">
    <span class="badge-outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4v16" /><path d="M2 8h18a2 2 0 0 1 2 2v10" /><path d="M2 17h20" /><path d="M6 8v9" /></svg>
      1
    </span>
    <span class="badge-outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4 8 6" /><path d="M17 19v2" /><path d="M2 12h20" /><path d="M7 19v2" /><path d="M9 5 7.621 3.621A2.121 2.121 0 0 0 4 5v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5" /></svg>
      2
    </span>
    <span class="badge-outline">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 8 6-3-6-3v10" /><path d="m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12" /><path d="m6.49 12.85 11.02 6.3" /><path d="M17.51 12.85 6.5 19.15" /></svg>
      350m²
    </span>
    <span class="ml-auto font-medium tabular-nums">
      $135,000
    </span>
  </footer>
</div>