Open In App

W3.CSS Cards

Last Updated : 02 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        "https://www.w3schools.com/w3css/4/w3.css">
</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= 


        "https://www.w3schools.com/w3css/4/w3.css"> 


  


</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.


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                                                            

                                    
                                        
                                        Previous
                                    
                                    
                                    

                                        W3.CSS Images
                                    

                                

                                                            

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        W3.CSS Tables
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Materialize CSS Cards
            

        
    
        
            

                Modern CSS Cards
            

        
    
        
            

                How to create responsive stacked cards hover effect using CSS ?
            

        
    
        
            

                Bootstrap 5 Cards Sizing using custom CSS
            

        
    
        
            

                How to create Expanding Cards using HTML, CSS and Javascript ?
            

        
    
        
            

                How to Create Responsive Column Cards with CSS ?
            

        
    
        
            

                Create Responsive Column Cards with CSS
            

        
    
        
            

                Bootstrap | Cards
            

        
    
        
            

                Bootstrap 4 | Cards
            

        
    
        
            

                How to place two bootstrap cards next to each other ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
author
        

            
        

        

                                    


                                    

                                        aditya_taparia                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  






    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox