ArticleFormat 元件家族 Demo

四個 breakpoint（375/600/1024/1440）皆為 responsive class，縮放瀏覽器視窗檢視。細節見 .claude/task/client-v2/components/article-format.md 與 .claude/task/client-v2/typography-from-article-format.md。

ArticleHeadline — level 1 / 2 / 3

標題文字（Headline 1）

標題文字（Headline 2）

標題文字（Headline 3）

ArticleHeadline — marginTop / marginBottom

灰底區塊僅供對照間距，非元件本身樣式

上下皆有間距的標題

ArticleParagraph

設計師運用玻璃，使透明感貫穿整個挑高的空間，讓透明不只有一種層次變化。透過材質與環境的互動，結合了綠園道的光、影、綠，營造店鋪與自然環境共同變化的氛圍。透過光，捕捉了布料和設計細節的變化，讓入店的每一位顧客，都能體驗商品本身的每一絲純粹。

ArticleList — bullet / number，含 level=2 縮排（巢狀）

・會員起點：完成註冊並綁定電子發票載具
・滿額回饋：單筆消費滿 3,000 元贈送 100 點
。點數將於次月 5 日入帳
。點數有效期限一年

1.確認商品吊牌與包裝是否完整
2.登入會員中心填寫退貨申請單
3.將商品寄回指定退貨地址

ArticleQuote

本月選字為「熹」，意指天色微明，旭日昇起的意象。隨著新年的第一道日出昇起，疫情帶來的不安也隨著黑暗褪去，人們日常中找到新的平衡，邁向全新的開始。

ArticleHyperLink

行內連結（node 62:1020），可搭配 ArticleParagraph 內文使用；亦可獨立展示

更多詳情請參閱君梵官網連結，或直接聯繫客服人員。

ArticleImage — Single / Two / Three

node 145:1544 / 15202:19130 / 15202:19389，caption 為擴充欄位（非 Figma 規格）

單張圖片（3:2 → 實測 16:9）

左圖說明

右圖說明

ArticleDivider

Figma Article Format 頁無獨立 Divider 元件，此為依 divider token 的最小實作

上半段內容。

下半段內容。

Table

E-4 退貨須知頁的退款費用比例表範例

條件	取消／退貨時間	退款比例
收到商品 7 日內	未拆封、吊牌完整	100%
收到商品 8-14 日	未拆封、吊牌完整	80%
收到商品 15-30 日	未拆封、吊牌完整	50%
收到商品 31 日以上	－	不受理

ArticleFormat — 模擬靜態頁完整文章（對應 E-4 退貨須知的排版節奏）

一、退貨受理期限

商品自送達之次日起 7 日內，得不附理由退貨。逾期恕不受理，敬請見諒。

・商品須保持全新狀態，吊牌、包裝完整未拆封
・贈品、附件須一併寄回

二、退款費用比例

依商品收到後至申請退貨的天數，退款比例如下表：

條件	取消／退貨時間	退款比例
收到商品 7 日內	未拆封、吊牌完整	100%
收到商品 8-14 日	未拆封、吊牌完整	80%
收到商品 15-30 日	未拆封、吊牌完整	50%
收到商品 31 日以上	－	不受理

三、常見問題

海外訂單是否適用同樣的退貨規則？

海外訂單退貨規則與國內相同，惟運費由消費者自行負擔，詳情請參閱選購說明頁。

提醒：特殊訂製商品（含客製化繡字、改尺寸等服務）一經下單即不接受退換貨申請。