COMPONENTS · CATEGORY KICKER

分類標 Kicker

五個分類,中文在前、英文在後,等寬大寫並拉開字距。

範例

LIVE EXAMPLE

藝術 Creator設計 Idea品牌 Brand城市 City觀點 Opinion

WHYKicker 是標題前的一聲輕咳——告訴讀者接下來要讀的是哪一種故事。

SWIFT

FLiPERKicker(.design) // 藝術 Creator · 設計 Idea · 品牌 Brand · 城市 City · 觀點 Opinion

CSS

.kicker { font: 500 11px ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }

WHEN TO USE

放在標題之前，提示藝術、設計、品牌、城市或觀點；分類標是內容資訊，不等於篩選器。

BEHAVIOR

狀態	行為 / 呈現
預設 Default	中文在前、英文在後；同一分類沿用同一對映，等寬小標。
滑過 Hover	靜態分類無 hover；真的可篩選時使用獨立控制，不假裝標籤可點。
焦點 Focus	靜態標籤不進入 Tab；分類篩選需可讀名稱、焦點與選取狀態。
停用 Disabled	分類缺漏時省略，不加「其他」冒充已知分類；篩選停用需說明理由。

GUARDRAILS

維持固定中英對映，用文字而非不同顏色辨認分類。

DON'T

每個分類換一個重點色，或把分類標做成無功能的按鈕。