Components · Card
下载

组件

Card 卡片

内容容器：头图、标题、正文、页脚；支持横排与卡片网格。

默认

卡片标题

扁平卡片正文，适合功能简介或列表项摘要。

<div class="pvs-card" style="max-width:18rem">
  <div class="pvs-card__body">
    <h3 class="pvs-card__title">卡片标题</h3>
    <p class="pvs-card__text">扁平卡片正文，适合功能简介或列表项摘要。</p>
  </div>
</div>
套餐 Pro

含全部组件与文档站。

<div class="pvs-card" style="max-width:18rem">
  <div class="pvs-card__header">套餐 Pro</div>
  <div class="pvs-card__body">
    <p class="pvs-card__text pvs-m-0">含全部组件与文档站。</p>
  </div>
  <div class="pvs-card__footer">
    <button type="button" class="pvs-btn pvs-btn--primary pvs-btn--sm">购买</button>
    <button type="button" class="pvs-btn pvs-btn--ghost pvs-btn--sm">详情</button>
  </div>
</div>

头图置顶

头图卡片

pvs-card__img 通栏置顶。

<div class="pvs-card" style="max-width:16rem">
  <img class="pvs-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='160'%3E%3Crect fill='%23cbd5e1' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  <div class="pvs-card__body">
    <h3 class="pvs-card__title">头图卡片</h3>
    <p class="pvs-card__text">pvs-card__img 通栏置顶。</p>
  </div>
</div>

横排布局

pvs-card--horizontal：小屏竖排，≥576px 左图右文。

横排卡片

博客列表、商品摘要常用布局。

<div class="pvs-card pvs-card--horizontal" style="max-width:28rem">
  <img class="pvs-card__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160'%3E%3Crect fill='%2394a3b8' width='100%25' height='100%25'/%3E%3C/svg%3E" alt="" />
  <div class="pvs-card__body">
    <h3 class="pvs-card__title">横排卡片</h3>
    <p class="pvs-card__text pvs-m-0">博客列表、商品摘要常用布局。</p>
  </div>
</div>

卡片网格

A

自动填充列

B

minmax(16rem)

C

三列流

<div class="pvs-card-grid" style="max-width:36rem">
  <div class="pvs-card pvs-card--hover">
    <div class="pvs-card__body">
      <h3 class="pvs-card__title">A</h3>
      <p class="pvs-card__text pvs-m-0">自动填充列</p>
    </div>
  </div>
  <div class="pvs-card">
    <div class="pvs-card__body">
      <h3 class="pvs-card__title">B</h3>
      <p class="pvs-card__text pvs-m-0">minmax(16rem)</p>
    </div>
  </div>
  <div class="pvs-card">
    <div class="pvs-card__body">
      <h3 class="pvs-card__title">C</h3>
      <p class="pvs-card__text pvs-m-0">三列流</p>
    </div>
  </div>
</div>

悬停

pvs-card--hover 悬停时加阴影，常用于可点击卡片网格。

可点击卡片

鼠标悬停查看阴影变化。

<div class="pvs-card pvs-card--hover" style="max-width:18rem;cursor:pointer">
  <div class="pvs-card__body">
    <h3 class="pvs-card__title">可点击卡片</h3>
    <p class="pvs-card__text">鼠标悬停查看阴影变化。</p>
  </div>
</div>

结构

div.pvs-card → 可选 __img / __header / __body / __footer

类名速查

类名说明
pvs-card根容器
pvs-card__img头图
pvs-card__header / __footer顶栏 / 底栏
pvs-card__body内边距区
pvs-card__title / __text标题 / 正文
pvs-card--horizontal横排（左图右文）
pvs-card-grid响应式多卡网格壳
pvs-card--hover悬停阴影