卡片

卡片是一种流行且灵活的 UI 组件。

基础知识

卡片只是一个应用了 .card 类的元素。您可以在其中放置任何类型的内容。确保将内容包裹在 .card-section 元素中，以实现传统的卡片外观。

卡片容器没有填充，允许您在其中放置全出血图像。使用 .card-divider 和 .card-section 类对卡片进行细分。

.card 和 .card-divider 元素是 flexbox 容器。这允许您使用 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`	列表	`无`	默认卡片阴影。
`$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;

添加卡片部分的样式。