流程步驟卡片（StepCard）

這是什麼？

用一組卡片依序呈現有先後順序的流程（例如：投保後如何兌換服務、理賠申請步驟）。每張卡片可放圖示、說明文字，以及一個可點擊的按鈕連結。連續嵌入的多張卡片，網站會自動排成整齊的格線版面並依序編號 Step01、Step02……

什麼時候用？

• 需要說明一個有先後順序的操作流程（例如：兌換碼使用步驟、投保流程、理賠申請步驟）
• 每個步驟需要搭配一個外部連結或按鈕（例如登入頁、外部服務平台）
• 想用比純文字條列更醒目的視覺卡片呈現流程

---

欄位說明

欄位名稱	必填	類型	說明	限制
步驟標籤	❌	文字	顯示在卡片右上角的編號文字	留空即可，系統會依卡片順序自動產生 Step01、Step02…，只有需要自訂文字時才填
圖示名稱	❌	文字	卡片中間顯示的圖示	見下方「圖示名稱怎麼找」
卡片內文	✅	長文字	卡片主要說明文字	建議 60 字以內，卡片高度固定，太長會被裁掉
按鈕文字	❌	文字	卡片底部按鈕上顯示的文字	留空則不顯示按鈕
連結網址	❌	文字	按鈕點擊後的目標網址	需符合 http/https 格式

⚠️ 此元件沒有標題欄位。整個流程的標題（例如「二、IC Care兌換流程」）要用文章 Rich Text 中的 Heading 3 直接打出來，寫在第一張卡片前面——這樣標題才會出現在文章目錄（TOC）中。

---

⚠️ 排版規則（核心痛點）

流程步驟卡片沒有「容器」或「群組」元件，跟 Table、FAQ 區塊的用法不一樣：

• 在文章 Rich Text 中連續嵌入多張 StepCard，系統會自動把它們排成一組卡片版面（一般文章寬度下為 2 欄）
• 如果兩張卡片中間插入了其他內容（例如一段文字、其他元件），會被拆成兩組獨立的版面
• 因此建立同一組流程時，要一次把所有步驟連續嵌入完，中間不要穿插其他段落

---

圖示名稱怎麼找

到 Web Awesome 圖示庫 搜尋，複製圖示名稱貼到「圖示名稱」欄位。

⚠️ 請挑選標示為 Free 的圖示，Pro 專屬圖示填了不會顯示（也不會顯示錯誤訊息）。

常見流程情境對應的圖示名稱範例：

情境	圖示名稱
收到通知信、Email	envelope
註冊、登入帳號	user
填寫資料、簽署	pen-nib
手機操作、APP	mobile-screen-button

---

操作步驟

1. 開啟文章，在「文章內容」Rich Text 編輯器中，先打一個 Heading 3 標題（該流程的名稱，例如「二、IC Care兌換流程」）
2. 將游標移至標題下方，點擊工具列的 + 按鈕 → 選擇「Create new entry and link」→ 選「StepCard」
3. 填寫「圖示名稱」「卡片內文」，需要按鈕則填「按鈕文字」與「連結網址」
4. 點擊「Save draft」，卡片會嵌入文章
5. 游標接續在剛剛那張卡片後面（不要換行、不要插入文字），重複步驟 2～4 建立下一張卡片
6. 全部步驟都建立完成後，可在最後加一個提示框（TipBox），類型選「重要資訊」，放整個流程的注意事項

補充：獨立建立後再嵌入

若需要提前備好卡片再使用：

1. 進入 Contentful → Content → 點擊「Add entry」→ 選擇「StepCard」
2. 填寫欄位後點擊「Save draft」
3. 在文章 Rich Text 中點擊 + → 選「Embed existing entry」→ 搜尋並選入

用這個方式時要特別小心：多張卡片要依序、連續選入同一個位置，中間不要被其他內容打斷，否則會如上方所述被拆成兩組版面。

---

填完長這樣

桌面版（兩欄）：

手機版（單欄）：

---

⚠️ 常見錯誤

卡片中間夾了其他內容 兩張卡片之間如果插入了段落或其他元件，版面會被拆成兩組獨立的卡片群組，不會連成一整片。

卡片內文太長 卡片高度固定，字數過多會被裁掉看不到。「卡片內文」建議控制在 60 字以內，發布前務必到測試環境確認顯示完整。

圖示名稱打錯或用了 Pro 專屬圖示 圖示不會顯示（不會報錯，也不影響卡片其他內容），請到 Web Awesome 圖示庫 確認名稱正確，且該圖示標示為 Free。

忘記另外打 Heading 3 標題 StepCard 本身沒有標題欄位，忘記在前面打 Heading 3 的話，這組卡片上方就不會有標題，也不會出現在文章目錄中。

「步驟標籤」故意留空卻覺得「怎麼沒有編號」 這是正常的，留空會由系統自動編號，不是漏填。只有需要顯示自訂文字（而非 Step01 這種格式）時才需要填寫。