Introduction
This chapter demonstrates about the W3.CSS Cards these are the containers for the HTML content, cards can be used in many ways. Following are the concepts covered in this chapter.
- Card Classes
- Content Card
- Colored Card
- Photo Card
- Hover Effect
Description
User can display the HTML content as a cards in W3.CSS by using the w3-card in order to display as cards which have some classes these are tabulated below.
By using the above cards user can display multiple cards.
| Class | Description |
|---|---|
| w3-card | Which is the container for the HTML content with borders. |
| w3-card-2 | Which is the container for the HTML content with 2px shadow border. |
| w3-card-4 | Which is the container for the HTML content with 4px shadow border. |
| w3-card-8 | Which is the container for the HTML content with 8px shadow border. |
| w3-card-12 | Which is the container for the HTML content with 12px shadow border. |
| w3-card-16 | Which is the container for the HTML content with 16px shadow border. |
| w3-card-24 | Which is the container for the HTML content with 24px shadow border. |
Description
By using the w3-container user can display the Content card for user need to use any one class from the above-shown classes. The image below demonstrates the Content Card as shown.
The code below demonstrates the creating content content as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>SPLESSONS</h2>
<div class="w3-card-2" style="width:50%;">
<header class="w3-container w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>SPLessons stands for Simple Programming Lessons and was started with a motive to present programming codes and to help the developers all around the globe with different queries in different Programming Languages.</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In order to display the Colored Cards user need to use w3-color class. A user can use any color to display the cards. The code below demonstrates the displaying cards in white color as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>White Cards</h2>
<div class="w3-panel w3-card"><p>w3-card</p></div>
<div class="w3-panel w3-card-2"><p>w3-card-2</p></div>
<div class="w3-panel w3-card-4"><p>w3-card-4</p></div>
<div class="w3-panel w3-card-8"><p>w3-card-8</p></div>
<div class="w3-panel w3-card-12"><p>w3-card-12</p></div>
<div class="w3-panel w3-card-16"><p>w3-card-16</p></div>
<div class="w3-panel w3-card-24"><p>w3-card-24</p></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
The code below demonstrates to creating the blue cards as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>blue Cards</h2>
<div class="w3-panel w3-card w3-blue"><p>w3-card</p></div>
<div class="w3-panel w3-card-2 w3-blue"><p>w3-card-2</p></div>
<div class="w3-panel w3-card-4 w3-blue"><p>w3-card-4</p></div>
<div class="w3-panel w3-card-8 w3-blue"><p>w3-card-8</p></div>
<div class="w3-panel w3-card-12 w3-blue"><p>w3-card-12</p></div>
<div class="w3-panel w3-card-16 w3-blue"><p>w3-card-16</p></div>
<div class="w3-panel w3-card-24 w3-blue"><p>w3-card-24</p></div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
In the same way user can also create Photo Card by using the w3-container card classes. The code below demonstrates to creating the photo card as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Photo Card</h2>
<div class="w3-card-12" style="width:50%">
<img src="splessons.jpg" alt="splessons" style="width:100%">
<div class="w3-container w3-center">
<p>www.splessons.com was established on Nov-01-2013.</p>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
User can also create hover effect by using w3-hover-shadow class which will make any element look like a card on mouse over. The code below demonstrates the Hover effect as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Shadow on Hover</h2>
<div class="w3-blue w3-hover-shadow w3-padding-64 w3-center" style="width:70%">
<p>Hover over to display as a card!</p>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
key Points
- User can create hover effects by using w3-hover-shadow.
- User can create Photo & colored cards.
- W3.CSS have different types of Card Classes.