昨天我們談到按鈕元件，今天來做另一個常見的元件：卡片 (Card)。
卡片是網站裡最常用的資訊展示方式，如：商品列表、部落格文章、會員資料等，甚至活動宣傳展示。
一個好的卡片設計，能同時 美觀、易讀、可複用
也能幫助使用者更快找到需要的資訊

1. 卡片的基本結構

先從 HTML 開始：

<div class="card">
  <img src="product.jpg" alt="商品圖片" class="card-img">
  <div class="card-content">
    <h3 class="card-title">商品名稱</h3>
    <p class="card-description">商品介紹</p>
    <button class="card-btn">立即購買</button>
  </div>
</div>

結構分為三塊：

• 圖片區域 (.card-img)
• 內容區 (.card-content)：標題、描述
• 操作區 (.card-btn)：按鈕

2. 基礎樣式設計 (CSS)

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  background-color: #fff;
  transition: transform 0.2s ease-in-out;
}

.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 圖片自動裁切，避免變形 */
}

.card-content {
  padding: 17px;
}

.card-title {
  font-size: 18px;
  margin: 0 0 8px;
}

.card-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
}

.card-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.card-btn:hover {
  background-color: #0056b3;
}

3. 讓卡片有互動感 (Hover 效果)

卡片不是死的，它應該給使用者「被點擊」的感覺。
加上 hover 效果(CSS)：

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);<!-- 陰影 -->
}

當滑鼠移上去時，卡片會微微上浮、陰影變深，給人「可互動」的感覺

4. RWD (Responsive Web Design) - 多張卡片並排

通常卡片不是一張，而是一整排。
用 flexbox 或 grid 來做：
HTML

<div class="card-container">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

CSS

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
    max-width: 400px;
  }
}

• flex-wrap: wrap → 超過寬度會自動換行
• 媒體查詢 (@media) → 在手機上以單欄顯示

為什麼要元件化卡片？

• 一致性：網站商品列表如果都長一樣，使用者不容易辨識
• 維護性高：只需調整一次 .card，整站卡片可以一次更新
• JS 友好：有結構化 class，JS 也能輕鬆抓取，動態生成更多卡片

學習心得

相較於單純的按鈕，卡片更需要兼顧排版與資訊層次，因為它不僅要美觀，還要讓使用者能快速理解核心內容。設計時要注意結構化思考，例如把圖片區內容區操作區切分清楚，這樣維護與重複利用會更加方便。做卡片雖然比做按鈕更複雜一點，畢竟它有更多元素組合，所以如果想將元素更好的運用，就需要更多的練習，還需要練排版、結構化思考等等，還有很多可以學習的地方。