Material Design Lite Cards - Material Design Lite

What are Material Design Lite Cards?

The MDL cards supports various types of CSS classes to apply different predefined visual and behavioral enhancements to the display various types of cards. Following table explains about 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

Below mentioned example discusses about the use of mdl-tooltip classes to show different types of tooltips.
mdl_cards.htm

Result

Verify the result.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics