Skip to content
Related Articles

Related Articles

W3.CSS Cards
  • Last Updated : 02 Mar, 2021

A card is a flexible and extensible content container. It can include header, footer and a wide variety of content. W3.CSS helps the developers to add paper-like effects to the elements. It contains three types of classes:

Sr. No.

Class Name

Description

1.



w3-card

It is used to add a box shadow of 2px to the element.

2.

w3-card-2

It is same as the w3-card class.

3.

w3-card-4

It is used to add a box shadow of 4px to the element.



Example: Using different card classes in the HTML page.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
</head>
  
<body>
    <!-- w3-container is used to add
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the
         content of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xlarge sets font size to 16px. -->
        <h2 class="w3-text-green w3-xlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <h4 class="w3-container w3-text-green">
        1. w3-card Class:
    </h4>
      
    <!-- w3-pink sets the background color pink -->
    <div class="w3-container w3-card 
        w3-pink w3-margin">
          
        <!-- w3-text-white sets the text 
            color to white. -->
        <p class="w3-text-white">
            GeeksforGeeks is a Computer 
            Science portal for geeks.
        </p>
    </div>
  
    <h4 class="w3-container w3-text-green">
        2. w3-card-2 Class:
    </h4>
  
    <!-- w3-pink sets the background 
        color orange -->
    <div class="w3-container w3-card-2 
        w3-orange w3-margin">
          
        <!-- w3-text-white sets the text 
            colour to white. -->
        <p class="w3-text-white">
            GeeksforGeeks is a Computer 
            Science portal for geeks.
        </p>
    </div>
  
    <h4 class="w3-container w3-text-green">
        3. w3-card-4 Class:
    </h4>
  
    <!-- w3-pink sets the background 
        colour teal -->
    <div class="w3-container w3-card-4 
        w3-teal w3-margin">
          
        <!-- w3-text-white sets the text 
            colour to white. -->
        <p class="w3-text-white">
            GeeksforGeeks is a Computer 
            Science portal for geeks.
        </p>
    </div>
</body>
  
</html>

Output:

Example: Adding a card with Header and Footer.




<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Adding W3.CSS file through external link -->
    <link rel="stylesheet" href=
  
</head>
  
<body>
    <!-- w3-container is used to add
         16px padding to any HTML element.  -->
    <!-- w3-center is used to set the content 
         of the element to the center. -->
    <div class="w3-container w3-center">
  
        <!-- w3-text-green sets the text 
            color to green. -->
        <!-- w3-xlarge sets font size to 16px. -->
        <h2 class="w3-text-green w3-xlarge">
            Welcome To GFG
        </h2>
    </div>
  
    <!-- Creating Card with some Margin -->
    <div class="w3-card-4 w3-margin">
  
        <!-- Adding header -->
        <header class="w3-container w3-teal">
            <h1>GFF-Header</h1>
        </header>
  
        <!-- Adding Content -->
        <div class="w3-container">
            <p>
                GeeksforGeeks is a Computer 
                Science portal for geeks.
            </p>
        </div>
  
        <!-- Adding Footer -->
        <footer class="w3-container w3-teal">
            <h5>GFG-Footer</h5>
        </footer>
    </div>
</body>
  
</html>

Output:

Note: In similar way, one can use img tag to insert image in the card if he/she wants.

My Personal Notes arrow_drop_up
Recommended Articles
Page :