基本卡

<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

這是它的樣子: 卡