今天讓卡片更有「內容層次」與「狀態」~

在網頁設計中，卡片並不只是單純的資訊容器，它還需要能夠表達重點訊息和不同情境，這在昨天也有簡單提到。。

例如：有些商品需要強調促銷，有些則需要告訴使用者目前已經售完。如果沒有層次與狀態設計，使用者就可能在第一眼時錯過重要資訊。因此，加上標籤或狀態其實是提升體驗的必要做法，也是讓介面更清晰的方法。

1. 標籤 (Tag/Badge)

商品常常會有「新品」「特價」的小標籤，HTML 可以這樣加：

<div class="card">
  <div class="card-badge">新品</div>
  <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>

CSS

.card {
  position: relative;
}

.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #ff4757;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
}

標籤會浮在圖片上方，增加訊息傳達

2. 卡片狀態 (Active / Disabled)

有些商品「售完」需要禁用，CSS 可以做一個 .card.disabled 狀態：

.card.disabled {
  opacity: 0.6;
  pointer-events: none;
}
.card.disabled .card-btn {
  background-color: #ccc;
}

這樣就能讓 JS 之後控制 .classList.add("disabled")時，能實現狀態切換

學習心得

當卡片多了標籤與狀態，就會發現 HTML、CSS 在「命名」與「結構」上要有規劃，這也是元件化設計的精神。透過把功能分成明確的部分，未來要改版或加新功能時，就能輕鬆維護與擴充。今天的進階練習也讓我體會到，設計不只是做出漂亮的外觀，更是透過層次感與狀態傳遞資訊，這才是卡片元件存在的價值。之後可以進一步練習卡片的互動效果與不同應用情境等等，來讓卡片或者其它不同元件，都能成為一個可以重複利用的前端基礎元件。