卡片元件變體矩陣

晨曦設計系統 <Card /> 元件的六種結構樣式並排對照。用上方控制列調整密度與強調層次，滑鼠停在任一變體上即可預覽對應的 props 組合。

內距 20px
外框
A · 扁平
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：放在有底色面板上的密集清單

B · 外框
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：象牙色底頁面上的預設內容卡

C · 浮起
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：可拖曳項目、浮層彈窗

D · 強調色條
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：置頂釘選或高優先項目

E · 嵌入填色
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：白色面板裡的次層巢狀卡片

F · 橫向
計畫

本週工作計畫

12 項任務 · 週五截止

第二季 產品路線圖

適用情境：緊湊列表、側邊欄項目

JSX — 將滑鼠停在上方任一變體
// 滑鼠停在卡片上即可預覽該變體的 props