卡片用于展示不同类型的内容是很方便的，它适合用于展示具有相似的对象但是行为差异大的内容，如具有可变长度的标题的照片。
基本卡片
<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">卡片标题</span>
</div>
<div class="card-content">
<p>我是一个很简单的卡片。我很擅长于包含少量的信息。我很方便，因为我只需要一个小标记就可以有效地使用。</p>
</div>
<div class="card-action">
<a href="#">这是一个链接</a>
</div>
</div>
</div>
</div>
卡片上的浮动按钮
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我只需要很少的标记就可以有效地使用。
这是一张带有浮动按钮的图像卡。
卡片标题
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我只需要很少的标记就可以有效地使用。
这是一张带有大型浮动按钮的图像卡片。
<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="/images/nature/lorempixel6.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p>我是一个很简单的卡片。我很擅长于包含少量的信息</p>
</div>
<div class="card-action">
<a href="#">这是一个链接</a>
</div>
</div>
</div>
</div>
卡片展示
在这里，您可以添加一张卡片，点击后可以显示更多信息。 只需要增加一个div带card-reveal类，并包含一个span.card-title在里面。 添加类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>
卡片中的选项卡
您可以通过在标题内容和选项卡内容之间添加带cards-tabs类的div的选项卡来分隔。
<div class="card">
<div class="card-content">
<p>我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我只需要很少的标记就可以有效地使用。</p>
</div>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a href="#test4">测试 1</a></li>
<li class="tab"><a class="active" href="#test5">测试 2</a></li>
<li class="tab"><a href="#test6">测试 3</a></li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="test4">测试 1</div>
<div id="test5">测试 2</div>
<div id="test6">测试 3</div>
</div>
</div>卡片尺寸
如果你想拥有统一尺寸的卡片，你可以使用我们的预制尺寸类。只需在卡片类之外添加尺寸类即可。
<div class="card small">
<!-- 卡片内容 -->
</div>
卡片面板
我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我只需要很少的标记就可以有效地使用。 我类似于其他框架中所谓的面板。
对于一张标记较少的简单卡片，可以尝试使用一个只有填充和阴影效果的卡片面板
<div class="row">
<div class="col s12 m5">
<div class="card-panel teal">
<span class="white-text">我是一张非常简单的卡片。我擅长包含少量信息。我很方便，因为我只需要很少的标记就可以有效地使用。 我类似于其他框架中所谓的面板。
</span>
</div>
</div>
</div>