COMPONENTS · BYLINE
署名 Byline
格式固定為 name ｜ column。姓名用宋體,專欄用 muted 黑體,中間是全形直線「｜」。
範例
LIVE EXAMPLE
林以晴｜設計師的日常
陳柏宇｜城市漫遊
DO
使用全形「｜」(U+FF5C)作為分隔。
DON'T
使用半形 | 、斜線或「by」。
WHY作者是故事的主角之一;宋體給名字份量,灰色的專欄名退居背景。
程式碼
SWIFT
FLiPERByline(name: "林以晴", column: "設計師的日常")HTML
<p class="byline"><span class="name">林以晴</span>｜<span class="column">設計師的日常</span></p>WHEN TO USE
何時使用
用在文章標題之下、封面卡末尾與專欄列表；把作者與專欄視為不同層級，不拿它代替出版日期。
BEHAVIOR
狀態與互動
| 狀態 | 行為 / 呈現 |
|---|---|
| 預設 Default | 姓名宋體、專欄 muted 黑體，全形 ｜ 分隔；長名允許自然換行。 |
| 滑過 Hover | 靜態署名無 hover；若姓名連到作者頁，僅連結文字有底線回饋。 |
| 焦點 Focus | 只有真實作者連結進入 Tab 順序，保留 focus-visible 外框。 |
| 停用 Disabled | 靜態資訊沒有 disabled；作者未知時寫「FLiPER 編輯室」，不降低整列透明度。 |
GUARDRAILS
使用邊界
DO
保持 name ｜ column 與可讀對比；長名字完整顯示。
DON'T
加入 by、半形 |、斜線，或把作者名字截成無法辨認的縮寫。