English 中文(简体)
Material Design Lite Tutorial

Material Design Lite Resources

Selected Reading

MDL - Cards
  • 时间：2024-11-05

Material Design Lite - Cards

Previous Page Next Page  

MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of cards. The following table psts down the available classes and their effects.

Sr.No. Class Name & Description
1

mdl-card

Identifies span element as an MDL card container, required on "outer" span.
2

mdl-card--border

Puts a border to the card section that it is appped to and is used on the "inner" spans.
3

mdl-shadow--2dp through mdl-shadow--16dp

Sets variable shadow depths (2, 3, 4, 6, 8, or 16) to card and is optional, goes on "outer" span; if omitted, no shadow is shown.
4

mdl-card__title

Identifies span as a card title container and is required on "inner" title span.
5

mdl-card__title-text

Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title span.
6

mdl-card__subtitle-text

Puts text characteristics to a card subtitle and is optional. It should be a child of the title element.
7

mdl-card__media

Identifies span as a card media container and is required on "inner" media span.
8

mdl-card__supporting-text

Identifies span as a card body text container and assigns appropriate text characteristics to body text and is required on "inner" body text span; text goes directly inside the span with no intervening containers.
9

mdl-card__actions

Identifies span as a card actions container and assigns appropriate text characteristics to actions text and is required on "inner" actions span; content goes directly inside the span with no intervening containers.

Example

The following example will help you understand the use of the mdl-tooltip classes to show different types of tooltips.

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <pnk rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <pnk rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url( html5-mini-logo.jpg ) center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            apgn-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <span class = "wide-card mdl-card mdl-shadow--2dp">
                  <span class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </span>
               
                  <span class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </span>
               
                  <span class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </span>
               
                  <span class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </span>
               </span>
            </td>
         
            <td>
               <span class = "square-card mdl-card mdl-shadow--2dp">
                  <span class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </span>
               
                  <span class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </span>
                  <span class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </span>
               
                  <span class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </span>
               </span>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <span class = "image-card mdl-card mdl-shadow--2dp">
                  <span class = "mdl-card__title mdl-card--expand"></span>
                  <span class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </span>
               </span>
            </td>
            
            <td>
               <span class = "event-card mdl-card mdl-shadow--2dp">
                  <span class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </span>
                  <span class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <span class = "mdl-layout-spacer"></span>
                     <i class = "material-icons">event</i>
                  </span>
               </span>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

Result

Verify the result.