卡片

卡片是展现由不同类型的对象组成的内容的一种方便的形式。它们也是非常适合呈现尺寸或者所支持的行为有很大变化的相似的对象，比如像有着长度多变的标题的照片。

基本的卡片

<div class="row">
        <div class="col s12 m6">
          <div class="card blue-grey darken-1">
            <div class="card-content white-text">
              <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>

图片卡片

这是一个标准的卡片，图像和文字的排列像指甲，图像是指甲头。

 <div class="row">
        <div class="col s12 m7">
          <div class="card">
            <div class="card-image">
              <img src="images/sample-1.jpg">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
      </div>

水平卡片

这是一个标准的卡片，图片是水平的。

  <div class="col s12 m7">
    <h2 class="header">Horizontal Card</h2>
    <div class="card horizontal">
      <div class="card-image">
        <img src="http://lorempixel.com/100/190/nature/10">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

卡片显示

你可以添加一个卡片，一旦被点击的时候显示更多的信息。只要给< div>添加一个“card-reveal”；类和加一个"card-title"类来实现。给卡片内的一个元素添加"activator"类使它能够打开卡片背面显示信息。

（点击右侧的三个小点的按钮或者点击图片，卡片会翻转到背面，显示相关信息）

  <div class="card">
    <div class="card-image waves-effect waves-block waves-light"><!--卡片正面图片-->
      <img class="activator" src="images/office.jpg"><!--为图片添加“activator”类，实现翻转-->
    </div>
    <div class="card-content"><!--卡片正面的文本-->
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span><!--为文本添加“activator”类，实现翻转-->
      <p><a href="#">This is a link</a></p>
    </div>
    <div class="card-reveal"><!--卡片背面的内容。在最外层的div添加"card-reveal"类，卡片背面标题的<span>标签添加"card-title"类-->
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
      <p>Here is some more information about this product that is only revealed once clicked on.</p>
    </div>
  </div>