Card 卡片

把相關內容包成一個可辨識的區塊。

在 Storybook 開啟 ↗

何時不要用

✅ 這樣做

內容成組且需要與周圍區隔（統計卡、設定區塊、清單項目）。

🚫 不要這樣

不要把整個頁面包在一張卡裡。全頁一張卡＝沒有卡，只是多了一圈邊框和內距。

卡片結構

本月資料

2024 年 2 月，截至今日

1,284

組成

Card / CardHeader / CardTitle / CardDescription / CardContent / CardFooter

全部可選。只需要一個容器時，直接用 Card 包住內容即可。

卡片不要巢狀超過一層

兩層以上的卡片邊框會讓人搞不清楚哪個層級才是重點。需要更多層次時改用分隔線或標題。

列印

卡片預設加 print-block（break-inside: avoid），避免一張卡被切成兩頁。 見 列印與匯出。

取用

npx shadcn@latest add https://kielchang.github.io/dooping-design-book/r/card.json