カードを表示します
ジョン
建築家とエンジニア
| クラス | 定義 |
|---|---|
| W3-カード | （ボーダー付）任意のHTMLコンテンツのコンテナ |
| W3-カード-2 | 任意のHTMLコンテンツのコンテナ（2ピクセルボーダー影） |
| W3-カード-4 | 任意のHTMLコンテンツのコンテナ（4PXボーダー影） |
| W3-カード-8 | 任意のHTMLコンテンツのコンテナ（8pxボーダー影） |
| W3-カード-12 | 任意のHTMLコンテンツのコンテナ（12ピクセル境影） |
| W3-カード-16 | 任意のHTMLコンテンツのコンテナ（16pxに縁取ら影） |
| W3-カード-24 | 任意のHTMLコンテンツのコンテナ（は24px境影） |
色付きカード
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のイプサムの悲しみは、AMET座るconsectetur adipisicing ELIT、eiusmod incididunt UTをtemporんsedのlaboreらdoloreマグナaliqua。 ユタenim広告ミニムveniam、QUISのnostrud exercitationのullamcoのlaborisのNiSi 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新しい友達リクエスト
マイティ学校で最高経営責任者（CEO）。 マーケティングと広告。 新しい仕事や新しい機会を探しています。
例
<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> »それを自分で試してみてください