Card

Content container with header, body, and footer regions. Use <div> for layout grouping or <article> for standalone content.

Component Skill — components/card/component-skill.md

Native basis

<div> for layout grouping. <article> for standalone self-contained content.

Web Platform APIs

CSS Container Queries (@container) aspect-ratio

Classes

.card .card-header .card-title .card-description .card-content .card-footer

Notes

• Card is a container pattern — its children define its purpose

• Avoid deeply nesting cards (card inside card) — use --muted surface instead

• For interactive cards (click to navigate), wrap in <a> and apply card classes to it

• card-footer uses padding-top: 0 to avoid double-spacing with card-content

• For a card grid, use CSS Grid on the parent — the card itself has no layout opinion

Standard

Header, content with form fields, and footer with actions.

Create project

Deploy your new project in one click.

Name

Description

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Create project</h3>
    <p class="card-description">Deploy your new project in one click.</p>
  </div>
  <div class="card-content">
    <div style="display:flex;flex-direction:column;gap:1rem;">
      <div>
        <label class="label" for="name">Name</label>
        <input class="input" id="name" type="text" placeholder="My project">
      </div>
      <div>
        <label class="label" for="desc">Description</label>
        <input class="input" id="desc" type="text" placeholder="Optional description">
      </div>
    </div>
  </div>
  <div class="card-footer" style="justify-content:space-between;">
    <button class="btn" data-variant="outline">Cancel</button>
    <button class="btn" data-variant="default">Deploy</button>
  </div>
</div>

Metric

Compact card for dashboard stats. Header row with icon.

Total Revenue

$45,231

+20.1% from last month

<div class="card">
  <div class="card-header"
       style="flex-direction:row;align-items:center;
              justify-content:space-between;padding-bottom:0.5rem;">
    <p class="card-description"
       style="font-weight:500;color:var(--foreground);
              font-size:0.8125rem;">Total Revenue</p>
    <svg width="14" height="14" ...>...</svg>
  </div>
  <div class="card-content" style="padding-top:0.25rem;">
    <p style="font-size:1.625rem;font-weight:700;margin:0;
              letter-spacing:-0.025em;">$45,231</p>
    <p class="card-description"
       style="font-size:0.75rem;margin-top:0.25rem;">+20.1% from last month</p>
  </div>
</div>

With Image

Use <article> for standalone content. Image as first child.

Modern Design

Exploring minimal aesthetics through form and color.

A deep dive into the principles that guide contemporary visual design.

<article class="card">
  <img src="..." alt="..."
       style="width:100%;aspect-ratio:16/9;
              object-fit:cover;display:block;">
  <div class="card-header">
    <h3 class="card-title">Modern Design</h3>
    <p class="card-description">Exploring minimal aesthetics.</p>
  </div>
  <div class="card-content" style="padding-top:0;">
    <p style="margin:0;font-size:0.875rem;
              color:var(--muted-foreground);">Body text...</p>
  </div>
  <div class="card-footer">
    <button class="btn" data-variant="default" data-size="sm">Read more</button>
    <button class="btn" data-variant="ghost" data-size="sm">Bookmark</button>
  </div>
</article>

Header Action

Action button in the header for settings or overflow menus.

Team Members

Manage who has access.

Cody Lindley

Owner

Jane Doe

Editor

<div class="card">
  <div class="card-header"
       style="flex-direction:row;align-items:center;
              justify-content:space-between;">
    <div>
      <h3 class="card-title">Team Members</h3>
      <p class="card-description">Manage who has access.</p>
    </div>
    <button class="btn" data-variant="ghost" data-size="icon"
            aria-label="More options">
      <svg aria-hidden="true" ...>...</svg>
    </button>
  </div>
  <div class="card-content">
    <!-- list items -->
  </div>
  <div class="card-footer"
       style="padding-top:1rem;border-top:1px solid var(--border);">
    <button class="btn" data-variant="outline" data-size="sm"
            style="width:100%;">
      <svg aria-hidden="true" ...>...</svg>
      Invite member
    </button>
  </div>
</div>

CSS view file

/* -- Card component -------------------------------------------- */

@layer components {
  .card {
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    container-type: inline-size;
  }

  .card-header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.5rem;
    padding-bottom: 0;
  }

  .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
  }

  .card-description {
    font-size: 0.875rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.6;
  }

  .card-content {
    padding: 1.5rem;
  }

  .card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem;
    padding-top: 0;
  }

  /* -- Container query: compact card in narrow containers -- */
  @container (max-width: 280px) {
    .card-header { padding: 1rem; padding-bottom: 0; }
    .card-content { padding: 1rem; }
    .card-footer { padding: 1rem; padding-top: 0; }
    .card-title { font-size: 1rem; }
  }
}