Card 卡片

Skies.ui Card：根節點僅邊框／背景／圓角、無 padding；Header／Content／Footer 各自內距，外緣裝飾（如 border-t-4）貼齊卡片邊。size 密度、CardFooter + CardActions 表單確認列；儀表板與資訊卡。

範例與用法

僅標題與內文、不含 Footer，常見於資訊卡與儀表板區塊。

專案概覽

本週建置與部署狀態摘要。

主要內容放在這裡：圖表、列表、說明段落皆可；無需 Footer 時到 CardContent 為止即可。

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@skies-ui/ui";

export default function SimpleCard() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>專案概覽</CardTitle>
        <CardDescription>本週建置與部署狀態摘要。</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="text-sm text-muted-foreground leading-relaxed">
          主要內容放在這裡。
        </div>
      </CardContent>
    </Card>
  );
}

安裝

npx skies-ui@latest add card

見安裝與 CLI。

變體（`size`）

根節點 Card 可設 size="sm"，讓 Header / Content / Footer 一併使用較緊的內距（約 p-4 階層），適合側欄、列表內嵌卡。預設為 size="default"。

精簡標題

小尺寸區塊

內文較貼邊，仍與 Header 對齊。

<Card size="sm" className="max-w-sm">
  <CardHeader>
    <CardTitle className="text-base">精簡標題</CardTitle>
    <CardDescription>副標</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
</Card>

組合與常見版型

自訂內距

size 只決定預設階層；CardHeader / CardContent / CardFooter 的 className 會與預設合併（專案需使用會合併衝突的 cn）。

<CardContent className="px-8 py-6">完全自訂的 padding</CardContent>

若只有 CardContent、沒有 CardHeader，預設的 pt-3 可能多餘，請 className="pt-0" 或改用 p-4。

表單確認、對話框式卡片：Footer 左側輔助說明、右側 CardActions（次要動作在左、主要動作在右）。

儲存變更

以下變更會套用到你的專案設定。

主要內容放在這裡（表單欄位、列表等）。

儲存後仍可於 30 天內還原。

import {
  Button,
  Card,
  CardActions,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@skies-ui/ui";

export default function CardWithFooterActions() {
  return (
    <Card className="max-w-md">
      <CardHeader>
        <CardTitle>儲存變更</CardTitle>
        <CardDescription>以下變更會套用到你的專案設定。</CardDescription>
      </CardHeader>
      <CardContent>主要內容放在這裡。</CardContent>
      <CardFooter className="flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="text-[13px] text-muted-foreground leading-relaxed">
          儲存後仍可於 30 天內還原。
        </div>
        <CardActions>
          <Button variant="outline">取消</Button>
          <Button>儲存</Button>
        </CardActions>
      </CardFooter>
    </Card>
  );
}

僅按鈕、無左側說明：Footer justify-end，CardActions 可加 className="ms-0" 覆寫預設 sm:ms-auto。

僅文字、不要頂部分隔線：CardFooter className="border-t-0 pt-0 …"。

頂部強調邊框

將 border-t-4 border-t-primary 加在 Card 上即可；內文 padding 仍由 CardContent 負責。

帶頂部強調的卡片

將 border-t-4、border-t-primary 加在 Card 根節點上即可。

內文區的 padding 仍由 CardContent 負責，與頂邊裝飾分開。

需要協助？查看文件

組合結構（Anatomy）

Card：根容器（背景、圓角、陰影、邊框）。本身無 padding。可選 size="default" | "sm"。
CardHeader：頂部區塊與 padding（隨 size）。
CardTitle / CardDescription
CardContent：主內容區。
CardFooter：底部；預設 border-t；小螢幕底部留白加寬。
CardActions：置於 Footer 內，預設 aria-label="Actions"。

按鈕細節見 Button。Footer 輔助說明建議 text-[13px] text-muted-foreground。

API 參考

元件	說明
`Card`	根容器。props：`size?`: `"default"` \| `"sm"`；其餘 `div` 屬性。
`CardHeader`、`CardFooter`、`CardContent`	區塊容器；`className` 覆寫內距。
`CardTitle`、`CardDescription`	標題與副標。
`CardActions`	`aria-label?`，預設 `"Actions"`。