Search within TutorialsPark

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 Colors

Give 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

Example: Material Design Lite (MDL) Card With Additional Elements

Give it a TRY! » Note:CSS Styles used to set the Background and the dimensions of the card


Material Design Lite(MDL) Card : 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.

Example: Material Design Lite (MDL) Card Image Card

Give it a TRY! » Note:The Name of the image is defined within the class mdl-card__actions


Material Design Lite(MDL) Cards : Address Card

The MDL card component can be used to create an Address Card as well.

Example: Material Design Lite (MDL) Flat Buttons

Give it a TRY! » Note:Any Button component by default is a flat button.


Material Design Lite(MDL) : A Very Wide Card

A wider MDL Card can be created by using CSS styles to set the width of the class mdl-card

Example: Material Design Lite (MDL) A Very Wide Card

Give it a TRY! » Note: The Background of the card is set within the title of the element.


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