W3.CSS Cards
Displaying Cards
John
Architect and engineer
| Class | Defines |
|---|---|
| w3-card | Container for any HTML content (With border) |
| w3-card-2 | Container for any HTML content (2px bordered shadow) |
| w3-card-4 | Container for any HTML content (4px bordered shadow) |
| w3-card-8 | Container for any HTML content (8px bordered shadow) |
| w3-card-12 | Container for any HTML content (12px bordered shadow) |
| w3-card-16 | Container for any HTML content (16px bordered shadow) |
| w3-card-24 | Container for any HTML content (24px bordered shadow) |
Colored Cards
Create paper-like cards with the w3-card classes, and use a w3-color class to add a color:
w3-card-2
w3-card-4
w3-card-8
Card Content
Header
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.
Add containers inside the card to create different sections:
Example
<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>
Try It Yourself »
Photo Card
The Troll's tongue in Hardanger, Norway
Example
<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 »
Hover Effect
The w3-hover-shadow class adds a shadow effect on hover - this will make any element look like a card on mouse-over (same style as w3-card-4).
Hover over me!
Example
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over
me!</p>
</div>
Try It Yourself »
More Examples
Friend Request
John Doe
Example
<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 »
John Doe
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
Example
<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 »
