設計大綱

早安！今天來設計痛點，這邊我想要做三欄式，列出三個他們目前主要可能會遇到的問題，再加上圖片，讓使用者有感到身受的感覺。另外，因為Grid system共有12欄，所以三欄式的分配下剛剛好每個卡片佔4欄。標題的部分，就以水平置中就好，另外再幫它加個highlight作為裝飾。

步驟

標題

1. 與上一個區塊(Header)的margin距離96px
2. 在置中的位置輸入標題
3. 文字大小為40px（Bootstrap 5的h1大小）
4. 文字字重為Bold
5. 文字顏色為Primary（#9B3C05）

標題的Highlight

1. 在標題下方加個highlight裝飾
2. 畫一個長方形
3. 長度和高度跟標題一樣就好（好隨性哈哈哈哈哈）
4. 長方形的顏色用Primary(9B3C05)＋16%的透明度

圖片與內容

由於卡片是三欄式，所以我們從最左開始畫！

1. 把第一張痛點的圖片拉進來，並縮放成四欄寬，高度以4:3的比例去調整
2. 在圖片下方距離24px，再輸入文案內容
3. 內容字體大小為16px（Bootstrap 5 p的大小）
4. 內容字重為Normal
5. 內容字體顏色為先前選好的Text(#707070)

完成剩下的兩個卡片

1. 把第一個完成的卡片複製貼上
2. 再把圖片和文案修改一下就完成了

結論

今天這個區塊其實真的不難實作，畢竟就是每個卡片都在4個裡欄畫出來而已，主要是注意Margin、Padding、Font-size、Font-weight、Text-color。另外要注意的是， 區塊的數量 與 欄數 是息息相關的，所以在規劃時可以先想好。再來是 字數、字行，通常會建議文案剛剛好 3行 就好，不然字數太多，會讓使用者覺得太冗長不想看，因此想文案也是另類有挑戰的事情唷！
那明天再來實作下一個區塊吧！