John
Architect and engineer
Architect and engineer
| クラス | 定義 |
|---|---|
| w3-card | 全 HTML コンテンツのコンテナ (ボーダー付き) |
| w3-card-2 | 全 HTML コンテンツのコンテナ (2px の影付きボーダー) |
| w3-card-4 | 全 HTML コンテンツのコンテナ (4px の影付きボーダー) |
| w3-card-8 | 全 HTML コンテンツのコンテナ (8px の影付きボーダー) |
| w3-card-12 | 全 HTML コンテンツのコンテナ (12px の影付きボーダー) |
| w3-card-16 | 全 HTML コンテンツのコンテナ (16px の影付きボーダー) |
| w3-card-24 | 全 HTML コンテンツのコンテナ (24px の影付きボーダー) |
w3-card クラスにより紙のようなカードを作成し、w3-color クラスを使用して色を追加します：
w3-card-2
w3-card-4
w3-card-8
Some text.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 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>
</div>
<footer class="w3-container
w3-blue">
<h5>Footer</h5>
</footer>
</div>
Try It Yourself ❯
Troll's tongue in Hardanger, Norway
<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>
Try It Yourself ❯
w3-hover-shadow クラスは、ホバーにシャドウ効果を追加します - これは、マウスオーバー時に、 要素がカードのように見えるようになります（w3-card-4 と同じスタイル）。
Hover over me!
<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>
Try It Yourself ❯
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
<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>
Try It Yourself ❯