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.