基本卡
<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
這是它的樣子: