Google Choice: Material Design Lite

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

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
1	mdl-card Identifies div element as an MDL card container Required on "outer" div.
2	mdl-card--border Puts a border to the card section that it's applied to and is used on the "inner" divs.
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" div; if omitted, no shadow is shown.
4	mdl-card__title Identifies div as a card title container and is required on "inner" title div.
5	mdl-card__title-text Puts appropriate text characteristics to card title and is required on head tag (H1 - H6) inside title div.
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 div as a card media container and is required on "inner" media div.
8	mdl-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.
9	mdl-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>