卡片（Cards）

伴随着列表视图，卡片是一种很好的方法来控制和组织你的信息。卡片含有独特的相关数据，例如，照片，文字和所有关于一个主题的链接。卡片通常是更复杂的和详细的信息的一个切入点。

<header class="bar bar-nav">
  <h1 class="title">卡片</h1>
</header>
<div class="content">
  <div class="content-block-title">简单卡片</div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">卡头</div>
    <div class="card-content">
      <div class="card-content-inner">头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。</div>
    </div>
    <div class="card-footer">卡脚</div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-content-inner">这是一个用纯文本的简单卡片。但卡片可以包含自己的页头，页脚，列表视图，图像，和里面的任何元素。</div>
    </div>
  </div>
  <div class="content-block-title">风格卡片</div>
  <div class="card demo-card-header-pic">
    <div valign="bottom" class="card-header color-white no-border no-padding">
      <img class='card-cover' src="//gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" alt="">
    </div>
    <div class="card-content">
      <div class="card-content-inner">
        <p class="color-gray">发表于 2015/01/15</p>
        <p>此处是内容...</p>
      </div>
    </div>
    <div class="card-footer">
      <a href="#" class="link">赞</a>
      <a href="#" class="link">更多</a>
    </div>
  </div>
  <div class="content-block-title">Facebook卡片</div>
  <div class="card facebook-card">
    <div class="card-header no-border">
      <div class="facebook-avatar"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="34" height="34"></div>
      <div class="facebook-name">夜萧</div>
      <div class="facebook-date">星期一 3:47pm</div>
    </div>
    <div class="card-content"><img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="100%"></div>
    <div class="card-footer no-border">
      <a href="#" class="link">赞</a>
      <a href="#" class="link">评论</a>
      <a href="#" class="link">分享</a>
    </div>
  </div>
  <div class="content-block-title">列表视图卡片</div>
  <div class="card">
    <div class="card-content">
      <div class="list-block">
        <ul>
          <li>
            <a href="#" class="item-link item-content">
              <div class="item-media"><i class="icon icon-f7"></i></div>
              <div class="item-inner">
                <div class="item-title">链接 1</div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header">新的公布:</div>
    <div class="card-content">
      <div class="list-block media-list">
        <ul>
          <li class="item-content">
            <div class="item-media">
              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
            </div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">标题</div>
              </div>
              <div class="item-subtitle">子标题</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="card-footer">
      <span>2015/01/15</span>
      <span>5 评论</span>
    </div>
  </div>            
</div>

卡片列表视图

可以用卡片在列表视图中有用的元素，在这种情况下就可以使用搜索栏，虚拟列表和列表视图功能卡片。在这种情况下我们需要添加额外的卡片列表类<div class="list-block">

<header class="bar bar-nav">
    <h1 class="title">列表卡片</h1>
  </header>
  <div class="content">
    <div class="list-block cards-list">
      <ul>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
        <li class="card">
          <div class="card-header">卡头</div>
          <div class="card-content">
            <div class="card-content-inner">卡内容</div>
          </div>
          <div class="card-footer">卡脚</div>
        </li>
      </ul>
    </div>
  </div>