COMPONENTS · COVER CARD
封面卡 Cover Card
每日精選的基本單位:封面圖、分類 kicker、期號、宋體標題、細線、署名。
範例
LIVE EXAMPLE
設計 Idea128406
在清晨的工作室裡,重新學會觀看
林以晴｜設計師的日常
城市 City128391
城市的縫隙裡,藏著下一個故事
陳柏宇｜城市漫遊
WHY它是整本封面的縮影——在列表裡,每張卡都是一張小封面。
結構
SWIFT
FLiPERCoverCard(post: post)
// image → kicker + codeMark → serif title → hairline → bylineWHEN TO USE
何時使用
用於每日精選、文章列表與收藏；每張卡只表達一篇文章，不在卡內嵌另一張卡或多組主要操作。
BEHAVIOR
狀態與互動
| 狀態 | 行為 / 呈現 |
|---|---|
| 預設 Default | 圖片 → kicker + 期號 → 宋體標題 → 細線 → 署名；圖片固定 4:3。 |
| 滑過 Hover | 靜態範例無 hover；接上文章連結後以標題底線或邊線回饋，不改圖片色調。 |
| 焦點 Focus | 若整張卡可開啟文章，只建立一個主連結焦點；不要重複可點巢狀連結。 |
| 停用 Disabled | 文章不可讀時保留標題與明確狀態文字，取消連結；不只把卡片變灰。 |
GUARDRAILS
使用邊界
DO
長標題自然換行；保留相同比例圖片與同一套編輯層級。
DON'T
文字覆蓋照片、橘色鋪底、卡片套卡片，或只用照片傳達文章標題。