建立資訊卡

總覽

資訊卡會將一項相關內容或選項歸為一組。這是一種視覺模式，而非固定的語意或互動模型，因此請保留內容的意義，並使用符合其用途的原生互動。

規範

請分別為內容和互動選擇語意：

• 無論是否連結至目的地，都使用 <article> 做為資訊卡根層級；
• 使用原生連結進行導覽。如果整張資訊卡都是一個到達網頁，只有在資訊卡不含其他互動元素 (a、button、input、select、textarea) 時，單一連結才能納入 <article>；
• 將獨立動作的連結和按鈕保留為個別的原生控制項；
• 如果資訊卡是選項，請使用與 <label> 相關聯的圓形按鈕或核取方塊，或原生 <select> 中的 option。

請按照有意義的來源順序排列媒體、標題、輔助內容和動作，不要使用 CSS order 造成衝突 (請參閱「CSS 版面配置和回應式設計」)。

導入作業

盡量減少標記，讓 CSS 選取器辨識每個區域，這樣簡單的資訊卡就能保持簡單，而更豐富的複合式資訊卡也能保持可能。資訊卡最多有四個區域，順序如下，任何區域都可以省略。區域是資訊卡的直接子項，不會分組在 .card__body 等包裝函式元素中，因此無法透過選取器放置區域及設定樣式。如果區域只有一個元素，則該元素本身就是區域，不需包裝：單一段落就是 <p>。只有在區域包含多個元素時，才使用包裝函式。

• 媒體：<img>、<picture>、<video> 或 <svg> 做為第一個子項。請只在不屬於上述元素的任意明星型內容中加入 .media 類別，且一律不要將純 <img> 包裝在 .media 元素中。
• 標題：獨立標題。只有在標題有副標題或標語時，才使用 <hgroup>；如果區域包含標題以外的內容 (例如署名或徽章)，則使用 <header>。如果資訊卡有主要到達網頁，連結會放在標題內。
• 內容：單一 <p>、<ul> 或 <dl> 獨立存在。如果內容包含多個元素 (例如多個段落，或一個段落加上一個清單)，請將這些元素分組到一個 <div> 中，讓該區域成為單一格線項目。
• 頁尾：<footer>，包含獨立動作，例如原生連結和按鈕。「閱讀更多」連結可能會與標題連結共用網址，但請使用視覺上隱藏的文字 (例如 Read more<span> about poached eggs</span>)，為其提供以可見文字開頭的描述性無障礙元素名稱，因為相同的「閱讀更多」連結在螢幕閱讀器的連結清單中會顯得模糊不清。請勿新增其他與標題網址重複的頁尾連結。

最簡單的資訊卡是包含標題和段落的 <article>。選擇與資訊卡行為相符的連結和動作模式；請參閱「互動模式」。

如果資訊卡圖片或影片應填滿固定比例區域，請在 <img> 或 <video> 本身設定 aspect-ratio 和 object-fit: cover，這樣就能填滿區域，不會扭曲變形 (可能會裁剪)。.media 容器的 aspect-ratio 只能用於其他明星型內容。否則，請保留媒體的固有比例。為資訊性圖片提供適當的替代文字；為裝飾性圖片使用 alt=""。

配合可用空間調整

請根據資訊卡的可用空間 (而非可視區域) 設定版面配置。如要調整資訊卡的子系 (媒體、文字、動作)，請將資訊卡設為大小容器 (container-type: inline-size)，並針對其子項編寫 @container 規則。避免從格線或清單父項調整大小：資訊卡的實際寬度可能取決於欄數、間隔等，因此以父項為基礎的中斷點會造成干擾。

在狹窄的容器中，按照來源順序堆疊區域。在寬容器中，將媒體放在其他區域旁的側欄，但僅限含有媒體的資訊卡：在媒體子項上使用 :has() 限制這些規則 (例如 .card:has(> img))，這樣一來，欄定義和 grid-column 刊登位置就不會套用至不含媒體的資訊卡。不含媒體的資訊卡在任何寬度下都會維持單欄，且不得保留空白媒體欄。

將資訊卡對齊格線

如果一列中的資訊卡應共用其區域的高度，請使用 subgrid：讓每張資訊卡跨越四個共用列軌道 (媒體、標頭、內容、頁尾)，並依元素選取器放置區域，將非媒體、標題或 <footer> 的所有內容視為內容。如果卡片省略某個區域，該區域的軌道就會留空，因此其餘區域仍會與相鄰卡片對齊。每個軌道都包含一個格線項目，因此只有在內容區域有多個元素，且資訊卡共用軌道時，才需要將內容區域納入 <div>。如果資訊卡未與同層元素對齊，就不需要包裝函式或子格線。

互動模型

內容資訊卡

使用 <article> 做為資訊卡根。將連結和按鈕設為獨立的原生控制項。

單一目的地資訊卡

如果整張資訊卡只有一個到達網頁，且沒有獨立動作，請使用一個原生連結。連結可以包裝 <article>。請勿在連結中嵌入其他連結、按鈕或表單控制項，並將所有「閱讀更多」文字保留為純文字 <p> 或 <span>。由於連結的無障礙元素名稱是資訊卡的所有文字，因此請保持內容簡短；如果資訊卡有大量文字或其他動作，請使用下方的延伸連結模式，這樣只有標題是連結：

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

可點擊的資訊卡，可執行獨立動作

如果點選資訊卡會觸發動作，而非導向其他頁面，請使用 <button>，不要使用連結。

如果內容資訊卡連結至主要到達網頁，同時包含其他互動元素，且需要整體可點選：

• 在主要連結上使用單一選擇加入：在每張資訊卡的一個連結 (標題連結) 上放置 .card-link。頁尾和其他連結則不會獲得焦點，否則每個連結都會展開自己的疊加層，最後一個連結則會擷取整張資訊卡。
• 使用 ::after 連結標題，並將指標點擊區域延伸至整張資訊卡

.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

• 使用 position: relative; z-index: 1 提高互動元素，確保元素仍可操作。指定元素類型 (例如 a, button)，而非要求透過類別選擇加入。
• 請勿將 z-index 套用至整個容器，否則容器會擷取不會產生任何動作的指標事件。

.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}

• 在懸停/聚焦時設定資訊卡本身的樣式，而不是延伸連結：

.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

選項卡

如要使用資訊卡代表預先定義的選項，請使用 <label class="card">，並將核取方塊或圓形按鈕設為直接子項。

使用 :has(:checked) 設定所選資訊卡的樣式。請勿在選取時變更會影響版面配置的屬性，例如 border-width、padding 或 font-weight，因為資訊卡和相鄰項目會跳動；請使用 outline、box-shadow 或只會變更顏色的透明邊框來強調：

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

可見的核取方塊或圓形按鈕本身就是非顏色選取指標，因此只要變更顏色即可。如果控制項在視覺上隱藏 (保持可聚焦且在無障礙樹狀結構中，絕不使用 display: none)，請新增不影響版面配置的非顏色指標，例如勾號圖示或較粗的 outline。

如果選項屬於下拉式挑選器，且選項以資訊卡形式排列，請使用原生 <select> 搭配 appearance: base-select，並設定 ::picker(select) 和 <option> 元素的樣式，而不是將選取項目替換為 <div> 資訊卡；詳情和備用方案請參閱自訂選取挑選器版面配置。