Material Design Lite Cards

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 :

<div class="mdl-card"> <!-- the main card container, using class "mdl-card"-->

  <div class="mdl-card__title">
  ...  <!-- To Define the Title of the Card, using class "mdl-card__title"-->
  </div>
  
  <div class="mdl-card__media">
  ... <!-- Container to hold media items , using class "mdl-card__media"-->
  </div>
  
  <div class="mdl-card__supporting-text">
  ...  <!-- To Insert Support Text , using class "mdl-card__supporting-text"-->
  </div>
  
  <div class="mdl-card__actions">
  ... <!-- To hold additional action elements , using class "mdl-card__actions"-->
  </div>
</div>

Creating a Card:

A Basic Google MDL card component is created using class .mdl-card as a container

Sample code:

<div class="mdl-card"> <!-- card container, using class="mdl-card" -->
     
  <div class="mdl-card__media"><img src="tintin.jpg" width="303" 
    height="200" border="0"  alt="" style="padding:10px;">
  <!-- MDL Media container in the Card component, using class="mdl-card__media" -->
  </div>
   
  <div class="mdl-card__supporting-text">  <!-- MDL Card support Text -->
  Adventutes of Tintin <br>
  An Animated Series of Adventure Films 
  </div>
   
  </div> <!-- End of .mdl-card Class -->

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:

<div class="demo-card mdl-card mdl-shadow--4dp"> 
   
   <!-- MDL Card Title using class ".mdl-card__title"-->
  <div class="mdl-card__title mdl-card--expand">
    <h2 class="mdl-card__title-text">Adventures of Tintin</h2>
  </div>
   
   <!-- Support Text using class "mdl-card__supporting-text"-->
  <div class="mdl-card__supporting-text">
    Adventures of Tintin with Journalist(Tintin) and His Dog (Snowy)
  </div>
   
   <!-- Action Elements using class "mdl-card__actions"-->
  <div class="mdl-card__actions mdl-card--border">
    <!-- Border added using class "mdl-card--border"-->
    
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      <!-- Button with ripple Effect-->
      $9.99 Buy Now
    </a>
    
  </div> <!-- .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.

Sample code:

<div class="demo-card-image mdl-card mdl-shadow--4dp">
    
    <!-- MDL Card Title, using class "mdl-card__title" -->
  <div class="mdl-card__title mdl-card--expand"></div>
         <!-- MDL Card Actions  -->
  <div class="mdl-card__actions">
        <!-- MDL Card Image Names -->
  <span class="demo-card-image__filename">TINTIN.jpg</span>
  </div>
       </div>

Address Card:

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

Sample code:

<div class=" mdl-card mdl-shadow--4dp">
     
  <div class="mdl-card__title">  <!-- title -->
   <i class="material-icons">home</i>
    <h4>
     Mr Harry<br>
     21A Baker Street<br>
     US
    </h4>
  </div>
          
</div>
     
     <!-- Card 2-->
  <div class=" mdl-card mdl-shadow--4dp" style="background:#fa4b2a;">
     
  <div class="mdl-card__title"> <!-- title -->
   <i class="material-icons">home</i>
    <h4>
     Mr Venkat<br>
     MI-6 HeadQuarters<br>
    UK
    </h4>
  </div>
          
</div>

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:

<div class="demo-card-wide mdl-card mdl-shadow--8dp">
     <!-- MDL Card Container -->
     
      <div class="mdl-card__title">
        <!-- MDL Card Title container -->
        <h2 class="mdl-card__title-text">The Adventures of Tintin</h2>
                 <!-- title text -->
      </div>
     
     <!-- Supporting Text -->
      <div class="mdl-card__supporting-text">
       A Series of Animated Adventure Films. Lead Characters
       are Tintin(A Journalist) and Snowy(dog)
      </div>
     
     <!-- Border and Action Elements -->
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          $9.99 Buy Now
        </a>
      </div>
     
     <!-- Menu button with Effects -->
      <div class="mdl-card__menu">
        <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
          <i class="material-icons">event</i>
        </button>
      </div>
     </div>

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

Material Design Lite Cards

what is cards in (MDL) ?

Anatomy of MDL Card Component:

Syntax :

Creating a Card:

Sample code:

Card with Additional Elements:

Sample code:

Image Card:

Sample code:

Address Card:

Sample code:

Very Wide Card:

Sample code:

Material Design Lite : Classes

Related Searches to Material Design Lite Cards

Wikitechy

Workshop

Join our Community

Other Languages