基本卡

<div class="container">
  <div class="row">
    <div class="col s6">
      <div class="card">

        <div class="card-image"> <!-- Card Image -->
          <img src="image.png" alt="Image">
        </div>

        <div class="card-content"> <!-- Card Content -->
          <h3>This is a card</h3>
          <p class="flow-text">Cards are really cool for conveying information in a beautiful way.</p>
        </div>

        <div class="card-action"> <!-- Card Action -->
          <a href="#" class="btn orange">Read More</a>
        </div>

      </div>
    </div>
  </div>
</div>

重要:

  • 使用 .card 作为主要的周围元素。
  • .card-image 环绕图像
  • 环绕内容与 .card-content
  • 环绕动作按钮与 .card-action

这是它的样子: 卡