Material Design Lite Cards
what is cards in (MDL) ?
- The MDL component cards 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.
Anatomy of MDL Card Component:
- A Card is created by using class "mdl-card" within the main 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 :
Creating a Card:
- A Basic Google MDL card component is created using class .mdl-card as a container
Sample code:
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
Sample code:
Image Card:
- An MDL Card component can be used to create an Image Card as well, by setting an Image as the Background and applying other CSS style effects.
Sample code:
Address Card:
- The MDL card component can be used to create an Address Card as well.
Sample code:
Very Wide Card:
- A wider MDL Card can be created by using CSS styles to set the width of the class mdl-card
Sample code:
Material Design Lite : Classes
MDL Class | Description |
---|---|
mdl-card | To Define any div element as an MDL Card Component Container. |
mdl-card--border | To Add a Border within card sections. |
mdl-shadow--Xdp | To apply shadow with variable depth defined by value of X, X can be 2, 3, 4, 6, 8 or 16 |
mdl-card__title | To Define the title container within any div |
mdl-card__title-text | To apply text charactersitics to the title of MDL card, H1-H6 |
mdl-card_subtitle-text | To apply text charactersitics to the sub-title of MDL card |
mdl-card__media | To Define a div element as a media container |
mdl-card__supporting-text | To Define a div element as a container for supporting text. |
mdl-card__actions | To define a div element as a container of the action element |