W3.CSS Cards
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.
Please Login to comment...