W3CSS Card

When we talk about cards, the first thing that comes to our minds are greeting cards or business. W3CSS cards are used to create effects like these. W3CSS cards are basically containers with shadowed border. The class used to create these cards is the w3-card-x where x is the number of pixels of shadowed border. This can be 2,4,8,12, 16 and 24. Let’s create a very simple W3CSS card. Take a look at the following example.

W3CSS Card Example

It is very simple to create a card with W3CSS, simply use the class w3-card with any div.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-card">
        <h2>This is a card</h2>
        <p>It has white background!<p>
    </div>
    
      <div class="w3-card-8 w3-yellow">
        <h2>This is a card</h2>
        <p>It has pale yellow background!<p>
    </div>
    

</html>

Download the code Try the code

In the above example, we create two cards: One with the shadow and the other without shadow. The card without shadow is a simple div with class w3-card. By default the background for card is white and a black border appears around it. The second class has a shadow of 8 pixels and its background color is set to yellow.

W3CSS Card with Header and Footer

You can add containers within a card div to create multiple sections within a card. For instance, you can create header, content and footer section using container classes within a card. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-card-8">

<header class="w3-container w3-yellow">
  <h1>Knowledge Hills</h1>
</header>

<div class="w3-container">
  <p>Best website for learning new technologies...</p>
</div>

<footer class="w3-container w3-yellow">
  <h5>Copyright @ Knowledgehills.com</h5>
</footer>

</div>
    

</html>

Download the code Try the code

In the above example, we have a card with three sections. The header section is a container with h1 heading and background of yellow. The content has white background and contains a paragraph while footer has an h5 heading.

Hover Shadow Effect

You can also add shadow effect to any div when you move mouse over it by adding w3-hover-shadow class to the div. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-blue w3-hover-shadow w3-center">
        <h2>Move Mouse Over Me</h2>

    </div>
    
 
    

</html>

Download the code Try the code

If you open the above div in browser, you should see a blue div. When you hover your mouse over that div, you shall see a shadow appear below the div.

<<< W3CSS Closing and Opening PanelsW3CSS Text >>>