顯示卡
約翰
建築師和工程師
| 類 | 定義 |
|---|---|
| W3卡 | 集裝箱任何HTML內容（有邊框） |
| W3-卡2 | 集裝箱任何HTML內容（2px的邊框陰影） |
| W3卡-4 | 集裝箱任何HTML內容（4PX邊框陰影） |
| W3卡-8 | 集裝箱任何HTML內容（8像素邊框陰影） |
| W3-卡12 | 集裝箱任何HTML內容（12px的邊框陰影） |
| W3-卡16 | 集裝箱任何HTML內容（16px的邊框陰影） |
| W3-卡24 | 集裝箱任何HTML內容（24像素接壤的影子） |
色卡
與W3卡類創建紙質樣卡，並使用W3色類添加顏色：
W3-卡2
W3卡-4
W3卡-8
照片卡
巨魔的哈當厄爾，挪威舌頭
例
<div class="w3-card-12">
<img src="img_fjords.jpg"
alt="Norway">
<div class="w3-container w3-center">
<p>The Troll's tongue in Hardanger, Norway</p>
</div>
</div> 試一試» 卡片內容
頭
有些文字.. Lorem存有悲坐阿梅德，consectetur adipisicing ELIT，sed的根本eiusmod tempor incididunt UT labore等dolore麥格納aliqua。 UT enim廣告微量veniam，QUIS nostrud實習ullamco laboris暫準UT aliquip前EA commodo consequat。
例
<div class="w3-card-4">
<header class="w3-container
w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
<button
class="w3-btn">Button</button>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div> 試一試» 懸停效果
W3的懸停陰影類添加懸停陰影效果-這會讓任何元素看起來像鼠標懸停（相同的樣式W3卡-4）的記憶卡。
將鼠標懸停在我！
更多示例
好友請求
李四
例
<div class="w3-card-8 w3-dark-grey">
<div class="w3-container
w3-center">
<h3>Friend request</h3>
<img src="img_avatar3.png"
alt="Avatar" style="width:80%">
<h5>John
Doe</h5>
<button class="w3-btn w3-green">Accept</button>
<button class="w3-btn w3-red">Decline</button>
</div>
</div> 試一試» 李四
1個新的好友請求
首席執行官強大學校。 市場營銷和廣告。 尋找新的工作和新的機遇。
例
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div
class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-btn-block
w3-dark-grey">+ Connect</button>
</div> 試一試»