- MDL - Tooltips
- MDL - Textfields
- MDL - DataTable
- MDL - Switches
- MDL - Icons
- MDL - Radio Buttons
- MDL - Checkboxes
- MDL - Sliders
- MDL - Menus
- MDL - Spinners
- MDL - Progress Bars
- MDL - Cards
- MDL - Buttons
- MDL - Badges
- MDL - Footers
- MDL - Tabs
- MDL - Grids
- MDL - Layouts
- MDL - Environment Setup
- MDL - Overview
- MDL - Home
Material Design Lite Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Material Design Lite - Cards
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.
Advertisements