MDL : Cards
How to use Material Design Lite Cards within your Document.
Material Design Lite (MDL) : Cards
Material Design Lite(MDL) component card is used to create a virtual card to contain images, text, links related to any single topic.
MDL Cards makes it very easy to display related content side by side, like photographs with captions and some support actions.
Depending upon the type of Content the size of the cards can be set along with other display features.
Material Design Lite (MDL) : Anatomy of MDL Card Component
A Card is created by using class "mdl-card" within the main <div> element. Additional elements can be defined within this main element.
The Title of the card is defined using class "mdl-card__title"
A Container for the media within the card is defined using class "mdl-card__media"
The Supporting text describing the content is defined using the class "mdl-card__supporting-text"
Any Action elements on the card, say a link, is defined using class "mdl-card__actions"
Syntax : Material Design Lite (MDL) Card
Material Design Lite(MDL) Card : Creating a Card
A Basic Google MDL card component is created using class .mdl-card as a container
Example: Material Design Lite (MDL) Fab Buttons with ColorsGive it a TRY! » Note:A lot of additional elements can be added, based on the usage requirements
Material Design Lite(MDL) Card : Card with Additional Elements
A MDL card with a shadow display is created using class mdl-shadow-Xdp , value of X can be 2, 3, 4, 6, 8 or 16