Skies.uiCard 卡片
Skies.ui Card：Surface 與 Header／Content／Footer、compact、底部操作列；儀表板與確認式卡片範例。
Card 卡片
Skies.ui 的 Card 將 Surface（純背景／邊框／陰影）與 Header / Content / Footer（各自內距）拆開：預設用法是標題＋內文、不含 Footer；需要表單確認列時再組 Footer + Card.Actions。外層加 border-t 等裝飾時不會撞上「邊框畫在 padding 裡面」的問題。
預設用法
僅 Header + Content，常見於資訊卡、儀表板區塊。
主要內容放在這裡：圖表、列表、說明段落皆可；無需 Footer 時到 Content 為止即可。
import { Card } from "@skies-ui/ui";
export default function SimpleCard() {
return (
<Card.Surface className="max-w-md">
<Card.Header>
<Card.Title>專案概覽</Card.Title>
<Card.Description>本週建置與部署狀態摘要。</Card.Description>
</Card.Header>
<Card.Content>
<div className="text-sm text-muted-foreground leading-relaxed">
主要內容放在這裡。
</div>
</Card.Content>
</Card.Surface>
);
}變體：compact 內距
在 Card.Surface 設 variant="compact"，Header / Content / Footer 會改用較緊的內距（p-4 階層），適合側欄、列表內嵌卡。
<Card.Surface variant="compact" className="max-w-sm">
<Card.Header>
<Card.Title className="text-base">精簡標題</Card.Title>
<Card.Description>副標</Card.Description>
</Card.Header>
<Card.Content>…</Card.Content>
</Card.Surface>自訂內距
variant 只決定預設階層；Header / Content / Footer 的 className 會與預設合併，並以你傳入的 Tailwind class 為準（專案需使用會合併衝突的 cn，例如 Skies.ui 的 utils）。
<Card.Content className="px-8 py-6">完全自訂的 padding</Card.Content>若只有 Card.Content、沒有 Header，預設的 pt-3（與 Header 銜接時的上方留白）可能多餘，請加上 className="pt-0" 移除，或改用 p-4 等自訂整體內距。
變體：含 Footer 與操作
表單確認、對話框式卡片：Footer 左側輔助說明、右側 Card.Actions（次要動作在左、主要動作在右）。
主要內容放在這裡（表單欄位、列表等）。
儲存後仍可於 30 天內還原。
import { Button, Card } from "@skies-ui/ui";
export default function CardWithFooterActions() {
return (
<Card.Surface className="max-w-md">
<Card.Header>
<Card.Title>儲存變更</Card.Title>
<Card.Description>以下變更會套用到你的專案設定。</Card.Description>
</Card.Header>
<Card.Content>主要內容放在這裡。</Card.Content>
<Card.Footer 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>
<Card.Actions>
<Button variant="outline">取消</Button>
<Button>儲存</Button>
</Card.Actions>
</Card.Footer>
</Card.Surface>
);
}只有按鈕、沒有左側說明
將 Footer 改為靠右對齊即可：
<Card.Footer className="justify-end">
<Card.Actions className="ms-0">
<Button variant="outline">關閉</Button>
<Button>繼續</Button>
</Card.Actions>
</Card.Footer>Card.Actions 上的 sm:ms-auto 在僅有按鈕時可能多餘，可用 className="ms-0" 覆寫。
僅文字、不要頂部分隔線
Card.Footer 預設帶 border-t 以區隔內容與底部。若只要一行說明、不要線條：
<Card.Footer className="border-t-0 pt-0 text-[13px] text-muted-foreground">
僅供參考的提示文字
</Card.Footer>變體：頂部強調邊框
因為 Card.Surface 外層沒有 padding，裝飾用的 border-t 會貼在卡片真正的上緣，不會被內距「吃掉」。
將 border-t-4、border-t-primary 加在 Card.Surface 上即可。
內文區的 padding 仍由 Card.Content 負責，與頂邊裝飾分開。
需要協助？查看文件
import { Button, Card } from "@skies-ui/ui";
export default function CardWithTopAccent() {
return (
<Card.Surface className="border-t-4 border-t-primary max-w-md">
<Card.Header>
<Card.Title>帶頂部強調的卡片</Card.Title>
<Card.Description>裝飾邊框貼齊卡片上緣。</Card.Description>
</Card.Header>
<Card.Content>內文區塊。</Card.Content>
<Card.Footer className="flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div className="text-[13px] text-muted-foreground leading-relaxed">
說明文字
</div>
<Card.Actions>
<Button variant="ghost">稍後</Button>
<Button variant="destructive">刪除</Button>
</Card.Actions>
</Card.Footer>
</Card.Surface>
);
}為什麼要拆成 Surface？
在許多「整塊 Card 自帶 padding」的寫法裡，若在最外層加 border-t 當品牌色條，視覺上色條往往落在 padding 下方。Skies.ui 把邊框與背景留在 Card.Surface，把間距留在 Header / Content / Footer，預設與變體都能維持乾淨、少 hack。
結構 (Anatomy)
Card.Surface：最外層容器（背景、圓角、陰影、邊框）。本身無 padding。可選variant="default" | "compact"（影響子區塊預設內距）。Card.Header：頂部區塊，自帶 padding（隨variant變化）。Card.Title：標題。Card.Description：副標／說明。Card.Content：主內容，自帶 padding（隨variant；與 Header 橫向對齊）。Card.Footer：底部區塊；預設 頂部分隔線（border-t）、水平 padding 隨variant；小螢幕時頂部較貼分隔線、底部留白較寬，避免按鈕貼底；sm以上維持較均衡的上下內距。適合說明＋Card.Actions。Card.Actions：放在Footer內，包住按鈕群；justify-end+gap-2，小螢幕可換行；預設aria-label="Actions"（可覆寫）。
Button（與 Card 搭配）
按鈕的變體、尺寸與無障礙說明見專頁：Button 按鈕。卡片 Footer 的輔助說明建議使用 text-[13px] text-muted-foreground，與按鈕字級區隔。