Monday, March 6, 2017

Material Design Lite - Cards

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of cards. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-card
Identifies div element as an MDL card container Required on "outer" div.
2mdl-card--border
Puts a border to the card section that it's applied to and is used on the "inner" divs.
3mdl-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" div; if omitted, no shadow is shown.
4mdl-card__title
Identifies div as a card title container and is required on "inner" title div.
5mdl-card__title-text
Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title div.
6mdl-card__subtitle-text
Puts text characteristics to a card subtitle and is optional. It should be a child of the title element.
7mdl-card__media
Identifies div as a card media container and is required on "inner" media div.
8mdl-card__supporting-text
Identifies div as a card body text container and assigns appropriate text characteristics to body text and is required on "inner" body text div; text goes directly inside the div with no intervening containers.
9mdl-card__actions
Identifies div as a card actions container and assigns appropriate text characteristics to actions text and is required on "inner" actions div; content goes directly inside the div with no intervening containers.

Example

The following example showcases the use of 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>
   <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
   <link 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;
         align-items: center;
         color: #fff;
      }     
</style>
</head>
<body>
   <table>
      <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
      <tr><td>
          <div class="wide-card mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
               <h2 class="mdl-card__title-text">H5</h2>
            </div>
            <div 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.
            </div>
            <div class="mdl-card__actions mdl-card--border">
               <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Learn HTML5</a>
            </div>
            <div 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>
            </div>
         </div>
             </td>
         <td>
         <div class="square-card mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
               <h2 class="mdl-card__title-text">H5</h2>
            </div>
            <div 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.
            </div>
            <div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Learn HTML5</a>
            </div>
            <div 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></div>
            </div>
             </td>
      </tr>
      <tr><td>Image Card</td><td>Event Card</td></tr>
      <tr><td>
         <div class="image-card mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title mdl-card--expand"></div>
            <div class="mdl-card__actions">
               <span class="image-card-image__filename">html5-logo.jpg</span>
            </div>
         </div>
         </td>
         <td>
            <div class="event-card mdl-card mdl-shadow--2dp">
               <div class="mdl-card__title mdl-card--expand">
                  <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
               </div>
               <div 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>
                  <div class="mdl-layout-spacer"></div>
                  <i class="material-icons">event</i>
               </div>
            </div>
             </td>
      </tr>          
   </table>   
</body>
</html>

Result

Verify the result.
Previous Page
Print
Next Page  
Advertisements
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)