Card
Installation
import { Card } from "@olab/components";Overview
頁面上的內容容器：一層底色、一圈 1px 邊框、20px 圓角與內距。沒有尺寸或樣式變體，所有卡片長同一個樣子。
Card 本身不是按鈕。開啟 hover 後只會換邊框顏色，用來提示「整張卡可以點」；真正的點擊行為由卡片裡的連結或按鈕負責。
Interactive Demo
TOGGLE hoverEnabled — hover the card to see border highlight
Sample Card
Default 1px border + rounded-2xl + p-5. hoverEnabled toggles a brand-colored border on hover.
State Matrix
STATIC SNAPSHOT — hover is simulated with the same token
hoverEnabled = false
hoverEnabled = true (hover me)
hover (simulated)
Examples
MARKET-STYLE CARD
Will BTC close above $100K by year-end?
Vol. $72.4KSpec
| Part | Value | Source class |
|---|---|---|
| Background | surface | bg-primary |
| Border | 1px solid | border border-secondary |
| Border · hover | brand（僅 hoverEnabled） | hover:border-[var(--color-bg-brand-solid)]! |
| Radius | 20px | rounded-2xl |
| Padding | 20px（四邊） | p-5 |
| Shadow | none | |
| Transition | 150ms ease-out | transition-normal |
數值為 2026-06-10 在 dark 模式下的實測（getComputedStyle）；source class 對照目前的元件原始碼，色票隨目前的 dark / light 模式即時解析。完整量測、狀態細節與已知不一致見 live-ds-spec/card.md。
Usage
Do
- 當作頁面上一塊內容的外框，例如一張 market 卡、一塊分析模組。
- 整張卡可以點時才開 hoverEnabled，並用覆蓋整卡的連結承接點擊。
- 卡片密度不同時，調整的是卡片裡的內容，不是 Card 的內距。
Don't
- 不要在 Card 本身掛 onClick 當按鈕用；它沒有 pressed、focus、disabled 狀態。
- 不要用 className 改圓角、內距或邊框色來做「另一種卡片」；需要新樣子應該先在元件層定義。
- 不要幫 Card 加陰影；系統目前沒有卡片的 elevation 階。
Links
- Measured spec
- live-ds-spec/card.md