卡片

卡片是熱門且靈活的 UI 元件。

基礎

卡片只是一個套用 .card 類別的元素。您可以在其中放入任何類型的內容。請務必將內容包在 .card-section 元素中，以達成傳統卡片的外觀。

卡片容器沒有內距，讓您可以在其中放置全螢幕圖片。使用 .card-divider 和 .card-section 類別來細分卡片。

.card 和 .card-divider 元素是彈性盒容器。這讓您可以使用 Flexbox 工具來建立更靈活的版面。

<div class="card" style="width: 300px;">
  <div class="card-divider">
    This is a header
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <h4>This is a card.</h4>
    <p>It has an easy to override visual style, and is appropriately subdued.</p>
  </div>
</div>

這是標題

這是卡片。

它有容易覆寫的視覺樣式，而且適當地低調。

瀏覽器錯誤 (IE 11 - Flexbug)：在 IE 11 中，當使用帶有圖片的卡片時，您可能會在每個圖片下方看到許多空白，而這些空白恰好與原始圖片大小相符。此錯誤可以在 IE11 瀏覽器中在此處複製。使用 .card-image 類別來包覆您的圖片以解決此問題。

<div class="card-image">
  <img src="assets/img/generic/rectangle-1.jpg">
</div>

卡片分隔線

您也可以將 .card-divider 元素包含為標題、頁尾或用於區分內容。

觀看影片中的這一段

<div class="card" style="width: 300px;">
  <div class="card-divider">
    <h4>I'm featured</h4>
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <p>This card makes use of the card-divider element.</p>
  </div>
</div>

我是特色

此卡片使用 card-divider 元素。

圖片

圖片與卡片搭配得很好。只要將圖片包含在 .card-section 元素外側，就能很好地延伸到邊緣。或者將圖片移到 .card-section 內側，讓圖片周圍有留白。

觀看影片中的這一段

<!-- image has no padding -->
<div class="card">
  <img src="assets/img/generic/rectangle-1.jpg">
  <div class="card-section">
    <p>This is a simple card with an image.</p>
  </div>
</div>

<!-- image has padding -->
<div class="card">
  <div class="card-section">
    <img src="assets/img/generic/rectangle-1.jpg">
  </div>
  <div class="card-section">
    <p>This is a simple card with an image inside a `.card-section`.</p>
  </div>
</div>

這是一個有圖片的簡單卡片。

這是一個在 `.card-section` 內有圖片的簡單卡片。

<div class="card">
  <div class="card-section">
    <p>Images work just fine below the content too!</p>
  </div>
  <img src="assets/img/generic/rectangle-1.jpg">
</div>

圖片在內容下方也能正常顯示！

調整大小

您可以使用自訂 CSS 設定卡片寬度，或將卡片新增到 Foundation 格線中。

觀看影片中的這一段

<div class="grid-container">
  <div class="grid-x grid-margin-x small-up-2 medium-up-3">
    <div class="cell">
      <div class="card">
        <img src="assets/img/generic/rectangle-1.jpg">
        <div class="card-section">
        <h4>This is a row of cards.</h4>
          <p>This row of cards is embedded in an X-Y Block Grid.</p>
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <img src="assets/img/generic/rectangle-1.jpg">
        <div class="card-section">
          <h4>This is a card.</h4>
          <p>It has an easy to override visual style, and is appropriately subdued.</p>
        </div>
      </div>
    </div>
    <div class="cell">
      <div class="card">
        <img src="assets/img/generic/rectangle-1.jpg">
        <div class="card-section">
          <h4>This is a card.</h4>
          <p>It has an easy to override visual style, and is appropriately subdued.</p>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="grid-x grid-margin-x small-up-2 medium-up-3">
  <div class="cell">
    <div class="card">
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <h4>This is a row of cards.</h4>
        <p>This row of cards is embedded in an Flex Block Grid.</p>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="card">
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <h4>This is a card.</h4>
        <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
    </div>
  </div>
  <div class="cell">
    <div class="card">
      <img src="assets/img/generic/rectangle-1.jpg">
      <div class="card-section">
        <h4>This is a card.</h4>
        <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
    </div>
  </div>
</div>

這是一列卡片。

這列卡片嵌入在 X-Y 區塊格線中。

這是卡片。

它有容易覆寫的視覺樣式，而且適當地低調。

這是卡片。

它有容易覆寫的視覺樣式，而且適當地低調。

這是一列卡片。

這列卡片嵌入在 Flex 區塊格線中。

這是卡片。

它有容易覆寫的視覺樣式，而且適當地低調。

這是卡片。

它有容易覆寫的視覺樣式，而且適當地低調。

Sass 參考

變數

您可以在專案的設定檔中使用這些 Sass 變數，自訂此元件的預設樣式。

名稱	類型	預設值	說明
`$card-background`	顏色	`$white`	預設背景顏色。
`$card-font-color`	顏色	`$body-font-color`	卡片的預設字體顏色。
`$card-divider-background`	顏色	`$light-gray`	預設背景。
`$card-border`	清單	`1px solid $light-gray`	預設邊框樣式。
`$card-shadow`	清單	`none`	預設卡片陰影。
`$card-border-radius`	清單	`$global-radius`	預設邊框半徑。
`$card-padding`	數字	`$global-padding`	預設留白。
`$card-margin-bottom`	數字	`$global-margin`	預設底部邊距。

混合

我們使用這些混合來建立此元件的最終 CSS 輸出。您可以自行使用混合，從我們的元件中建立自己的類別結構。

card-container

@include card-container($background, $color, $margin, $border, $radius, $shadow);

新增卡片容器的樣式。

參數	類型	預設值	說明
`$background`	顏色	`無`	卡片的背景顏色。
`$color`	顏色	`無`	卡片的字體顏色。
`$margin`	數字	`無`	卡片的底部邊距。
`$border`	清單	`無`	卡片周圍的邊框。
`$radius`	清單	`無`	卡片的邊框半徑。
`$shadow`	清單	`無`	卡片的方塊陰影。

card-divider

@include card-divider;

新增卡片分隔線的樣式。

card-section

@include card-section;

新增卡片區段的樣式。