KPI 指標列
kpi-stat-row3–4 張等寬 stat 卡：標籤 + 主數值 + delta badge。
常用情境
- Dashboard 首屏 3–6 個核心指標
- 各指標重要性相近
- 5 秒內掃描整體健康度
- 行動裝置堆疊單欄
參考：Stripe · Mercury · Brex · Plaid
卡片是「邊框／圓角／陰影 + 內距」的內容容器，但 KPI 卡、互動卡、媒體卡、列表項各有畫法，常被混用或塞太多東西。這章把類型選用、整卡可點的互動回饋、與破壞性操作的擺放講清楚。當你要排一組卡片、或猶豫整卡能不能點時，就翻這頁對一下。
這是什麼
卡片基底樣式，會隨右上角風格 preset 切換邊框、背景與陰影（填色、浮起、線框等）。
什麼時候用
任何內容區塊、公告、設定段落都能用；依產品調性選 Notion 填色、HubSpot 浮起或 Linear 線框。
這是什麼
KPI 或 Stat 卡片：小標籤、大數字、漲跌 delta。
什麼時候用
Dashboard 與分析頁的快速指標掃描；一卡一 KPI。
這是什麼
整張卡片可點擊；hover 時邊框或陰影加深。
什麼時候用
導向詳情、建立新項目的入口；卡內不要再放 primary 按鈕，避免雙重主行動。
這是什麼
媒體卡片：上方縮圖、標題、中繼資料與狀態 badge。
什麼時候用
檔案、文件、專案預覽列表；Grid 檢視常用。
這是什麼
列表項卡片：左側頭像或圖示、中間標題與副標、右側 chevron。
什麼時候用
人員、資源、設定項的垂直列表；整列可點進詳情。
這是什麼
Header + Body + Footer 三段式卡片結構。
什麼時候用
設定頁分組、表單區塊、需標題列與底部按鈕的內容。
這是什麼
圖示標頭 KPI 卡：icon + 標籤、大數值、底部 sparkline 趨勢條。
什麼時候用
Supabase 式 Database／Auth widget、需要圖示辨識的技術指標。
這是什麼
對比上期 KPI 卡：大數值、漲跌箭頭 delta、「vs 上期」基準、面積 sparkline；綠漲紅跌。
什麼時候用
Dashboard 與分析頁主力指標（Whop、Stripe、Navattic）；需同時看數值與短期趨勢時。
18-accessibility）。33-charts。這是什麼
填色 tonal 卡片：淡色語意背景與細邊框。
什麼時候用
Onboarding 提示、分組摘要；對比柔和，關鍵警示改用 alert。
這是什麼
可自訂 widget 卡：標題列含 overflow 選單或 dismiss 按鈕。
什麼時候用
可拖曳排序的 dashboard tile（Whop、Trello）。
這是什麼
用量 meter 卡：方案標頭、線性進度條、剩餘文字與 CTA。
什麼時候用
Billing／usage 頁（Visitors、Apollo、Rox）；顯示配額與升級入口。
這是什麼
Mobbin SaaS 風格的 Card／KPI 元件組合參考。
什麼時候用
選版或對照時速查；完整 token 定義見 lib/style-patterns。
這是什麼
Arcade 五欄 KPI 卡搭配升降 delta；對照本站卡片樣式 token。
什麼時候用
卡片章節示範 KPI 組合與視覺 token 時；與儀表板首屏 KPI 列同邏輯。
這是什麼
三欄定價卡，上方分段控制切換個人／團隊方案，中間方案可強調推薦。
什麼時候用
產品方案頁或升級流程；方案差異用卡片並排比較最清楚。
這是什麼
定價卡：方案名、價格、功能列表；可 highlighted 與 badge。
什麼時候用
定價頁、升級流程的方案並列比較。