Card

Cần container cho nội dung?
├─ Nhóm thông tin có cấu trúc (title, body, actions) → Card
│   ├─ Click toàn card → Card (interactive/clickable)
│   ├─ Có actions riêng (buttons) → Card with Footer
│   └─ Chỉ hiển thị → Card (default)
├─ Thông báo trạng thái → Alert
├─ Content overlay → Modal
├─ Section lớn trên page → Section element
└─ Tooltip khi hover → Tooltip

<!-- HTML skeleton with data-slot -->
<article class="card" data-slot="card">
  <div class="slot-header" data-slot="card-header">
    <h3 class="card-title" data-slot="card-title">Title</h3>
    <p class="card-text" data-slot="card-description">Description</p>
  </div>
  <div class="slot-body" data-slot="card-content">
    <!-- content -->
  </div>
  <div class="slot-footer" data-slot="card-footer">
    <button class="btn">Action</button>
  </div>
</article>

interface CardProps {
  /** Visual variant */
  variant?: 'default' | 'outline' | 'ghost' | 'subtle' | 'elevated' | 'inverse' | 'interactive';
  /** Padding size */
  padding?: 'none' | 'sm' | 'md' | 'lg';
  /** Clickable card (wraps in <a> or adds onClick) */
  href?: string;
  onClick?: () => void;
  /** Full width */
  fullWidth?: boolean;
  children: ReactNode;
}

interface CardHeaderProps {
  /** Title text */
  title: string;
  /** Description */
  description?: string;
  /** Action element (button, icon) góc phải */
  action?: ReactNode;
}

/* SAI — cùng grid level mà padding khác nhau → lệch visual alignment */
.card-stat { padding: var(--group-padding-small); }   /* 16px */
.card-chart { padding: var(--section-padding-default); } /* 24px */

/* ĐÚNG — tất cả L1 cards cùng padding */
.card-stat,
.card-chart { padding: var(--section-padding-default); } /* 24px */

/* ĐÚNG — L2 nested card giảm padding */
.card-chart .card-inner { padding: var(--group-padding-default); } /* 16px */

{/* Basic card */}
<Card>
  <Card.Header title="Giao dịch gần đây" description="5 giao dịch mới nhất" />
  <Card.Body>{/* content */}</Card.Body>
  <Card.Footer>
    <Button variant="ghost">Xem tất cả</Button>
  </Card.Footer>
</Card>

{/* Interactive card */}
<Card variant="interactive" href="/transactions/123">
  <Card.Image src="/hero.jpg" alt="..." />
  <Card.Header title="Thanh toán hoá đơn điện" />
  <Card.Body>
    <Text role="body-sm" color="muted">500.000đ — 26/02/2026</Text>
  </Card.Body>
</Card>

{/* Inverse card */}
<Card variant="inverse" padding="lg">
  <Text role="headline-sm" color="inverse">Premium Account</Text>
</Card>

.card-stat {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--section-radius-default);
    padding: var(--section-padding-default);
    display: flex;
    flex-direction: column;
    gap: var(--comp-stack-gap-small);
}

.card-stat__label {
    font-size: var(--text-style-body-small-font-size);
    color: var(--muted-foreground);
}

.card-stat__value {
    font-size: var(--text-style-heading-3-font-size);
    font-weight: var(--font-weight-bold);
    color: var(--foreground);
}

.card-stat__trend {
    font-size: var(--text-style-body-small-font-size);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--comp-inline-gap-small);
}

.card-stat__trend--up { color: var(--success); }
.card-stat__trend--down { color: var(--destructive); }

<div class="card-stat">
    <div class="card-stat__label">Total Balance</div>
    <div class="card-stat__value">12,500,000đ</div>
    <div class="card-stat__trend card-stat__trend--up">
        <svg><!-- trending-up icon --></svg>
        +12.5%
    </div>
</div>