English 中文(简体)
W3.CSS Tutorial

Selected Reading

W3.CSS - Cards
  • 时间：2024-12-22

W3.CSS - Cards

Previous Page Next Page  

W3.CSS has several special classes to display containers as paper-pke cards with shadow.

Sr. No. Class Name & Description
1

w3-card

Styles a container for any HTML content with border
2

w3-card-2

Styles a container for any HTML content with 2px bordered shadow
3

w3-card-4

Styles a container for any HTML content with 4px bordered shadow
4

w3-card-8

Styles a container for any HTML content with 8px bordered shadow
5

w3-card-12

Styles a container for any HTML content with 12px bordered shadow

Example

w3css_cards.htm

<html>
   <head>
      <title>The W3.CSS Syntax Highpghter</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
      <style>
         span {
            width : 200px;	
            height : 200px;	
         } 
      </style>
   </head>
   
   <body>   
      <header class = "w3-container w3-teal">   
         <h2>Yellow Card Demo</h2>   
      </header>
      <br/>
      
      <span class = "w3-card w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </span>
      <span class = "w3-card-2 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </span>
      <span class = "w3-card-4 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </span>
      <span class = "w3-card-8 w3-yellow">
         <p><b>TODO:</b> Learn HTML5</p>
      </span>
      <br/>
      
      <header class = "w3-container w3-teal">   
         <h2>White Card Demo</h2>   
      </header>
      <br/>
      
      <span class = "w3-card w3-white">
         <p><b>TODO:</b> Learn W3.CSS</p>
      </span>
      <span class = "w3-card-8 w3-white">
         <p><b>TODO:</b> Learn HTML5</p>
      </span>
      <br/>
      
      <span class = "w3-card-4" style = "width:550px;">
         <header class = "w3-container w3-blue">
            <h1>HTML5 Tutorial</h1>
         </header>
         
         <span class = "w3-container" style = "width:550px;">
            <p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionapty. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
         </span>
      </span>
      <br/>
      
      <header class  =  "w3-container w3-teal">   
         <h2>Image Card Demo</h2>   
      </header>
      <br/>
      
      <span class = "w3-card-12" style = "width:255px; height: 230px;">
         <img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
         <span class = "w3-container">
            <p>Learn HTML5</p>
         </span>
      </span>
   </body>
</html>

Result

Verify the result.