menu

卡片用于展示不同类型的内容是很方便的，它适合用于展示具有相似的对象但是行为差异大的内容，如具有可变长度的标题的照片。

基本卡片

卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。

这是一个链接 这是一个链接 


      <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">卡片标题</span>
              <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
            </div>
            <div class="card-action">
              <a href="#">这是一个链接</a>
              <a href="#">这是一个链接</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>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
            </div>
            <div class="card-action">
              <a href="#">这是一个链接</a>
            </div>
          </div>
        </div>
      </div>

卡片上的固定动作按钮

卡片标题 add

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。





这是一个带固定动作按钮的图像卡片。

add
卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。

这是一个带巨大固定动作按钮的图像卡片。 



  <div class="row">
    <div class="col s12 m6">
      <div class="card">
        <div class="card-image">
          <img src="images/sample-1.jpg">
          <span class="card-title">卡片标题</span>
          <a class="btn-floating halfway-fab waves-effect waves-light red"><i class="material-icons">add</i></a>
        </div>
        <div class="card-content">
          <p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
        </div>
      </div>
    </div>
  </div>

水平卡片

我是一个很简单的卡片。我很擅长于包含少量的信息。

这是一个链接




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



  <div class="col s12 m7">
    <h2 class="header">水平卡片</h2>
    <div class="card horizontal">
      <div class="card-image">
        <img src="http://lorempixel.com/100/190/nature/6">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>我是一个很简单的卡片。我很擅长于包含少量的信息。</p>
        </div>
        <div class="card-action">
          <a href="#">这是一个链接</a>
        </div>
      </div>
    </div>
  </div>

卡片式显示

卡片标题more_vert

这是一个链接

卡片标题close

单击后显示的产品的详细信息。





这里是通过点击显示详细信息，实现这个只需添加card-reveal类到div中，并包含一个带span.card-title类的span标签。增加带activator类的元素到卡片里面，这样就可以点击这个卡片显示详情。 



  <div class="card">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="images/office.jpg">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">卡片标题<i class="material-icons right">more_vert</i></span>
      <p><a href="#">这是一个链接</a></p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">卡片标题<i class="material-icons right">close</i></span>
      <p>单击后显示的产品的详细信息。</p>
    </div>
  </div>

卡片动作选项

卡片标题more_vert

这是一个链接

卡片标题close

单击后显示的产品的详细信息。

这是一个链接 这是一个链接


卡片显示组件有一个默认的状态就是翻转卡片动作。

卡片标题more_vert

这是一个链接

这是一个链接 这是一个链接
卡片标题close

点击显示更多的信息。

你可以使你的卡片动作总是可见通过添加sticky-action类到全部的卡片中。 



  <div class="card sticky-action">
    ...

    <div class="card-action">...</div>

    <div class="card-reveal">...</div>
  </div>

卡片尺寸

如果你想有相同大小的卡片，你可以重新指定尺寸类。只要增加尺寸类到你的卡片类中。


  <div class="card small">
    <!-- Card Content -->
  </div>

小型

卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。

这是一个链接 这是一个链接


小型卡片限制高度为300px;

中型

卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。

这是一个链接 这是一个链接


中型卡片限制高度为400px;

大型

卡片标题

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。

这是一个链接 这是一个链接


大型卡片限制高度500px;

卡片面板

我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。在其他框架中我叫做面板。




对于带少量标记的简单卡片，尝试使用一个带阴影效果和内补白的卡片面板。 



    <div class="row">
      <div class="col s12 m5">
        <div class="card-panel teal">
          <span class="white-text">我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。在其他框架中我叫做面板。
          </span>
        </div>
      </div>
    </div>